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 символов решётки подряд. При просмотре они превращаются в теги от <h1> до <h6>.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Файл типа *.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. Это происходит автоматически, без нашего участия.

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

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

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

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

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