Введение

В этой работе мы познакомимся с языком разметки Markdown. Это разновидность текстовых файлов. Внутри такого файла находятся только стандартные символы ASCII, то есть буквы, цифры, знаки препинания и другие символы, которые можно найти на обычной компьютерной клавиатуре. При просмотре Markdown мы получаем форматированный текст: заголовки, жирный и наклонный шрифт, таблицы и так далее.

Редактируют этот файл любым инструментом, например с помощью Блокнота – Notepad. Этот формат также понимают и более продвинутые средства редактирования, такие как Notepad++. Многие интегрированные среды программирования – Integrated Development Environment (IDE) – тоже могут работать с форматом Markdown.

Всего за один, или два, или три часа вы познакомитесь с новой технологией. К концу этого занятия вы сможете легко создавать и редактировать файлы формата Markdown и профессионально работать с ними в блокнотах Google Colab и на сервисах управления версиями типа GitHub.

Оформление отчёта

Отчёт по этой работе оформляется в облачной среде Google Colab. Если выразиться точнее, это интерактивный блокнот – тетрадка для программирования на Питоне. Если кто-то предпочитает английское название, то «на Python».

Здесь есть возможность не только составлять программу, но и работать с ячейками форматированного текста.

Открываем страничку сервиса [Colab], ссылку смотри в конце описания работы. Входим с учётной записью Google и создаём новый блокнот – New notebook.

Создаём текстовую ячейку – Text – Add text cell. Передвигаем её в начало блокнота – Move cell up.

для редактирования содержимого текстовой ячейки – двойной щелчок мышкой – Double-click to edit.

Вводим наш текст и время от времени сохраняем файл, нажимая комбинацию клавиш [Ctrl + S] – от слова Save – Сохранить.

Рис. Отчёт по работе

Отчёт по традиции начинаем с титульного листа. Здесь приводим те же ключевые данные по поводу нашего документа: Министерство, вуз, кафедра, название работы, … и даже фамилии авторов. Подробности мы уже обсуждали в предыдущей работе, повторяться не будем.

Абзацы разделяем пустой строкой.

По окончании работы нужно будет «расшарить» блокнот – Share notebook, то есть предоставить совместный доступ на чтение. Нажимаем кнопку Share в правом верхнем углу окна. Выбираем адресатов – любой пользователь, получивший ссылку – Anyone with the link. Устанавливаем права только на чтение – Viewer – Просмотр. Копируем ссылку в буфер обмена – Copy link. Вставляем ссылку в форму для отправки отчета на странице курса на GitHub.

Рис. Делимся ссылкой на отчёт

Установка редактора

Для первого знакомства с этой технологией мы установим очень простой и популярный текстовый редактор Notepad++. Само название уже на что-то намекает. Имеется в виду стандартный блокнот Windows Notepad. Два плюсика намекают на следующий шаг, следующий уровень, на улучшение и совершенствование, на дополнительные возможности.

Первоначально два плюсика использовались в языке программирования Си для операции инкремента, то есть для увеличения значения счётчика на единицу. Затем эта символика использовалась для обозначения языка программирования С++, чтобы подчеркнуть идею дальнейшего развития. Так вот, Notepad++ – это дальнейшее развитие программы Notepad.

Мы будем использовать такую версию этой программы, которая не требует установки. Мы просто скачиваем файл архива из интернета, распаковываем его в рабочем каталоге и запускаем на выполнение. Это можно произвести даже с правами пользователя, которому не разрешается вносить изменения в настройки операционной системы. После работы с нашей программой мы можем удалить всю папку, и на компьютере не останется никаких файлов, никаких следов, никаких записей в реестре операционной системы.

Такая программа называется «переносимый вариант», или «портируемая версия», или по-английски Portable Application. Буквально английское слово Portable означает «портативный», то есть небольшой, удобный для переноски вручную – с места на место.

Примером такого изделия служит печатная машинка. В течение многих лет люди использовали большие, стационарные печатные машинки. А для работы в поездках были придуманы небольшие, портативные машинки, которые можно было носить в небольшом чемоданчике.

Рис. Портативная печатная машинка

То же самое было сделано и с компьютерами. Первые компьютеры были очень большие и занимали отдельную комнату или даже целый дом. Затем были разработаны персональные компьютеры, которые стояли на столе или под столом – Desktop. Для использования в поездках их размеры уменьшили до ноутбуков, а затем появились и мобильные устройства – планшеты и смартфоны.

Точно так же, переносимые программы можно легко переносить с одного места на другое – то есть просто копировать всю папку с файлами и не заниматься процедурой установки.

Открываем сайт [Notepad++]. Переходим по ссылке download. Выбираем вариант Portable Zip и скачиваем себе на компьютер. Создаём новый каталог и распаковываем туда содержимое архива – со всеми его подкаталогами и файлами. Запускаем исполняемый файл – он тут в корневом каталоге один такой.

Рис. Загружаем переносимую версию

Теперь нам нужно установить дополнение для просмотра файлов markdown. в верхнем меню выбираем пункт Plugins – Plugins Admin. Находим в списке Markdown Viewer и нажимаем кнопку Install. Соглашаемся на установку дополнения и перезапуск программы.

Рис. Установка дополнения для просмотра

Открываем редактор и создаём наш первый файл. Сохраняем файл с расширением *.md. Далее в Проводнике мы можем выбрать программу для редактирования таких файлов по умолчанию.

Рис. Редактирование и просмотр Markdown

На рисунке показан пример редактирования и просмотра. Можно видеть, что исходный текст легко читается. При этом он содержит дополнительные указания – разметку форматирования. Например, заголовок начинается с одного или нескольких символов решётки # и пробела. Курсив, то есть наклонный шрифт, выделяется символом звёздочки *. При редактировании такого файла мы вводим эти символы разметки вручную, с клавиатуры.

Markup и Markdown

Для просмотра отформатированного текста в нашем примере служит секретная кнопка в верхней линейке инструментов. Чтобы просмотреть результаты, мы нажимаем эту кнопку, чтобы закрыть и снова открыть окно просмотра. На этой кнопке изображено условное обозначение языка Markdown – заглавная буква M и стрелка вниз. Слово «вниз» по-английски звучит как «down». Кроме движения вниз, это слово передаёт идею упрощения. То есть это упрощённый язык разметки.

Но это ещё не всё. Этот язык, упрощённый по сравнению с полноценным форматом HTML. А расшифровывается это как HyperText Markup Language – язык гипертекстовой разметки. Получается, что Markdown – это как бы противоположность Markup.

Но и это ещё не всё. Первоначально слова mark up и mark down означали повышение и понижение цены на товар. Продавец вывешивает новый ценник, то есть как бы «обозначает», или «помечает», или «отмечает» цену на товаре, который лежит на витрине. А уже потом компьютерщики использовали эти термины для языков разметки текста. Подробнее можно изучить всю эту историю в словарях и с помощью интеллектуальных чап-ботов.

Вот такая игра слов. Программисты очень любят играть словами и символами. Особенно если приходится работать с обычным текстом и командным окном, консолью, терминалом. Здесь больше играть не с чем.

Создатели этого проекта поясняют, что такой формат легко воспринимается человеком. Его легко читать и несложно редактировать. С другой стороны, этот формат автоматически преобразуется в HTML, и его можно использовать на страничках веб-сайтов [Markdown Project]. Они даже определяют Markdown как инструмент для преобразования текста в HTML для авторов веб-страниц. Что нас особенно радует, Markdown – это свободно распространяемое программное обеспечение – free software.

Общее описание формата можно найти в народной энциклопедии [ВИКИ: Markdown].

Основные конструкции Markdown

Самые простые, базовые приёмы форматирования описаны на странице проекта [Markdown Basics]. Рассмотрим эти инструменты. Если у читателя есть трудности с пониманием английского текста, можно включить автоматический перевод. Он хорошо работает в браузере Яндекса и Google Chrome.

Абзацы разделяют пустыми строками – одной или несколькими. Это удобно при вводе текста. Мы вводим короткие строки в рамках одного небольшого окна. Даже одно предложение можно разбить на несколько строк. Пока не будет пустой строки, весь текст сливается в один длинный абзац. Затем, при просмотре, мы увидим один абзац вместо нескольких строк.

Заголовки начинаем с одного или нескольких символов решётки. После решётки ставим пробел, а затем сам текст заголовка. Так мы получаем несколько уровней заголовков. Можно сделать до 6 уровней – то есть до 6 символов решётки подряд. При просмотре они превращаются в теги от

до

.

Проверим, насколько это правда. Мы каждый раз должны «доверять, но проверять». Особенно при работе с компьютером. И особенно при чтении документации на программы. Мы к этой проблеме с документацией ещё вернёмся.

Итак, вводим вручную несложный текст с шестью уровнями заголовков. Затем на вкладке Markdown Viewer экспортируем его в HTML и PDF.

Рис. Экспорт гипертекста

Сохраняем файл в формате HTML и открываем его на просмотр любым браузером. Убеждаемся, что форматирование выполнено корректно.

Открываем тот же файл HTML на редактирование с помощью Блокнота. Изучаем теги HTML.

Как видим, появились теги заголовков h1-h6 от слова Header – заголовок.

Абзацы разделяются тегом p от слова Paragraph -параграф, абзац.

Курсив указан как em – от слова emphasis – ударение, подчёркивание, акцент – выделение текста для передачи важности.

Ещё о разметке

Заголовки можно также определять «подчёркиванием». На самом деле это строка из знаков «равно» и «минусов/чёрточек/дефисов» под самим текстом заголовка. Такое оформление читается ещё легче. Правда, третий уровень всё-таки придётся оформлять решётками.

Как мы уже говорили, курсив – это выделение одинарными звёздочками – до и после фрагмента текста. Жирный шрифт – выделение двойными звёздочками. Попробуем сообразить с одного раза, как выделить жирный курсив…

Двойная волнистая черта позволяет зачеркнуть текст. Такой приём добавляет выразительности.

На рисунке показана ещё одна особенность. Количество пустых строк между абзацами текста ни на что не влияет. И одна, и несколько пустых строк подряд – это просто разделитель двух соседних абзацев.

Рис. Жирный курсив и заголовки

Для использования текста программ есть свои хитрости. Во-первых, для этого удобнее использовать буквы одинаковой ширины. Так уже было в печатных машинках. И так удобнее работать с кодом. Называется это «моноширинный» шрифт – monospace. «Моно» означает «один», получается «шрифт одной ширины». Такие готовые шрифты есть в операционных системах. надо просто выбрать из списка.

Задание. Найдите моноширинные шрифты на своём компьютере. Посмотрите, как выглядит текст программы, напечатанный таким шрифтом.

Списки тоже делаются особым, хитрым способом.

Если список ненумерованный, то можно использовать звёздочки (*), плюсики (+) и минусы/чёрточки (-). В начале строки звёздока, потом пробел, потом пункт списка. Но на экране будет стандартное обозначение пунктов списка: bullets – «буллеты» – буквально «пули». Это простые популярные маркеры списков. Первоначально это слово означало «шарик, пузырёк». Теперь это кружочки, жирные точки.

Если список нумерованный, то строчка должна начинаться с цифры, точки и пробела. При этом цифры могут быть любые. Могут быть одинаковые, могут быть разные, могут идти в любом порядке. При выводе на экран список будет пронумерован по возрастанию.

Рис. Оформление списков

Фрагмент кода выделяется пустыми строками – как абзац. Каждая строка начинается с табуляции и четырёх пробелов. Затем при выводе на экран код немного «ужимают».

Рис. Блок кода

В тексте может быть гиперссылка с указанием адреса сайта. Сюда можно добавить текст для всплывающего заголовка. Для оформления ссылки нужны квадратные и круглые скобки. Между квадратной и круглой скобкой не должно быть пробела.

Рис. Ссылка на сайт

Markdown в веб-сервисах

Теперь посмотрим, как работает этот формат применительно к популярным интернет сервисам.

GitHub. Загружаем наш файл в репозиторий на github и gitverse. Открываем файл на просмотр и изучаем форматирование текста.

Рис. Файл в репозитории GitHub

После загрузке файла на страничке GitHub появляется возможность просматривать исходный текст и отформатированное представление – это кнопки Preview и Code.

GitVerse. Аналогичные кнопки на сервисе GitVerse называются Превью и Код. Кстати говоря, мы можем добавить наш файл в репозиторий разными способами.

Можно просто нажать кнопку Добавить файл над списком файлов и ввести имя файла и его содержимое. Таким образом мы добавляем исходный код, например, путём копирования и вставки через буфер обмена.

Рис. Файл в репозитории GitVerse

Конечно, есть возможность работать с репозиторием и через интерфейс командной строки CLI – Command Line Interface. Но этим мы займёмся в другой раз.

При просмотре готового текста вызываем исходный текст веб-страницы. В каждом браузере это делается по-своему. Например, в Firefox нажимаем клавишу [F12]. Убеждаемся, что HTML-код соответствует предыдущим примерам.

Dingus. Следующий веб-сервис – это [Dingus]. Он открывает возможности для онлайн-тестирования и демонстрации синтаксиса Markdown.

Рис. Работа с Markdown в сервисе Dingus

Мы вставляем наш код в окно Markdown Source и нажимаем кнопку Convert.

Теперь у нас появляется возможность просматривать HTML Source и HTML Preview.

Сравниваем результаты с нашими предыдущими опытами.

Здесь же в правой панели нам выводится шпаргалка по основному синтаксису языка разметки: Syntax Cheatsheet.

Colab. Ещё один инструмент для работы с Markdown – это Google Colab. Его основное предназначение – это интерактивная, диалоговая работа программой на Python.

С питоном можно работать двумя способами. Можно написать всю программу в рамках одного файла в Блокноте Windows или в интегрированной среде разработки, а затем вызвать транслятор/компилятор и запустить программу на выполнение – от начала до конца. Это традиционная работа с программированием.

Второй способ – это диалог. В этом случае наша программа будет состоять из отдельных фрагментов, которые оформляются как ячейки. Ячейки можно запускать на выполнение в любом порядке. При этом значение переменных сохраняются в оперативной памяти и доступны на время всего сеанса работы. Вся программа в целом оформлена в виде интерактивного блокнота, или «тетрадки» Jupyter Notebook. Можно установить соответствующий программный пакет типа Anaconda на локальный компьютер либо обратиться к облачному сервису вроде Google Colab. В обоих случаях с таким блокнотом мы работаем через браузер, через веб-интерфейс.

Название Colab – это сокращение от Colaboratory. Это облачная лаборатория для совместной работы с программным кодом. Для начала работы в бесплатном режиме достаточно использовать учётную запись Google.

Создаём новый блокнот и соединяемся с виртуальной машиной, нажав кнопку Connect.

Рис. Работа с Markdown в Google Colab

В этой среде мы можем создавать ячейки с кодом и ячейки с текстом. В кодовых ячейках будут фрагменты программы на Python. В текстовых ячейках можем расположить Markdown. Для запуска конкретной ячейки на выполнение можно нажать комбинацию клавиш [Shift + Enter]. Для редактирования текстовой ячейки мы просто дважды щёлкаем по её содержимому.

Создаём текстовую ячейку и вводим наш готовый материал. Запускаем. Проверяем.

Чтобы сохранить нашу работу в файле, вызываем через меню File – Save или комбинацию клавиш [Ctrl + S]. При этом файл сохраняется на облачном диске Google Drive.

Проверяем, где именно сохраняется наш блокнот. Для этого открываем в браузере или приложении облачный диск и находим каталог Colab Notebooks.

Есть возможность скачать наш файл на локальный компьютер в виде исходного текста программы на Python *.py либо в виде файла блокнота ipynb, в котором находятся текстовые и кодовые ячейки, а также результаты вывода на экран. для скачивания файла выбираем в меню раздел File – Download и указываем тип файла.

Рис. Файлы *.py и *.ipynb

Скачиваем оба варианта и изучаем их содержимое.

Файл типа *.py содержит текст программы Python. Текстовые ячейки здесь представлены в виде многострочных комментариев и выделены тройными кавычками.

Файл формата *.ipynb – это ipython (interactive python) notebook. Здесь сохраняется разбиение блокнота на ячейки. Содержимое оформлено фактически в формате json. В дополнение к нашему тексту в конце каждой строки добавлен символ перевода строки \n – от английского new line – новая строка.

Docker + Anaconda

Наконец попробуем запустить диалоговый, интерактивный блокнот на локальном компьютере. Чтобы не заниматься установкой дополнительных программ, мы будем использовать популярную технологию контейнеризации приложений Docker.

Нам понадобится приложение под названием Anaconda. Это тоже название змеи и это намёк на язык программирования Python.

Мы будем запускать этот программный продукт в виде контейнера. Для этого нам понадобится предварительно установить среду запуска контейнера docker. технические подробности зависят от конкретной операционной системы. в рамках наших лабораторных работ мы используем OS Microsoft Windows и Docker Desktop.

В дисплейных классах нашей кафедры уже установлено необходимое программное обеспечение. Если у читателя появится желание самостоятельно установить эти средства на своём домашнем компьютере или ноутбуке, можно ознакомиться с более подробным описанием технологии, которое приводится в нашем учебном пособии и видеороликах, см. [Operating-Systems Repo].

В начале мы запускаем программу Docker Desktop с правами администратора.

В нижней части окна программы запускаем командную строку. Затем в этом терминале вводим длинную, сложную команду, которую можно сформировать с помощью интеллектуального помощника. Запоминать эту команду пока не требуется.

Рис. Инструкция по запуску контейнера

При первом запуске контейнера происходит скачивание необходимых материалов с облачного сервиса Docker Hub. Это происходит автоматически, без нашего участия.

После успешного запуска контейнера в терминале выводится ссылка для подключения к блокноту.

Рис. Запуск контейнера Anaconda

Щёлкаем мышкой по этой ссылке, и в браузере открывается сервис Jupyter Lab.

На вкладке Launcher запускаем диалоговый блокнот Notebook Python 3.

Появляется окно нашего блокнота. Переименуем его: File – Rename Notebook.

Здесь мы вручную можем изменять тип содержимого ячейки – кодовая (Code) или текстовая (Markdown).

Рис. Jupyter Lab в браузере

Устанавливаем тип ячейки – текстовая. Вставляем в текстовую ячейку уже отработанное нами содержимое. Запускаем ячейку на выполнение.

Здесь тоже есть возможность скачать блокнот в формате *.ipynb.

Мы можем завершить работу с контейнером и остановить его выполнение. Когда мы запустим его в следующий раз, нам уже не понадобится терминал/консоль. Выбираем контейнер в списке и нажимаем кнопку Пуск.

Для управления выполнением контейнера имеются традиционные кнопки Пуск, Стоп и Пауза.

Для перехода в веб-интерфейс нужно будет щёлкнуть по ссылке в графе «Порты». Кстати, в этом случае «порт» означает целое число, которое нужно указать для доступа к программному сервису.

Рис. Повторный запуск контейнера

Для повторного запуска контейнера у нас всё уже готово и скачано из интернета. Выбираем вкладку Containers – Контейнеры. Затем в списке контейнеров находим тот, который нам нужен. Для этого смотрим в колонку Image – Название образа. Нас интересует образ Conda – то есть Anaconda. Нажимаем кнопку Пуск – Start.

Запуск происходит очень быстро. Практически мгновенно. Теперь в колонке Порты – Ports становится активной ссылка на номер порта. Наводим на неё курсор и видим всплывающую подсказку – адрес сервиса – localhost. Щёлкаем по ссылке и в браузере открывается Jupyter Lab.

Рис. Страница запуска Jupyter Lab

В левой части окна имеется панель со списком файлов и каталогов. Здесь можно найти наш сохранённый ранее блокнот. Список каталогов явно указывает на то, что здесь развёрнут Linux.