Markdown: что это и кому нужно

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

Markdown: наша главная страница в HTML выглядит как-то так Читать чистый HTML тех­ни­че­ски мож­но, но это слож­но

Что­бы понять, поче­му так, нуж­но вспом­нить исто­ки HTML. Когда его толь­ко созда­ва­ли, у него была зада­ча опи­сы­вать гипер­тек­сто­вые доку­мен­ты: то есть доку­мен­ты, в кото­рых будет текст и гиперс­сыл­ки. При этом пере­да­вать­ся он дол­жен был по очень мед­лен­ным кана­лам. Пер­вые HTML-страницы были мини­ма­ли­стич­ны­ми: толь­ко текст, заго­лов­ки, таб­ли­цы и ред­кие ссыл­ки. 

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

Весь веб, кото­рый вы сей­час види­те, сде­лан на «косты­лях» от про­сто­го язы­ка для раз­мет­ки тек­ста. 

Что такое Markdown

Markdown — это язык тек­сто­вой раз­мет­ки доку­мен­тов. Его при­ду­ма­ли в 2004 году бло­гер Джон Гру­бер и интернет-активист Аарон Шварц, что­бы быст­ро фор­ма­ти­ро­вать ста­тьи. Тре­бо­ва­ния к язы­ку у них были такие:

  1. Чем про­ще — тем луч­ше.
  2. Доку­мен­ты с этой раз­мет­кой мож­но пере­ве­сти в кра­си­во отфор­ма­ти­ро­ван­ный вид, как на веб-странице.
  3. Исход­ный текст мате­ри­а­ла дол­жен оста­вать­ся чита­е­мым даже без пре­об­ра­зо­ва­ния в веб-страницу.

В резуль­та­те у них полу­чил­ся про­стой язык, кото­рый актив­но исполь­зу­ет­ся до сих пор. 

Смысл марк­дау­на в том, что вы дела­е­те раз­мет­ку сво­е­го доку­мен­та мини­маль­ны­ми уси­ли­я­ми, а уже какой-то дру­гой пла­гин или про­грам­ма пре­вра­ща­ет вашу раз­мет­ку в ито­го­вый доку­мент — напри­мер в HTML. Но мож­но и не в HTML, а в PDF или что-нибудь ещё. Марк­даун — это как бы язык для дру­гих про­грамм, что­бы они фор­ми­ро­ва­ли доку­мен­ты на осно­ве ваше­го тек­ста. 

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

Наша статья про дизайн и код в Markdown-редакторе Typora. Выглядит неплохо Наша ста­тья про дизайн и код в Markdown-редакторе Typora. Выгля­дит непло­хо.
Исходный код статьи А вот её исход­ный код — всё мож­но про­чи­тать даже без кра­си­во­го фор­ма­ти­ро­ва­ния

Синтаксис

Для оформ­ле­ния заго­лов­ков исполь­зу­ют решёт­ку. Одна решёт­ка — заго­ло­вок пер­во­го уров­ня, две — заго­ло­вок вто­ро­го уров­ня, и так до пято­го. Посмот­ри­те на скрин­шо­тах выше, как это рабо­та­ет.

## Это будет заго­лов­ком вто­ро­го уров­ня (как Син­так­сис в этом раз­де­ле)

Что­бы выде­лить сло­во или абзац, исполь­зу­ют одну звёз­доч­ку в нача­ле и в кон­це:

*вот так* → вот так

Если нуж­но выде­лить силь­нее, берут две звёз­доч­ки:

**выде­ля­ем текст силь­нее** → выде­ля­ем текст силь­нее

Зачёр­ки­ва­ют дву­мя тиль­да­ми:

~~зачерк­ну­ли и всё~~ → зачерк­ну­ли и всё

Для оформ­ле­ния кода исполь­зу­ют обрат­ный апо­строф: `.

`При­мер кода` → Пример кода

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

<!doctype html>
  <html>
    <head>
    </head>
    <body>
    </body>
  </html>

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

Нуме­ро­ван­ные спис­ки дела­ют­ся из циф­ры с точ­кой, при­чём циф­ры могут быть любы­ми и идти не по поряд­ку. Смот­ри­те:

1. Один
3. Три
10. Десять

пре­вра­ща­ет­ся в

  1. Один
  2. Три
  3. Десять

Ссыл­ка состо­ит из тек­ста ссыл­ки и адре­са. Текст пишет­ся в квад­рат­ных скоб­ках, а адрес — в круг­лых. То, что в кавыч­ках, мож­но не писать и оста­вить в скоб­ках толь­ко адрес:

[Текст ссылки](https://thecode.media/ "Необя­за­тель­ный заго­ло­вок ссыл­ки")

Кар­тин­ки встав­ля­ют­ся точ­но так же, толь­ко добав­ля­ет­ся вос­кли­ца­тель­ный знак в самом нача­ле: 

![Alt-текст изображения](https://thecode.media/image.jpg "Необя­за­тель­ный заго­ло­вок изоб­ра­же­ния")

Как работает эта магия

Если мы про­сто напи­шем текст и раз­ме­тим его с помо­щью Markdown, то он так и оста­нет­ся тек­стом с раз­ны­ми спец­сим­во­ла­ми. Что­бы резуль­тат выгля­дел как на скрин­шо­те выше, исполь­зу­ют спе­ци­аль­ные редак­то­ры, пла­ги­ны или про­грам­мы, кото­рые под­дер­жи­ва­ют этот язык раз­мет­ки.

Рабо­та­ет это так:

  1. Про­грам­ма берёт текст и смот­рит, есть ли в нём эта раз­мет­ка.
  2. Если есть — при­ме­ня­ет нуж­ное пра­ви­ло оформ­ле­ния к нуж­но­му фраг­мен­ту тек­ста и выво­дит его кра­си­во. Если нуж­но — под­ста­вит кар­тин­ку, сде­ла­ет ссыл­ку и сама офор­мит спи­сок.
  3. Если раз­мет­ки нет — выво­дит содер­жи­мое про­сто как текст.

Такое рабо­та­ет не в каж­дом редак­то­ре — если в Word выде­лить текст звёз­доч­ка­ми, то это так и оста­нет­ся тек­стом со звёз­доч­ка­ми, без кур­си­ва или жир­но­го оформ­ле­ния. Но почти все редак­то­ры пони­ма­ют, когда в них встав­ля­ют текст, раз­ме­чен­ный марк­дау­ном. Они тогда сра­зу выде­ля­ют нуж­ные фраг­мен­ты, дела­ют заго­лов­ки и встав­ля­ют кар­тин­ки.

Зачем использовать Markdown

При­чин несколь­ко.

  1. Если вам нуж­но про­стое оформ­ле­ние тек­ста без изыс­ков или вам нуж­но быст­ро под­го­то­вить мате­ри­ал к пуб­ли­ка­ции без слож­ной вёрст­ки.
  2. Если вы дела­е­те блог или дру­гой ста­тич­ный сайт, на кото­ром хоти­те раз­ме­щать свои тек­сты с лако­нич­ным дизай­ном.
  3. Вы хоти­те писать кра­си­вые сооб­ще­ния в WhatsApp или Telegram.
  4. Вы про­грам­мист и пише­те доку­мен­та­цию к сво­е­му про­ек­ту на GitHub

Но во всех этих слу­ча­ях вам нуж­но одно — сде­лать мини­маль­ную вёрст­ку тек­ста так, что­бы он выгля­дел опрят­но и что­бы его мож­но было про­чи­тать и без спе­ци­аль­ных про­грамм.

Что дальше

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

Текст и скрин­шо­ты:
Миша Поля­нин

Редак­тор:
Мак­сим Илья­хов

Кор­рек­тор:
Ира Михе­е­ва

Иллю­стра­тор:
Даня Бер­ков­ский

Вёрст­ка:
Маша Дро­но­ва

Достав­ка:
Олег Веш­кур­цев