Markdown шагает по Интернету

Топик-копилка. Но чтобы не было совсем непонятно, сперва небольшой экскурс. Благо, может пригодиться в свете организации топиков Морского и т.п.

Чтобы страницы в Интернете выводились красиво, со шрифтами и картинками, это дело должно быть как-то описано. Весь Интернет построен на языке разметки HTML. Внутри это простой текст. Пишем, например, Привет, Вася! в файл  hello.html и, открыв файл в браузере так и видим: «Привет, Вася!». Для того, чтобы как-то особо отметить текст, используется понятие «тегов». Специальной последовательности символов в угловых скобках. Например, пишем <b> (от англ. bold = жирный) и текст дальше выделен жирным. Пока не запишем такой же тег, но со слешом («/») перед буквой: Привет, <b>Вася</b>!. Выведет тот же текст, но «Вася» будет написано жирным (а восклицательный знак — уже нет, т.к. выделение жирным прекращается перед ним):

Привет, Вася!

 

Вот на такой разметке построен весь современный Интернет. Тегов многие десятки, иногда появляются новые, иногда прекращается поддержка старых. Оформление шрифта, цвета, картинки, вставки видео и звука — это всё делается на таких тегах.

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

Писать прямо в HTML, во-первых, небезопасно. Когда страницу сайта пишет его автор, то он не будет вредить работе со своим сайтом, а работать с другими ему не дадут ограничения самого браузера. А вот когда сообщение напишет в HTML произвольный пользователь, то он, например, может вписать скрипт (небольшую программку), которая похитит пароль от форума. Или станет атаковать другие компьютеры. Или ещё что-то эдакое вирусное. Такие скрипты можно отфильтровать, но дело хлопотное. Хотя есть немало форумов или комментариев, где в оставляемом пользователем тексте есть ограниченный разрешённый HTML (а остальное — блокируется).

Во-вторых, писать в HTML утомительно. Например, сколь многословное описание вставки картинки: <img src="http://files.balancer.ru/forums/attaches/2014/02/16-3369695-123.jpg">. Где  http://files.balancer.ru/forums/attaches/2014/02/16-3369695-123.jpg — это адрес картинки, которую надо показать на странице.

Поэтому на заре общения на форумах был придуман очень похожий на HTML, но упрощённый язык разметки BBCode. Он очень похож на HTML, только вместо угловых скобок, ввод которых требует нажатия кнопки shift, используются квадратные, которые вводятся простым нажатием соответствующей кнопки. Также в нём упрощена запись картинок/ссылок. И в нём отсутствуют опасные теги, типа ввода скриптов. Все форумчане, если не прекрасно знают BBCode, то, как минимум, наслышаны про него Это та же разметка сообщений, которая используется и у нас. — правда же, похоже на HTML? А картинки вписываются просто в тег  img: .

Преимущества очевидны — вводить текст проще. Опасное поведение не устроить. Поэтому BBCode на многие годы стал очень популярным и является языком разметки по умолчанию на большинстве форумов.

Но у BBCode есть и недостатки. Это всё ещё излишняя многословность. Отсутствие стандартных реализаций некоторых востребованных вещей (таблицы, сноски, FIDO/mail-подобное цитирование с угловыми скобками). И излишняя привязка к визуальному оформлению. Например, сохранение перевода строк. Чаще всего оно мешает нормальной переносимости между разными устройствами с разной шириной экрана. Кто-то сидит за 32" монитором со страницей во весь экран, кто-то смотри через узкий экран коммуникатора. Если сохранять переводы строк, то оформленный на одном устройстве текст ужасно смотрится на другом...

Вариантов замены было предложено много. Десятки. Например, свой язык разметки использует Wikipedia. Но все они были или неудобными, или малопопулярными, так и не взявшими старт...

12 лет назад, в 2004 году, среди прочих был предложен формат Markdown. Игра слов. Разметка — это «mark-up». «Отметка вверх». А товарищ Джон Грубер, изобретатель языка, придумал противоположность сложным HTML/BBCode, упрощённую текстовую разметку. Более примитивную. Ну и обыграл это в названии «mark-down». «Отметка вниз»:



Суть этого языка разметки была в использовании для разметки пунктуационных знаков, не затрудняющих чтение простого текста. Если читать насыщенный BBCode или, тем более HTML довольно сложно из-за наличия большого количества лишних символов разметки, в том числе букв тегов, то в Markdown такой разметки минимум. И он легко читается на уровне не преобразованного текста. Также приходится меньше вводить кода с клавиатуры. Отчасти разметка была взята из типографских правил. Например, в типографике исторически выделенный («жирный») текст в допечатной подготовке отмечают звёздочками, курсив («наклонный») — подчёркиванием. Тут было выбрано близко. Одиночные звёздочка или подчёркивание — курсив, двойные — выделенный текст: . Появились таблицы, которые стали оформляться чисто визуально:

Заводы	1942	1943	1944	1945 (I/II полугодие)
N153 Н-сибирск	59	1761	5858	3559 (2867/692)
N166 Омск		732	1600	1084 (926/158)
N82 Москва			373	444 (403/41)
Всего	59	2493	7831	5087 (4196/891)

Ссылки стали оформляться в виде . Картинки — также, только текст ссылки не обязателен, а перед ней ставится восклицательный знак: .

Язык очень бедный. Кроме упомянутого ещё есть сноски, списки, заголовки... Поэтому, думаю, мало кто мог 12 лет назад предсказать такой взлёт этого языка разметки. Видимо, сказалась простота.



Я стал присматриваться к этому языку с 2009 года. Пару лет назад начал активно его использовать в своих проектах. А вот теперь, чувствую, дозрел до перевода на него и наш форум Ибо Markdown был мной выбран для универсального языка разметки в системе Infonesy. Но, понятно, для тех, кто привык, останется возможность включать для себя и разметку BBCode. Кстати, пресловутые RSS-трансляции уже итак идут в разметке Markdown Думаю, уже некоторые обращали внимание на непонятный формат при ответе цитированием.

Но это дело, хотя и близкого, но будущего. Пока же тема для коллекционирования материалов по Markdown.

Использующие Markdown крупные проекты

GitHub. Номер 1 в области хранения программных исходников использует Markdown в разметке комментариев и отлично понимает markdown-файлы, хранящиеся на нём. Вот, скажем, как он отображает страницу Авиабазы (которые теперь пишутся на Markdown):

Вот исходник этой страницы:
Reddit — крупнейший социальный новостной сайт.

Habrahabr — этот монстр недавно перешёл на использование Markdown в комментариях.

Также на Markdown сегодня перешло множество CMS, форумов, социальных сетей. Например, ZeroNet использует Markdown всюду. В блогах, микроблогах/«твиттерах», форумах...

Полезные ресурсы

- SimpleMDE. Онлайн-редактор Markdown в браузере. Скорее всего, именно этот движок будет использоваться в качестве редактора на нашем форуме. Рекомендую сразу ткнуться в поле редактирования текста и нажать F9 «Side by Side» — экран разделится на две половины, слева markdown-текст, справа — он же уже преобразованный в визуальное представление. Самый удобный вариант редактирования.

- BBCode to Markdown (Reddit) Converter — конвертер BBCode-текста в Markdown. Бывает полезно, когда переносишь с BBCode-форума/блога в аналогичный, но с Markdown-разметкой.

- Markdown to BBcode — обратный процесс, конвертация Markdown в BBCode.

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

Markdown на Авиабазе

Markdown уже довольно активно используется на Авиабазе.

- Создание статических страниц. Пример с Ми-8ППА я привёл в статье выше. Вот как выглядит итог работы на сайте:

- Обмен данными с другими форумами, в частности, RSS-трансляции (тоже выше уже упоминал).

- Создание к топикам страниц с описанием/каталогом. Пример (на этапе тестирования):



А вот исходник этого блока:

Редактирование или через SparkleShare/GitHub, или через CMS Grav. Об этом будет отдельный материал позже.

- Также на Markdown работает сейчас создание материалов сайта Bionco.ru, на нём же — разметка форумов этого сайта (и новости берутся, как раз, оттуда) — это не прямо Авиабаза, конечно, но проект, который взаимодействует с Infonesy.

(тема будет продолжена )

Пример этой же статьи, конвертированной в Markdown в ZeroNet: