Цифровые технологии и искусственный интеллект. Учебное пособие

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

После загрузке файла на страничке 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.

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