Markdown - это легко читаемый и простой в изучении язык разметки. В отличие от HTML, XML и других языков разметки, где безумное количество непонятных тегов делает его неприступным, markdown легко читается даже в виде необработанного текстового файла.
В то же время markdown очень легок и гибок. Наиболее популярное применение markdown - файлы лицензий и README в репозитории GitHub, но его также интегрируют во все большее количество CMS для управления записями в блогах и даже для написания научных работ. Вы можете выводить математические уравнения с помощью плагинов для LaTeX.
Однако в основном его используют разработчики. Благодаря подсветке синтаксиса для нескольких языков и поддержке изображений и даже gif-файлов он очень полезен при создании учебников и документации.
Давайте начнем с настройки, которая позволяет нам просматривать отрисованный документ вместе с исходным текстовым файлом в формате markdown.
Текстовый редактор Atom и предварительный просмотр Markdown
Вы можете скачать и установить текстовый редактор Atom или Visual Studio Code. И Atom, и VS Code имеют предустановленные плагины для Markdown Preview. Здесь мы будем использовать Atom, но синтаксис останется примерно таким же, независимо от того, какой текстовый редактор вы используете.
В Atom убедитесь, что пакет Markdown Preview включен (на самом деле он включен по умолчанию). Создайте папку для этого учебника по разметке, откройте в ней новый файл (CTRL + N) и введите в него следующий текст.
| 1 2 3 4 5 | # This is a heading ___ ##This is also a heading Here's some text |
Сохраните файл (CRTL + S) с расширением .md. Например, вы можете назвать файл test.md, и часть .md укажет Atom, что это файл разметки, и расширение будет работать с ним по назначению. Вы можете создать предварительный просмотр, используя следующую привязку клавиш (CTRL+SHIFT+M), который отображается в новой панели рядом с исходным текстовым файлом.
Закрыть панель предварительного просмотра можно с помощью той же привязки клавиш или с помощью самого графического интерфейса.
Когда все готово, мы можем поближе познакомиться с синтаксисом и начать создавать удивительные документы на лету.
Синтаксис Markdown
Как уже говорилось, основная мотивация Markdown - это удобство чтения. Это означает отсутствие непонятных тегов, вложенных тегов или любых других вызывающих путаницу строк. Вместо этого мы можем начать с символа '#', чтобы указать, что данная строка является заголовком.
| 1 2 3 | # Is a heading. ## Also indicates heading, but with smaller font size. ### You can go on to consecutively smaller sizes |
Разрывы строк
Markdown продолжает объединять весь текст в один огромный абзац, даже если исходный текст разбит на несколько разных строк. Чтобы смягчить эту проблему, можно использовать два пробела в конце строки, а затем поставить символ новой строки (то есть нажать <Enter>) или просто использовать два символа новой строки для несколько иного эффекта, как показано ниже.
Предложение "Вот почему..." начинается с новой строки, но не отделяется от предыдущей строки, тогда как использование двух новых строк создает более широкое разделение.
Горизонтальное правило
Горизонтальное правило, как следует из названия, создает горизонтальную линию, которая позволяет структурировать документ и делать в нем логические разделения. Существует два способа создания горизонтального правила. Первый - использовать три или более подчеркиваний для создания горизонтального правила.
| 1 2 3 4 5 | #Heading 1 ___ Paragraph and heading are separated by a horizontal rule. ___ Another separated section |
Другой вариант (который я не рекомендую) - использовать три или более тире '-', но они также используются, чтобы указать, что предложение, расположенное непосредственно над ними, является заголовком. Таким образом, если между предложением и горизонтальным правилом под ним нет новой строки, это предложение будет иметь вид заголовка.
Курсив, полужирное и зачеркнутое начертание
Синтаксис этих трех элементов довольно прост и говорит сам за себя.
| 1 2 3 4 5 | **This is in bold** __This is also bold__ _This is italics_ *This is also italics* ~~This is strikethrough~~ |
Символ Escape
Кто-то может спросить, как же вы буквально впишете **Некоторый текст** в конечный файл разметки, если он каждый раз будет менять это на полужирный. Это то, с чем сталкивается большинство языков программирования, и решение здесь аналогично - используйте символ обратной косой черты. Это работает и для других элементов синтаксиса, а не специально для выделения жирным шрифтом.
| 1 2 3 | \**This is no longer bold\** If you want to show the backslash character itself, then use two of them and so on. \\ Shows up as a single slash |
Блок-кавычки и блоки кода
С блочными кавычками и блоками кода все гораздо проще. Блок-цитата может использоваться для выделения важного момента, к которому вы хотите привлечь внимание читателей. Этого можно добиться, используя прямую угловую скобку в начале, как показано на рисунке.
| 1 2 3 4 5 6 7 8 9 10 11 | # Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. > This is a neat summary of a subsection of your document. A > couple of lines that stand out from the rest of the content. The content continues. |
Вот как это выглядит при визуализации.
Для блоков кода просто отступите от строк на 4 пробела или больше. Это очень
удобно для разработчиков и операторов, которые хотят документировать свою работу. Позже мы рассмотрим, как сделать это еще лучше.
Изображения
Синтаксис изображений довольно, он начинается с восклицательного знака. Вы можете использовать относительный путь в папке проекта, указывающий на изображение, или публичный URL.
| 1 2 3 4 5 | ## Illustrating HyperLink and Image syntax ___ This is how images are embedded.  |
Таблицы
Создание таблиц в markdown включает в себя буквальное рисование ascii (если быть точным, Unicode) портрета таблицы.
| 1 2 3 4 5 6 7 8 9 | ## Tables | Column 1 | Column 2 | Column 3 | | --------- | --------- | --------- | | First row | First row | First row | | Second row| Second row| Second row| |
Синтаксис не обязательно должен быть точно выровнен от одной строки к другой, но символ pipe используется для перехода к следующему столбцу, а next line указывает на начало следующей строки, как правило.
Расширенная разметка
Для тех из вас, кто дошел до этого момента, наступает настоящий праздник. Если вы используете Atom, вы можете заменить плагин Markdown Preview на Markdown Preview Plus. Который предлагает следующие функциональные возможности.
Математические уравнения с использованием LaTeX
Вы можете вставлять сценарии LaTeX между знаками доллара, и они будут отображаться как сценарии LaTeX и показываться в предварительном просмотре с помощью привязки клавиш CTRL+SHITFT+X. Вам даже не нужно знать весь LaTeX, достаточно нескольких фрагментов.
| 1 2 3 4 | ## Illustrating LaTex ___ $$|\Psi \rangle = \alpha|0\rangle + \beta| \rangle $$ |
Выделение синтаксиса
Вместо того чтобы использовать отступы для обозначения блоков кода, вы можете использовать обратные знаки, за которыми следуют названия языков, на которых предположительно написан ваш скрипт. Языков, синтаксис которых поддерживается, слишком много, чтобы перечислять их здесь, но вот пример на python.
| 1 2 3 4 5 6 7 8 9 | ## Illustrating Syntax highlighting ___ ```python import this def my_function(): print("Hello, World!") return 0 ``` |
Заключение
Существует множество разновидностей Markdown. У GitHub есть своя особая разновидность, а синтаксис очень гибкий. Это не должно отпугивать пользователей, а наоборот, позволяет охватить большее количество пользователей. Это один из тех языков, в которых достаточно понять нужную часть и использовать ее, а не заморачиваться техническими тонкостями (если только вы не интересуетесь этими тонкостями!).