Часто пишете, редактируете или оформляете контент? Попробуйте Markdown!

Это невероятно мощный инструмент для копирайтеров, веб-разработчиков и контент-менеджеров. С его помощью вы сможете быстро и красиво оформлять текст. Синтаксис встроен в Ghost, Trello, Slack, Хабр и еще множество сервисов. Мы покажем несколько полезных трюков, которые сделают вас суперпользователем Markdown.

🎧 Слушайте аудио-версию этой статьи!


Что такое Markdown

Markdown - облегченный язык разметки, созданный для удобства написания и чтения текстов.  Он позволяет набирать текст, не используя HTML. Сам преобразует набранное, и делает это без мусора в коде.

Вот простой пример использования Markdown:

**Экзотическая кошка** - порода [кошек](https://ru.wikipedia.org/wiki/Кошка) с характерной *приплюснутой* мордочкой.

превращается в
Экзотическая кошка - порода кошек с характерной приплюснутой мордочкой.

Попробуйте сами! Кликайте на баннер - редактор откроется в новом окне.

Почему Markdown так хорош

Вы скажете, что Markdown бесполезен - ведь можно нажимать на кнопки форматирования в редакторе и не изучать новый язык разметки.

Да, но задумайтесь: сколько времени вы тратите на нажатие этих самых кнопок? Может, секунду или даже меньше. А если вас настигло вдохновение и мысли идут потоком? Даже за секунду легко потерять нить своего повествования.

Просто попробуйте использовать Markdown, и вы удивитесь, насколько естественен его синтаксис. Этим языком пользоваться намного проще, чем чистым HTML.

Когда вы привыкнете к Markdown, вам будет очень сложно вернуться к прошлой жизни бесконечных лишних кликов.

Мы создали для вас шпаргалку, в которой описали основные функции Маркдаун.

Базовое форматирование

Заголовки

Чтобы создать заголовок, используйте #. Одна решетка - h1, шесть решёток - h6. Вот пример:

## Заголовок 2
### Заголовок 3
#### Заголовок 4

Markdown сделает всё сам и отобразит вот так:

Заголовок 2

Заголовок 3

Заголовок 4


Текст

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

*курсив*
**жирный**
***жирный курсив***
[ссылка](https://ru.wikipedia.org/)

курсив
жирный
жирный курсив
ссылка

Картинки

Чтобы вставить картинку, используется такой же синтаксис, как у ссылки, только со знаком восклицания:

![альт](ссылка на картинку "описание при наведении")

кот
Как и в HTML, альтернативный текст и описание при наведении - необязательные атрибуты, и вы можете обойтись без них.

Списки

Чтобы сделать маркированный список, можно использовать *, + и -. Все эти символы Markdown превращает в элементы списка, самостоятельно добавляя теги <ul> и <li>.

+ пример списка 
    * чтобы сделать подпункт, нажмите tab
        - подпункт подпункта
* второй пункт
  • пример списка
    • чтобы сделать подпункт, нажмите tab
      • подпункт подпункта
  • второй пункт

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

1. Первый пункт
2. Второй пункт
  1. Первый пункт
  2. Второй

Цитаты

Цитаты оформляются с помощью символа >.

> Это цитата 

Это цитата
Если продолжить писать дальше, это тоже будет цитата.

Надо дважды поставить "Enter".

Исходный код

Код, как в примерах выше, выделяется обратными апострофами ` - на клавиатуре они находятся на букве Ё. На макбуках эта клавиша возле левого shift или слева от буквы Z.
Три апострофа ``` выделяют блоки кода. Можно указать язык, и Markdown подсветит функции и теги.

```css
.h2 {
    margin: .5em 0 .2em;
    font-size: 3.6rem;
    font-weight: 700;
}    
```

Что ещё

==Подсвеченный текст==

Подсвеченный текст

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

Зачеркнутый текст
Чтобы Markdown не воспринимал символ, как форматирование, используйте обратный слэш \.
В предыдущем предложении используется два слэша \\, потому что первый съедается. Но если, например, указать путь к папке Windows, один слэш отображается корректно - C:\Users\Lenovo\Documents\php.

Продвинутые техники Markdown

Освоив простое форматирование с помощью Маркдауна, вам непременно захочется узнать, как его еще можно использовать. Что ж, продолжим.

Горизонтальная черта

С помощью --- можно заменить <hr>. Не забудьте отбить энтером, иначе предыдущий текст превратится в заголовок.


Кстати, это еще один способ для выделения заголовков. С помощью === выделяются заголовки первого уровня, а с --- - второго.

Заголовок 1
=====
Заголовок 2
-----

Ссылки

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

**Пример [один][1], пример [два][2].**

[1]: https://google.ru "Гугл" 
[2]: https://yandex.ru "Яндекс"

Пример один, пример два.
Такие сноски можно использовать и для картинок.
Если прописать тайтл в обычной ссылке, это тоже сработает:

[Яндекс](https://yandex.ru "Перейти на Яндекс")

Наведите мышку: Яндекс
Еще можно поставить ссылку[1] на объясняющую сноску, как в книге.

ссылка[^1]
[^1]: Заметка в конце блока или статьи. В данном случае - в конце блока.

  1. Заметка в конце блока или статьи. В данном случае - в конце блока. ↩︎

Как открывать ссылки в новом окне в Маркдаун

Все ссылки в стандартном редакторе Markdown открываются в этом же окне. Только HTML-разметка позволяет изменить это. Никакие другие способы не будут работать стабильно и всегда, и в этом есть некоторое неудобство. Но имея заготовленный шаблон (смотрите ниже), вы легко справитесь с этим.

Пример <a href="https://google.ru" target="_blank" title="Гугл">один, пример <a href="https://yandex.ru" target="_blank" title="Яндекс">два.

Таблицы на Markdown

Тут у Markdown перед HTML огромное преимущество. В нем делать таблицы гораздо проще:

Заголовок таблицы | Другой заголовок
-------- | --------
Ячейка 1 | Ячейка 2
Ячейка 3 | Ячейка 4

Выглядит это так:

Заголовок таблицы Другой заголовок
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Символом : можно выровнять столбцы:

| Влево  | По центру  | Вправо |
|:-------- |:---------:| --------:|
| первая ячейка | текст | |
| 2 | ~~зачеркнутая ячейка~~ | **жирная ячейка** |
| *курсив* | незачеркнутая ячейка | просто ячейка |

В таблице работает любое форматирование:

Влево По центру Вправо
первая ячейка текст
2 зачеркнутая ячейка жирная ячейка
курсив незачеркнутая ячейка просто ячейка

Воспринимает ли Markdown HTML

Если вы вставите в статью обычный HTML, редактор поймет, чего вы от него хотели. Например - Курсив <i>Курсив</i>. Это удобно, если нужно прописать классы или атрибуты.

Горячие клавиши для MacOC

Markdown понимает сочетания горячих клавиш и сам вставляет необходимые символы. Например:

  • Ctrl/⌘+B - жирный текст;
  • Ctrl/⌘+I - Курсив;
  • Ctrl/⌘+K - Ссылка;
  • Ctrl/⌘+H и многократное нажатие для выбора нужного заголовка.

Горячие клавиши для Windows

  • Ctrl+B - жирный текст;
  • Ctrl+I - Курсив;
  • Ctrl+K - Ссылка;
  • Ctrl+H и многократное нажатие для выбора нужного заголовка.

Редакторы Markdown

Кроме использования Маркдауна в поддерживающих его синтаксис сервисах, вы можете попробовать приложения-редакторы.

Markdown для MacOS

Для Apple существует большое количество удобных программ:

Markdown для Windows

Для "микромягких" окошек программ, к сожалению, поменьше:

Что делать дальше

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

  1. Начните писать ваш первый документ на Маркдауне с базовых вещей. Вы научитесь быстрее, чем думаете!
  2. Не забывайте использовать горячие клавиши - это очень экономит время.
  3. Используйте HTML всегда, когда вам нужно отформатировать сложные вещи. Вместе эти два инструмента создают мощный дуэт.

🎧 Слушайте аудио-версию этой статьи!

Делись статьей с друзьями!