Что такое Markdown и с чем его едят

Что такое Markdown

Для того, чтобы понять, почему я поднимаю эту тему, постараемся ответить на вопрос: «Каким образом мы вводим текстовую информацию в интернете?». То есть комментарии в блогах, посты на форумах, фундаментальные статьи в научных онлайн-изданиях — всё, где требуется текстовый ввод. Уверен, что многие над этим не особо и задумывались. Мол, ну как администратор сайта настроил, так и вводим. А между тем, здесь кроется одна из наиглавнейших проблем современного веба, ведь как ни крути, а подавляющее большинство времени мы потребляем именно текст, а значит — кто-то его должен создавать. Вот об инструментах для создания текста мы сегодня и поговорим.

Существует несколько основных способов или инструментов ввода в текстовые поля

  • Plain text. Обычное текстовое поле для ввода, без возможности применения какого-либо форматирования. Самый безопасный способ, но в то же время наименее гибкий. Если для комментариев он подходит идеально, то авторы, которым надо вставлять гиперссылки и делать форматирование, ему явно не обрадуются. Plain text так же скучен и неинтересен, как серая бетонная стена.
  • HTML код. Проверенный годами способ ввода текста в поля, где он разрешён. Для его использования вам понадобится не много ни мало, а знание этого самого HTML, причём на довольно серьёзном уровне, если ожидается табличка или многоуровневый список. Плюс, вы должны заботиться о безопасности — ограничивать наиболее опасные теги, JavaScript и те теги, которые могут значительно изменить вид вашего сайта, если
    будут где-нибудь неосторожно использованы (например, незакрытый <div>).
  • Копирование из Microsoft Word. Без комментариев. Если вы используете такую систему на вашем сайте, то у вас должны быть действительно веские причины.
  • Визуальный редактор (он же WYSIWYG). Самый распространённый способ, используемый практически всеми и повсюду. Однако не спешим радоваться, ведь у него не меньше недостатков, чем достоинств. Вот только некоторые из них:
  • — Вы НЕ контролируете исходный HTML. Это может привести к загрязнению кода, так как редактор делает его на своё усмотрение, хочет — пихает <div> или <br><br> там где должен быть <p>, или зачем-то заполняет ваш код тегами <pre>. Это влияет на поисковики, эстетику и с таким кодом очень тяжело работать, если вы отключили редактор или просто поменяли его на другой.

    — WYSYWYG редакторы очень часто тянут за собой тяжёлые JS библиотеки, а значит страдает быстродействие странички. Да и не у всех включены скрипты.

  • Использование альтернативного языка форматирования текста, одним из которых и является Markdown. В роли его «убийцы» выступает Textile, но здесь, как говорится, на вкус и цвет.

Markdown это язык форматирования (или язык описания форматирования), по приниципу работы похожий на HTML, который используется для определения финального вида текста.

Работает это следующим образом — в текстовое поле мы вводим наш текст, форматируя его специальными кодами (тегами) Markdown, которые при сохранении формы конвертируются в абсолютно валидный и красивый HTML.

Преимущества использования Markdown

  • Основан исключительно на текстовом вводе. Вам не нужно использовать сторонние редакторы и инструменты — только обычное текстовое поле. Таким образом вы будете уверены, что ничего не поломается.
  • Минимальное количество кода. Всё, что нужно запомнить вашим пользователям — это пара попсовых и очень очевидных тегов, и несколько правил. Один раз и навсегда.
  • Исходный код максимально читабелен. Вы редактируете страницу, видите код Markdown и сразу можете сказать, что вот это заголовок, а это жирный текст, а это табличка. Всё очень наглядно.
  • Это open source. BSD лицензия.

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

Недостатки Markdown

  • Строгие конвенции, которые надо соблюдать. Это фактически единственная жертва, которую надо принести, чтобы всё работало. Многие считают, что это делает Markdown слегка хардкорным и гиковским, но я так не считаю. Скорее, это добавляет некоторую степень «крутизны» тем, кто им владеет.
  • Определенные символы нужно эскапировать. Если вы хотите ввести один из технических символов, используемых в Markdown для размётки, то перед ним надо ставить обратный слэш.

Время живых примеров

Перейдём к делу. Более подробно синтакс распишу в отдельном посте, а пока что несколько простых примеров.

HTML:

<p>Лучшими ресурсами для изучения <em>Drupal</em> являются <a href="http://drupal.org">D.O.</a>, <a href="http://drupalize.me">Drupalize Me</a> и <a href="http://drupal.stackexchange.com">Drupal answers на StackExchange</a>.</p>

Markdown:

Лучшими ресурсами для изучения _Drupal_ являются [D.O.][1], [Drupalize Me][2] и [Drupal answers на StackExchange][3].
[1]: http://drupal.org  
[2]: http://drupalize.me
[3]: http://drupal.stackexchange.com

И ещё один пример.

HTML:

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>

Markdown:

* Первый пункт
* Второй пункт
* Третий пункт

На сегодняшний день поддержка Markdown есть почти во всех популярных CMS (через плагины), его использует GitHub и Tumblr, поддержка синтаксиса появляется в профессиональных программах для написания текста, используемых редакторами и писателями во всём мире.

Понравилось? Тогда вам будут полезны несколько ссылок:

Синтаксис. Исчерпывающая база знаний на английском языке для конечных пользователей.

Песочница, где можно потренироваться без ущерба здоровью

Для вебмастеров инструкции по установке. Если вы используете CMS, то для неё скорее всего
есть готовый плагин.

На сегодня всё. В следующий раз постараюсь выложить инструкцию-шпаргалку с самыми популярными кейсами (стили, ссылки, подводные камни)