Рассылка по интернет-маркетингу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

Исчерпывающая шпаргалка по синтаксису разметки Markdown: на заметку авторам, веб-разработчикам, контент-менеджерам

14 января 2020 Иван Иваничев
Время чтения: 7 минут Нет времени читать? Нет времени? 1 комментарий
Отправим материал вам на:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
Исчерпывающая шпаргалка по синтаксису разметки Markdown: на заметку авторам, веб-разработчикам, контент-менеджерам Редакция «Текстерры»
Редакция «Текстерры»

Маркдаун – облегченный язык разметки, созданный для написания, чтения, оформления веб-текстов.

Частично или полностью язык поддерживается многими проектами:

  • CMS и блог-платформами (Drupal, Ghost, Medium);
  • крупнейшими хранилищами контента (GitHub, Microsoft Docs);
  • мессенджерами (Telegram, Slack);
  • текстовыми редакторами (Atom, iA Writer, Typora);
  • сервисами для проджект-менеджмента (Todoist, Trello).

Синтаксис Markdown намного проще, чем HTML, но документы .md без проблем конвертируются в .html.

Заголовки и горизонтальные линии

Заголовки H1–H6 выделяются в Markdown с помощью знаков решетки (диез/шарп). Можно просто поставить нужное количество решеток в начале строки, чтобы указать уровень. Или заключить строку с двух сторон по аналогии с HTML-тегами, кому как удобно.

# Это H1


## Это H2 ##


### Это H3


#### Это H4 ####


##### Это H5 #####


###### Это H6

Другой вариант: написать текст первого заголовка, затем нажать Enter и на следующей строке указать любое количество знаков «равно». Аналогичным образом можно выделить H2, только использовать уже нужно дефисы. Заголовки других уровней таким методом оформить нельзя.

Это H1 или Заголовок I


===


Это H2 или Заголовок II


---

Так в синтаксисе Markdown обозначаются заголовки H1–H6

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

А вот знак равенства работает только с заголовками H1, горизонтальные линии он не рисует

Выделения текста

Форматирование курсивом и жирным точно есть во всех инструментах, где другие функции Markdown могут быть ограничены. Синтаксис выделения текста и расставления акцентов:

__Жирный__


**Тоже жирный**


*Курсив*


_Тоже курсив_


~~Зачеркнутый~~


Можно легко комбинировать эти способы выделения.

Выделения в маркдаун-разметке и их комбинации

Списки и отступы

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

- Пункт 1

- Пункт 2

- Пункт 3


или


+ Пункт 1

+ Пункт 2

+ Пункт 3


или


* Пункт 1

* Пункт 2

* Пункт 3

Варианты разметки маркированных списков в Markdown

Если необходимо создать нумерованный список, используйте в начале строки цифру с точкой. Удобно, что нумерация автоматическая: можно вставить любые цифры, и ошибки не будет.

1. Пункт 1

2. Пункт 2

3. Пункт 3


или


1. Пункт 1

1. Пункт 2

1. Пункт 3


или даже


9. Пункт 1

5. Пункт 2

1. Пункт 3

Правильная нумерация при любых цифрах в списке

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

- Пункт 1

        - Подпункт A

                - Подподпункт a


- Пункт 2

        + Подпункт A

                * Подподпункт a


---


1. Пункт 1

        + Подпункт A

                - Подподпункт a


2. Пункт 2

        1. Подпункт 2.1.

                1. Подподпункт 2.1.1


3. Пункт 3

Так работают вложенные списки. Как видите, нумерованные можно комбинировать с маркированными

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

* __Тезис №1__


    Раскрываем тезис.


* __Тезис №2__


    Раскрываем тезис.


---


* __Тезис №1__ Раскрываем тезис.

* __Тезис №2__ Раскрываем тезис.

Так можно оформить в Markdown информативные списки

Ссылки и картинки

Чтобы поставить гиперссылку без анкора, нужно взять URL в угловые скобки. С e-mail – аналогично.

Если вставлять с анкором, то тогда текст ссылки заключается в квадратные скобки, а адрес страницы – в круглые. Рядом с URL можно прописать тайтл, его объявляют в кавычках (он тоже остается внутри круглых скобок).

Это [ссылка]( "Агентство TexTerra") с тайтлом.


[Эта ссылка](http://example.net/) без заголовка.


<https://texterra.ru/> – а это безанкорная ссылка.

Примеры оформления ссылок в маркдаун-документе

Чтобы длинные URL не затрудняли чтение и написание документа Markdown, есть вариант присвоения каждой ссылке определенных ID (меток/переменных). Можно сделать это несколькими способами:

Ссылаемся на [блог TexTerra][tt-blog-link] через ID. Объявляем метку позже по аналогии со сносками. Цифрами обозначить тоже можно: [Google][1], [Yandex][2]


Еще можно так встраивать ссылки: [TexTerra] []


[tt-blog-link]: /blog "Блог про интернет-маркетинг"

[1]: google.com 'Сайт Google'

[2]: yandex.ru (Сайт «Яндекса»)

[TexTerra]:

Если URL длинные, да еще и с UTM-метками, их лучше спрятать в самый конец документа. Обратите внимание: тайтлы можно обозначить и двойными, и одинарными кавычками, а также в скобках

Синтаксис Markdown для работы с картинками очень похожий. Разница в восклицательном знаке перед первыми квадратными скобками. Ссылке на картинку тоже можно присвоить определенный ID. Примеры:

![Лого TexTerra](/upload/firmenniy-stil/footer-logo-svg.svg)


---


![Лого TexTerra](/upload/firmenniy-stil/footer-logo-svg.svg "Наш логотип")


---


![Картинка][logo]


[logo]: /upload/firmenniy-stil/footer-logo-svg.svg "Наш логотип"

Вот так можно вставлять картинки в текст

Цитаты и вставки кода

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

> Привет! Это цитата

> Это тоже цитата


> Это еще одна цитата

Это ее продолжение (показываем отступом)


> Это тоже

Будет

>

> Одна целая цитата

Цитаты вкладываются как в списки, так и в другие цитаты. Цитаты также могут включать в себя заголовки, списки и код.

 Вот что можно вытворять с помощью маркдаун-разметки

Кстати, о коде. Вставлять его можно как внутрь строк, так и отдельными блоками. Для соответствующей разметки используют грависы или обратные тики. Инлайн-код выделяют одиночными символами, а блоки – тройными. При оформлении целого блока можно указать язык программирования, чтобы подсветить соответствующий синтаксис. Примеры:

Просто инлайн-код: `print("Hello, World!")`


Код на Python:

```python

x = int(input())

if x > 0:

    print(x)

else:

    print(-x)

```

Код на JavaScript:

```javascript

let greeting1 = 'Father!';

console.log(greeting1);

let greeting2 = 'Mother!';

console.log(greeting2);

```

Как можно работать с кодом в Markdown

Таблицы и чек-боксы

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

Пример – таблица меток для блоков кода, об этом было в предыдущем разделе:

| Язык | Метка |

| -----|------|

| Java Script | javascript |

| C++ |cpp|

| HTML|html|

|Markdown|md|

|JSON|json|

|Python|python|

|SQL|sql|

Синтаксис Markdown для работы с таблицами (как видите, не обязательно завершать строку вертикальной чертой, работает и без нее)

Для любителей чек-листов есть такая возможность. Чек-бокс получится, если в начале строки вставить пробел, заключенный с двух сторон в квадратные скобки. Можно сразу задать выполненную задачу с помощью [X]. С оформлением ссылок по-другому – в квадратных скобках или текст, или ничего.

Примеры чек-листов в .md документе

Важно: экранирование

Мы разобрали с десяток различных символов, которые используются в разметке Markdown. Но что если эти символы нужны нам в самом тексте? Чтобы спецсимволы не исчезали и не влияли на оформление, нужно использовать экранирование. Как и во многих других языках программирования, этим целям служит обратная косая черта (бэкслеш).

Бэкслеш отменяет действие специальных символов

Исключение – когда надо вставить внутри кода грависы (обратные тики). Интерпретатор не посчитает их за обозначение инлайн-кода, если только весь участок кода заключен с двух сторон в двойные грависы. Ничего не понятно? На примере все наглядно:

С грависами работают только грависы, бэкслеш тут не поможет

В отличие от HTML, в Markdown не нужно специально экранировать амперсанд (&) или угловую скобку (<).

Инструменты для работы с маркдаун-разметкой

Markdown Here – простейший сервис для проверки разметки и практики работы с языком.

Markdown Editor – тоже довольно простой редактор, но с возможностью открывать и сохранять в MD/HTML, есть ночной режим.

Dillinger – более функциональный, но тоже бесплатный онлайн-инструмент. Есть автосохранение, подсчет слов и символов. Работает импорт и сохранение в Medium, GitHub, Dropbox, Google Drive. Экспортирует не только в HTML и MD, но и в PDF.

Writebox – веб-редактор для любителей минимализма. Есть синхронизация с Dropbox и Google Drive, настройка горячих клавиш, скачивание документов в текстовом и HTML-формате.

Codepen – платформа для фронтенд-разработки, тоже хорошо подойдет для работы с Markdown, HTML и другими языками.

Optima – платное десктопное ПО, работает и на MacOS, и на Windows. Поддерживает Markdown, сохраняет в HTML и даже проверяет текст в «Главреде». 10 дней бесплатно.

Typora – бесплатный, простой и мощный редактор Markdown для Windows, MacOS (beta-версия) и Linux. Ориентирован на создателей текстового контента. Имеет не отвлекающий режим, который позволяет лучше сосредоточится на творческой работе.

Atom – бесплатный редактор исходного кода для Windows, Linux, MacOS. Распознает множество языков программирования, в том числе маркдаун-разметку.

Jekyll – генератор статичных сайтов, работает в том числе с MD-файлами.

Hexo – тоже генератор, но ориентированный на создание блогов. Поддерживает расширенный синтаксис Markdown.

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

© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.
Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl + enter.
Оцените материал:
Обгоните конкурентов в онлайне. Мобильное приложение под ключ: от разработки ТЗ до продвижения. Посмотреть
Оставь заявку на бесплатное онлайн-обучение
до 1 апреля
00:00:00
Подробнее
До старта онлайн-интенсива
«Продвижение в Instagram» осталось:
00:00:00
Записаться
При заказе SMM до 31 октября дарим
3 варианта оформления сообщества!
Подробнее
Чертовски низкие цены на все онлайн-курсы от
TexTerra с 29 по 31 октября
Подробнее
Готовая база знаний
для начинающего
интернет-маркетолога
Такую информацию продают за деньги,
а мы отдаем БЕСПЛАТНО!

Я согласен на обработку моих персональных данных

Спасибо, база направлена на вашу почту!
МИЛЛИОН ГОДНОТЫ
Дарим подборку огненных материалов по интернет-маркетингу: кейсы, интервью, советы по SMM, полезные видео и не только.
получить
Скидка 20%
на все онлайн-курсы от TexTerra
к курсам
Texterra – продвижение в интернете x
Заказать звонок:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
Texterra – продвижение в интернете x
Заказать услугу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных