Контент в сети должен быть представлен в формате HTML. Многие инструменты веб-публикации (например, программное обеспечение для ведения блогов и CMS) преобразуют ваш контент (текст, изображения и т. Д.) В HTML за вас. Но есть много ситуаций, когда вы хотите написать HTML-контент самостоятельно… а разметка контента с помощью HTML-тегов вручную трудоемка и нецелесообразна. Введите Markdown.
Markdown — это простой и удобный способ написания контента для Интернета, а также идеальный способ для разработчиков создавать документацию. Он позволяет легко структурировать и форматировать документы с помощью простой текстовой разметки, которая затем конвертируется в HTML для вас — и все это в вашем любимом текстовом редакторе.
Если вы еще не используете Markdown, возможно, сейчас самое время начать. Вы можете изучить основы за считанные минуты, и при постоянном использовании синтаксис станет вашей второй натурой. В этой статье мы посоветуем вам начать просто и покажем, как использовать Markdown для ряда общих задач при создании контента.
Что такое Markdown?
Markdown — это легкий язык разметки, созданный Джоном Грубером в 2004 году. Его легко писать, легко читать и легко преобразовать в HTML. Он был в первую очередь предназначен для написания статей для Интернета.
Его популярность быстро выросла и теперь используется в контекстах, которые никогда не предполагались его создателем. Но это не идеально. У него есть ограничения, особенно потому, что он не учитывает форматирование многих элементов HTML, которые могут вам понадобиться (например, таблиц). Это также может быть немного двусмысленным.
В результате был создан ряд вариантов решения этих проблем:
- CommonMark пытается стандартизировать Markdown и сделать его менее неоднозначным, что противоречит некоторым исходным синтаксисам в процессе.
- GitHub Flavored Markdown (GFM) расширяет CommonMark и используется при создании документации на GitHub.
- В MultiMarkdown добавлен новый синтаксис для таблиц, сносок, цитат и многого другого.
- Pandoc расширяет Markdown для нескольких форматов вывода (не только HTML) и поддерживает метаданные документа, сноски, таблицы, надстрочный индекс, подстрочный индекс и многое другое.
Некоторые веб-службы и редакторы Markdown поддерживают синтаксис некоторых из этих вариантов или даже используют собственную версию Markdown. К счастью, все они поддерживают оригинальный синтаксис Markdown, и именно на этом мы сосредоточимся в этой статье.
Изучение Markdown
Лучший способ изучить Markdown — это просто начать. Выберите вариант использования и начните, будь то создание сообщения в блоге, работа над документацией или просто добавление базового форматирования к своим заметкам. Подбирайте синтаксис по частям по мере необходимости.
Вы можете использовать свой любимый текстовый редактор или выбрать одно из множества приложений, предназначенных для работы с Markdown. Редакторы Markdown могут упростить процесс обучения, поскольку они позволяют предварительно просмотреть форматирование на месте или на отдельной панели. Это означает, что вы можете сразу увидеть, правильно ли вы используете синтаксис.
Лично я использую Marked 2 для предварительного просмотра файлов Markdown на моем Mac. Это коммерческий продукт, но, конечно, вы можете найти множество бесплатных плагинов для выбранного вами редактора. Вы также можете редактировать и просматривать файлы Markdown онлайн с помощью Markdown Live Preview и StackEdit.
Структурирующие документы
Markdown позволяет добавлять в документ структурные элементы, такие как заголовки ( h1, h2и h3т. Д.). Есть несколько способов добавить заголовки в Markdown. Я предпочитаю добавлять к заголовку хеши #, по одному для каждого уровня заголовка:
# Heading 1 ## Heading 2 ### Heading 3 etc. And this is body text.
Хэши перемещают заголовки нижнего уровня дальше вправо, поэтому они выглядят с отступом. При желании вы можете использовать такое же количество хэшей в конце строки, чтобы закрыть заголовки:
### Heading 3 ###
Есть второй способ, хотя я не вижу, чтобы он использовался так часто. Вы можете создать два уровня заголовков, подчеркнув заголовки H1 =символами равенства и заголовки H2 дефисами -:
Heading 1 or Title ================== Heading 2 ---------
Разделы документа можно разделить с помощью горизонтальных<hr /> линий ( ) или линий. Вы создаете их в Markdown с помощью трех (или более) дефисов -, звездочек *, подчеркиваний _или =знаков равенства. Поместите их по отдельности в строку, с пустыми строками по обе стороны:
Brief introduction. === # Chapter 1 Lots of text. --- # Chapter 2 Some more text ---
Списки — еще один важный структурный элемент. Неупорядоченные списки ( <ul>) создаются путем начала строки со звездочки *, +символа плюса или дефиса -, за которым следует пробел или табуляция, а затем текст:
* this * is * an * unordered * list + this + is + too - and - so - is - this
Выберите тот символ, который вам подходит. Вы можете переключаться между этими символами, и конечный результат будет таким же. Я обычно использую звездочки или дефисы.
Упорядоченные списки ( <ol>) — это числа, за которыми следует точка. Цифры не обязательно должны быть в порядке. Любой из них будет работать:
1. this 2. is 3. an 4. ordered 5. list 1. and 1. so 1. is 1. this
Редакторы Markdown, которые я использую, автоматически продолжают список при нажатии return.
Если вы хотите начать строку с числа и точки без начала списка, вам нужно экранировать точку с помощью обратной косой черты \:
2020\. A year we'll never forget.
Наконец, абзацы обычного текста разделяются одной или несколькими пустыми строками:
This will be formatted as an HTML paragraph. And so will this.
Основное форматирование текста
Основное форматирование текста включает полужирный шрифт и курсив. Подчеркивание обычно не используется в Интернете, поскольку именно так форматируются гиперссылки, поэтому Markdown не поддерживает его. Если вы действительно хотите его использовать, просто используйте <u>HTML-теги. (Это стоит отметить в более общем плане. Там, где Markdown не поддерживает определенный тип HTML-элемента, вместо этого вы можете просто использовать HTML-разметку. Есть только одно предостережение: любой синтаксис Markdown внутри HTML-тегов не будет проанализирован.)
Слова, выделенные курсивом, разделяются одной звездочкой ( *) или подчеркиванием ( _):
this is *italics* and so is _this_
Слова, выделенные полужирным шрифтом, разделяются двойной звездочкой ( **) или подчеркиванием ( __):
this is **bold** and so is __this__
Некоторые люди предпочитают использовать подчеркивание или курсив. Например, я обычно использую звездочки для **bold**и *italics*.
Другие предпочитают выделять жирный шрифт и курсив с помощью разных символов, например: **bold**и _italics_:
_You **can** also combine them_
Цитаты и блоки кода
Цитаты можно создать, начав строку с >символа « больше» ( ), как и старые почтовые клиенты цитировали предыдущие сообщения:
> This is a blockquote. Single paragraphs > can be continued like this on a second line. > > Multiple paragraphs can be quoted by using a > line with a single greater than symbol.
Я предпочитаю немного проще и использую только символ «больше» в начале каждого цитируемого абзаца. Это работает независимо от того, используете ли вы редактор, который жестко или мягко обертывает абзацы:
> You can also blockquote a paragraph by placing a single greater than symbol at the beginning of each paragraph. > Nested blockquotes are also possible > > Like this.
Блоки кода создаются путем отступа каждой строки как минимум на четыре пробела или одну табуляцию:
This is a normal paragraph: This is a code block.
Но другие разновидности Markdown предпочитают использовать обратные кавычки. Например, Ulysses использует две обратные кавычки в начале строки для блока кода:
``This is a code block.
Markdown со вкусом GitHub использует три обратных кавычки для начала и завершения блока кода. Obsidian, Bear и некоторые другие редакторы Markdown следуют тому же соглашению:
``` This is a code block. ```
Чтобы встроить этот блок кода в блок кода, я заключил его в четверные обратные кавычки. В GitHub вы можете дополнительно включить язык, если хотите подсветку синтаксиса :
```ruby This is Ruby code with syntax highlighting. ```
Код можно отобразить внутри абзаца с помощью одинарных разделителей обратных кавычек:
This code `<bold>` will be displayed, not interpreted.
Ссылки и изображения
Ссылки и изображения используют комбинацию квадратных скобок []и скобок (). Для ссылок вы заключаете текст привязки в квадратные скобки, за которым сразу следует URL-адрес в круглых скобках:
This is a [link to a web page](https://url.com).
Если хотите, вы можете добавить заголовок к ссылке. При наведении курсора на ссылку она появится в виде всплывающей подсказки. Заключите заголовок в кавычки после URL-адреса и в круглые скобки:
This is a [link to a web page](https://url.com "This title will appear as a tooltip").
Другой метод разметки ссылок известен как ссылочная ссылка. Они выглядят как сноски в документе Markdown, но будут преобразованы в стандартные ссылки при экспорте в HTML. Цель здесь — сделать документ Markdown более читабельным.
Вместо прямой ссылки на URL-адрес вы используете метку в квадратных скобках. Затем в другом месте документа (обычно внизу) вы связываете эту метку с URL-адресом:
This is a [link to a web page][mylabel]. Then at the end of the document … [mylabel]: https://url.com "Optional title" or [mylabel]: <https://url.com> (Optional title)
Ярлыки не чувствительны к регистру и могут состоять из букв, цифр, пробелов и знаков препинания.
В изображениях используется аналогичный синтаксис, но они начинаются с восклицательного знака ( !):
Если хотите, вы можете добавить заголовок в кавычки внутри круглых скобок.
Вы также можете использовать справочные ссылки для изображений:
![Alt text][mylabel] [mylabel]: https://imageurl.com "This is a title"
Дополнения Markdown со вкусом GitHub
GitHub Flavored Markdown используется многими разработчиками и предоставляет дополнительный синтаксис, чтобы сделать его более функциональным. Вот несколько примеров.
Зачеркивание — это дополнительная опция форматирования текста, которая достигается с помощью двойной тильды ( ~~):
This is how you do ~~strikethrough~~.
Списки задач могут быть созданы с использованием — [ ]для неотмеченных элементов, а — [x]для отмеченных элементов:
- [ ] This item is unchecked - [x] This item is checked
Вы можете создать таблицу, используя вертикальные черты и дефисы для рисования линий. Три или более дефиса —создают заголовки, а трубы |создают столбцы:
| Heading 1 | Heading 2 | Heading 3 | | --------- | --------- | --------- | | some text | more here | and this | | some more | this too | and this |
Это выглядит лучше, когда столбцы выровнены, но в этом нет необходимости. В любом случае таблица будет создана правильно при экспорте в HTML:
| Heading 1 | Heading 2 | Heading 3 | | --------- | --------- | --------- | | some text | more here | and this | | some more | this too | and this |
Создание такой таблицы становится довольно утомительным, особенно если вам нужно отредактировать содержимое ячеек. К счастью, есть онлайн- генераторы таблиц, которые упрощают процесс.
Заключение
Markdown не для всех, но есть что понравиться. Лично я ценю то, что он открыт, прост в освоении и не заставляет вас использовать определенную программу.
Если вы дочитали эту статью до конца, возможно, этот инструмент вам тоже подойдет. Погрузитесь и начните использовать это. Изучите синтаксис по частям по мере необходимости, и, прежде чем вы его узнаете, он станет вашей второй натурой.
