Используем хакерский язык разметки для самых разных задач. Визуальные редакторы для Markdown
Недавно один из наших пользователей поинтересовался, что такое Markdown? Он услышал это от знакомого, пользующегося блоговую платформу Ghost . Markdown — это простой язык разметки, который конвертирует простой текст в HTML. Можно считать его простым текстовым редактором. В этой статье мы покажем вам, как использовать Markdown в WordPress.
Что такое Markdown?
Markdown — это язык разметки, который преобразует простой текст в код HTML. Он позволяет пользователям использовать специальные символы типа звездочки, знака номера, подчеркивания и тире в синтаксе Markdown вместо HTML. Такой синтаксис Markdown затем автоматически конвертируется в HTML.
Например
**Это текст, выделенный жирным**
Текст выше будет преобразован с помощью Markdown в:
Это текст, выделенный жирным
Markdown предлагает эффективный способ создания расширенных текстовых документов особенно для продвинутых пользователей. Если вы используете текстовый редактор для написания записей в WordPress, тогда Markdown может стать вам хорошей альтернативной заменой.
Как добавить поддержку Markdown в WordPress
Первым делом вам необходимо установить и активировать плагин WP-Markdown . После активации необходимо перейти в раздел Настройки » Написание административной панели сайта и прокрутить страницу до раздела Markdown.
Вы можете активировать WP-Markdown для записей, страниц и произвольных типов записей. Также вы можете активировать поддержку Markdown для комментариев.
В плагине есть панель меню в области редактирования, поэтому вы легко можете добавить синтаксис Markdown. Если вы новичок в Markdown, то, вероятно, вам стоит активировать меню помощи. Это поможет вам быстрее изучить синтаксис Markdown.
После активации поддержки Markdown, кликните на кнопку сохранения изменений.
Использование Markdown в редакторе записей WordPress
После того, как вы включили поддержку Markdown для записей и страниц, вы можете перейти в раздел Записи » Добавить новую административной панели сайта для того, чтобы посмотреть его в действии.
Вы заметите, что стандартные в WordPress визуальный и текстовый редакторы заменены на редактор Markdown.
Экран редактора сейчас отображает предпросмотр в реальном времени того текста, который вы печатаете в редакторе. Вверху у вас панель помощи Markdown, который позволяет вам вставлять синтаксис Markdown с помощью кнопок. Эта панель будет полезна для тех пользователей, которые только знакомятся с синтаксисом Markdown.
Шпаргалка по синтаксису Markdown
Синтаксис Markdown очень простой, однако потребуется некоторое время, чтобы к нему привыкнуть. Ниже небольшая шпаргалка по Markdown, которую можно взять за основу изучения.
Исходные данные:
*Это текст, выделенный курсивом*
Результат:
Это текст, выделенный курсивом
Исходные данные:
**Это текст, выделенный жирным**
Результат:
Это текст, выделенный жирным
Исходные данные:
#Это заголовок 1#
Результат:
Это заголовок 1
Исходные данные:
##Это заголовок 2##
Результат:
Это заголовок 2
Исходные данные:
###Это заголовок 3###
Результат:
Это заголовок 3
Исходные данные:
(https://сайт)
Исходные данные:
1. Элемент нумерованного списка 1
2. Элемент нумерованного списка 2
3. Элемент нумерованного списка 3
Результат:
- Элемент нумерованного списка 1
- Элемент нумерованного списка 2
- Элемент нумерованного списка 3
Исходные данные:
*Элемент маркированного списка 1
*Элемент маркированного списка 2
*Элемент маркированного списка 3
Результат:
- Элемент маркированного списка 1
- Элемент маркированного списка 2
- Элемент маркированного списка 3
Добавление видео при использовании Markdown в WordPress
Обычно вы можете встроить видео с YouTube путем простого копирования ссылки и вставки ее в редактор записей. Этот способ не сработает при активированном WP-Markdown. В этом случае вам необходимо обернуть ссылку видео в шорткод [ embed] следующим образом:
Мы надеемся, что эта статья помогла вам узнать о языке разметки Markdown и о том, как использовать его в WordPress. Если вы считаете, что Markdown это не то, что вы искали, то попробуйте в WordPress.
Написание статей в веб-формате всегда было обременено необходимостью форматирования контента в HTML. Писать и публиковать контент непросто, так как вам необходимо знать как минимум простейшие теги HTML.
В таком случае вы теряете возможность быстрой публикации поста в блог или на веб-страницу. Заголовки, жирный шрифт, курсив, маркированные списки и нумерация - все эти фишки надо уметь делать. Этот процесс может быть довольно утомительным для простых блогеров, поэтому рождение Markdown - это как глоток свежего воздуха для создателей контента.
Но Markdown может пригодиться не только тем, кто работает в интернете. Он может также выступать в роли простого синтаксиса, который делает форматирование и запись в формате обычного текста проще для всех вне зависимости от того, пишете ли вы заметку для себя или файл в формате Markdown для дальнейшей публикации в интернете.
Markdown - облегчённый язык разметки. Первоначально создан Джоном Грубером и Аароном Шварцем, целью которых являлось создание максимально удобно читаемого и удобного в публикации облегчённого языка разметки. Многие идеи языка были позаимствованы из существующих соглашений по разметке текста в электронных письмах.
Цель Markdown заключается в том, чтобы сделать написание, редактирование и чтение веб-контента более простым для обычных пользователей. Простота заключается в том, что всё, что вам нужно сделать, - ознакомиться и запомнить синтаксис этого упрощённого языка.
Команды Markdown
Ссылки
Заголовки
# H1
## H2
### H3
Списки
Простой список:
— пункт 1
— пункт 2
— пункт 3
Нумерованный список
1. пункт 1
2. пункт 2
3. пункт 3
Для использования лёгкого языка Markdown вам необходимы специальные приложения - текстовые редакторы Markdown. Вы можете скачать их из App Store или с других сайтов в случае наличия свободной лицензии.
Лучшие просмотрщики Markdown
Marked 2
Цена: пробная версия - бесплатно, полная версия - 13,99 доллара.
Одна из самых популярных программ для просмотра текстов в формате Markdown. Документы обновляются в реальном времени, когда вы их редактируете. Все внимание сфокусировано на самом тексте. Программа работает как с Markdown-документами, так и с обычными текстами.
Лучшие редакторы Markdown
MarkMyWords
Цена: 1 150 рублей.
Наиболее важной функцией этого приложения является возможность работы с файлами CSS, а также поддержка удобных вариантов работы с документами.
Texts
Цена: бесплатно.
Texts представляет собой текстовый редактор, предназначенный для отделения представления контента от процесса его создания. Он работает как обычный текстовый процессор, но при этом сохраняет готовые документы в виде обычного текста с разметкой Markdown, что делает его совместимым с другими приложениями с поддержкой Markdown. Он создаёт документы, полностью готовые к публикации в интернете.
Markdown Pro
Цена: 379 рублей.
Markdown Pro предоставляет вам все инструменты, необходимые для создания красивых, правильно отформатированных документов с помощью языка разметки Markdown. Он также стремится сделать процесс написания весёлым и интересным. Программа поддерживает экспорт в форматах PDF или HTML. Markdown Pro является гибким и высококачественным Markdown-редактором для документов, заметок, статей и прочего.
Easy Markdown
Цена: 749 рублей.
Easy Markdown также делает редактирование и форматирование Markdown-документов лёгким для всех. Он автоматически переводит текст в форматированный веб-формат с помощью базового форматирования Markdown. Вы можете ввести текст на левой панели и просматривать конечный результат справа, а также сохранять код в HTML или RTF-формате в любое время во время работы над документом.
nvALT
Цена: бесплатно.
nvALT 2 представляет собой некое ответвление от популярного текстового редактора Notational Velocity, но с расширенными возможностями и модифицированным интерфейсом. Некоторые из них включают возможность писать и редактировать текстовые файлы в Markdown.
Nottingham
Цена: бесплатно.
Вдохновлённый элегантностью и гибкостью редактора Notational Velocity, Nottingham является простым и легким Markdown-редактором для Mac, который поддерживает функцию живого просмотра Markdown в формате текстовых файлов и записей. В целом дизайн очень похож на Notational Velocity, так что пользователи будут чувствовать себя как дома, работая с этой программой.
iA Writer
Цена: 749 рублей.
Один из лучших Markdown-редакторов. iA Writer поддерживает большое количество синтаксиса Markdown. В последней версии iA Writer можно использовать комбинацию Ctrl + Cmd + R для включения предварительного просмотра. Клиент также доступен на iPhone и iPad.
Byword
Цена: 899 рублей.
Byword - ещё один очень известный Markdown-редактор для Mac и для тех, кому нужен элегантный и простой интерфейс. Помимо красивого пользовательского интерфейса приложение может похвастаться минималистичным внешним видом, который абсолютно не отвлекает от работы. Также существует версия для iPhone и iPad.
Writedown
Цена: бесплатно.
Фишкой этого приложения является поддержка подсветки синтаксиса. Предварительный просмотр документа можно запустить сочетанием клавиш ⌥ + ⌘ + P.
Лучшие профессиональные редакторы Markdown
MultiMarkdown Composer
Цена: 379 рублей.
MultiMarkdown Composer - это мощный текстовый редактор, который поддерживает как Markdown, так и MultiMarkdown-форматы, а также расширенный синтаксис Markdown: таблицы, сноски, цитаты.
Mou
Цена: бесплатно.
В то время как большинство редакторов Markdown разработаны для блогеров и обычных пользователей, Mou придуман для более опытных пользователей, например веб-разработчиков.
Notebooks
Цена: бесплатно.
Notebooks представляет собой настольное приложение. Оно позволяет хранить и синхронизировать заметки с iOS-версией, что позволяет загружать ваши записи в любое время. Notebooks поддерживает формат Markdown, позволяет его редактировать, просматривать и конвертировать в HTML.
Ниже рассмотрим базовый синтаксис разметки текстовых файлов «Маркдаун» - используемые символы, ссылки, абзацы, строфы, заголовки, цитаты, списки, преформатированный текст, изображения.
В общепринятом на данный момент базовом «Маркдаун» нет некоторых элементов HTML, как, например, определения, таблицы. Но в этом есть своя логика и правда. Потому что если, например, добавить таблицы, то многие начнут снова верстать визуальный вид этими таблицами, как это было с HTML. В конце концов, простые таблицы можно создавть, например, преформатированием.
Хотя появляются различные сторонние расширенные версии «Маркдаун», как, например, Maruku, Kramdown, которые пытаются расширить базовый «Маркдаун». Главное, помнить, что «Маркдаун» не создавался как замена HTML, и важно не растерять в процессе его развития основные этой разметки.
Символы для разметки «Маркдаун»
В разметке гипертекста «Маркдаун» используются вспомогательные общие символы, но при этом не используются символы какого-либо алфавита - в первую очередь английского. Что в принципе, при хорошо продуманной национальной раскладке клавиатуры, позволит практически не переключать раскладку при создании и наборе текста веб-странички.
Список символов «Маркдаун»:
* «звёздочка» _ подчёркивание + плюс - минус = равно ` обратная кавычка (){}<> скобки # «решётка» ! восклицательный знак: двоеточие | вертикальная черта “ двойные кавычки " апостроф $ доллар пробел новый абзац
В «Маркдаун» эти символы и служат для форматирования структуры текста, аналогично использованию HTML элементов.
При этом следует учитывать, что в «Маркдаун» в большинстве случаев нет закрывающих символов, и действие символа, обозначающего какой-либо элемент текста, распространяется до конца абзаца.
Если есть необходимость в этих символах непосредственно в обычном тексте, то, эти символы нужно экранировать обратной чертой \ . Или же использовать разметку «преформатированный текст».
Базовые элементы «Маркдаун»
Абзац и перевод строки
Абзацы в «Маркдаун» отделяются друг от друга одним или несколькими пустыми строками.
Для того чтобы сделать перенос внутри строки, что-бы, например, создать строфу в стихотворении, достаточно добавить два пробела перед переносом строки. А делается это добавлением в конец строфы двух пробелов, а потом уже знак абзаца. Пример
Строка1
Строка2
Строка3
То есть строка набирается так: строка\s\s\n , где \s - пробел, \n - абзац. Другими словами это замена тега
в HTML.
Заголовки
Заголовки обозначаются знаком # («решётка») в начале абзаца. Количество решёток обозначает уровень заголовка от одного до шести. Например:
# Заголовок
Соответствует HTML-коду
Заголовок
А, например, четыре решётки
#### Заголовок
соответствует HTML-коду
Заголовок
Главный заголовок можно не выделять хешами, а подчеркнуть двойной линией:
Главный заголовок =================
Второй по плавности заголовок можно подчеркнуть простой линией:
Обычный заголовок -----------------
Стилизация текста
Жирный текст - **Жирный текст** Курсивный текст - *Курсивный текст* Жирный курсивный текст - ***Жирный курсивный текст***Жирный текст - __Жирный текст__ Курсивный текст - _Курсивный текст_
Горизонтальная линия
Горизонтальная линия
делается из серии трёх и более коротких тире
Цитаты
Перед цитатой в «Маркдаун» ставится угловая скобка > . Действует до конца абзаца
> «Следующее поколение веб-разработчиков будет жить при "Маркдауне"». М. Астапчик
Аналогично в HTML
«Следующее поколение веб-разработчиков будет жить при "Маркдауне"». М. Астапчик
Списки
Обычный ненумерованный список обозначается звёздочкой в начале каждого элемента списка
* Раз * Два * Три
Для нумерованного списка используются цифры
1 Раз 2 Два 3 Три
Форматирование кода, преформатированный текст
Очень важное в «Маркдаун» форматирование, которое означает текст как есть, без трансляции в HTML. Соответствует элементам pre и code в HTML. Для преформатированного абзаца достаточно сделать отступ в четыре пробела или один таб.
Print("Hello world!\n")
Так же блок преформатированного текста можно обозначить тремя подряд обратными кавычками в начале и конце этого блока. То есть здесь требуются и закрывающий набор символов.
``` print("Hello world!\n")
Преформатированный текст непосредственно в строке выделяется с двух сторон обратными кавычками.
`преформатированный текст`
Легко использовать преформатированный текст в «Маркдаун».
Ссылки
Ссылки-сноски
В обычном тексте не всегда эстетично вставлять ссылки прямо в текст, так как они могут быть очень длинными. Гораздо лучше их оформлять в виде сносок для лучшей читабельности. Сноска организуется с использованием квадратных кавычек. А внизу документа, как в книгах, каждой сноске после двоеточия указывается настоящий адрес ссылки. Пример.
— очень простой и изящный синтаксис разметки текста , который прямо сейчас стремительно набирает обороты своей популярности в США, получая прописку в формах для комментирования, онлайн-редакторах и других местах для ввода больших текстов, требующих сложного и тщательного визуального форматирования.
И хотя я всегда считал, что придумывание новых еще более упрощенных синтаксисов для и так несложного HTML"а — это зло, Markdown мне понравился. Он, пожалуй, самый продуманный из тех, что я видел, и самый... ненавязчивый. В данной обзорной статье также подчеркнём концептуальное отличие Markdown от wiki-разметки , наиболее идеологически близкой ему.
Форматирование и Web 2.0
Текущая эпоха Web 2.0 отличается от предыдущей тем, что сейчас пользователи web-сайтов сами могут массово создавать контент на этих сайтах. Сюда входят развитые системы комментариев к материалам, блоги, социальные сети, где содержание полностью создаётся самими пользователями.
Чтобы пользователям было удобно создавать сообщения, применяются различные достижения web-программирования, вплоть до специальных текста, как, например, в WordPress. Это практически полноценные редакторы текста с базовым набором функций редактирования.
Однако не всегда такие WYSIWYG-редакторы удовлетворяют продвинутых пользователей. Причём некоторые реализации редакторов в разных браузерах могут выглядеть ужасно или совсем не работать. Поэтому на многих сайтах разрешается создавать сообщения даже при помощи чистого HTML.
Но и чистый HTML не всегда хорош в силу не столько своей сложности, сколько из-за громоздкости кода, в котором легко запутаться. Поэтому изобретено немало упрощённых языков разметки, например, wiki-разметка , которые помогают пользователям с большей лёгкостью форматировать свои сообщения при помощи простого текстового синтаксиса.
В этой статье рассмотрим пример текстового синтаксиса под названием , который по многих превосходит уже названные методы в удобстве и легкости web-форматировании текста.
Итак, Markdown — простой для написания и чтения формат обычного текста (plain text), который затем легко преобразуется в структурно верный HTML. С виду Markdown очень похож на wiki-разметку . Ниже подчеркнём особенности Markdown, как самостоятельного синтаксиса.
Markdown (маркдаун ) — облегчённый язык разметки текста для публикации Web. Первоначально создан Джоном Грубером (англ. John Gruber) и Аароном Шварцем , целью которых являлось создание максимально удобочитаемого и удобного в публикации облегчённого языка разметки. Реализации языка Markdown преобразуют текст в формате Markdown в валидный, правильно построенный XHTML и заменяет левые угловые скобки («<»), амперсанды («&») и так далее на соответствующие коды сущностей.
Принципы Markdown
Первоначально синтаксис Markdown был придуман разработчиками Джоном Грубером и Аароном Шварцем с целью простой публикации примеров HTML-кода на web-сайтах. Ведь при обычной публикации примеров HTML на web-странице приходится много возиться с заменой угловых скобок на последовательности символов < и > и так далее.
Кстати говоря, хочу обратить ваше внимание, что во многих реализациях встраивания Markdown в сайты из тех, что я видел, почти каждый раз пишут свой собственноручный фильтр ввода/вывода, почему-то игнорируя (или попросту не зная), что в PHP Markdown есть свой встроенный фильтр-парсер. Для чего имеет место быть замечательная опция input sanitizer , которую можно найти в самом верху класса Markdown_Parser (файл arkdown.php), а вот и переменные ответственные за его включение и их значения по-умолчанию:
Var $no_markup = false;
var $no_entities = false;
Если присвоить им true , например, так:
Function do_markdown($text, $safe=false) {
$parser = new Markdown_Parser;
if ($safe) {
$parser->no_markup = true;
$parser->no_entities = true;
}
return $parser->transform($text);
}
Теперь функция будет создавать свой парсер, который будет вычищать весь поток символов.
Что же касается готовой поддержки Markdown, то этот синтаксис уже достаточно распространён на многих сайтах. Например, его можно использовать в социальной сети Diaspora . Markdown прямо или через плагины поддерживается в CMS-системах Drupal, Plone, TYPO3, Django, DokuWiki .
Многие текстовые редакторы plain text, а также среды разработки приложений тоже поддерживают Markdown как минимум на уровне подсветки кода. Сюда входят редакторы Vim, Emacs, Gedit, BBedit, TextMate, IDE Eclipse . Для примера возьмём плагин для редактора Gedit . Он даёт возможность предпросмотра отформатированного текста через HTML-просмотрщик в отдельном окне:
Подписка на обновления блога → , весёлый усач 9 января 2011 в 22:14
Язык разметки Markdown
- Чулан *
В этой статье даются практические советы по написанию парсера для языка разметки Markdown . На сегодняшний день информации в интернете по этому вопросу крайне мало.
Статья будет полезна тем, кто занимается созданием собственных CMS и фреймворков с нуля.
Кратко о языке
Разработчики Маркдауна ставили своей целью создать язык, код которого будет визуально схож с результатом его выполнения. За основу были взяты принятые правила оформления e-mail сообщений.Вот пример кода:
Заголовок
=========
Нумерованные списки:
1. Первый пункт
2. Второй пункт
3. Третий пункт
> Комментарий
> > Комментарий в комментарии
Можно **выделять часть** текста.
Такой код будет преобразован в правильный xHTML.
Синтаксис Маркдауна является с одной стороны более легким в освоении для технически неквалифицированных пользователей(в отличие, например, от BB кодов), а, с другой стороны, производит качественный выходной xHTML код, чего не скажешь о различных WYSIWYG редакторах. Эти преимущества делают Маркдаун хорошим выбором для форумных движков и CMS, где требуется возможность редактирования контента пользователями.
На сегодняшний день существует множество компиляторов для Маркдауна на всевозможных языках. Если вы решите использовать Маркдаун в своем проекте, то можете использовать уже готовое решение(ниже есть ссылки). Если же вы решите написать собственный парсер(например, в учебных целях), то ниже приводятся особенности, с которыми вы можете столкнуться в ходе разработки, и даются практические советы по их решению.
Создания компилятора языка
Маркдаун нельзя разобрать контекстно-свободными грамматиками. Он содержит контекстно-зависимые лексические элементы. Например, вложенность конструкций определяется выравниванием строк как в Пайтоне. Так что воспользоваться в явном виде YACCом и ANTLRом не получится. Среди решений этой проблемы я встречал следующие:- Отказаться от использования генератора парсеров и написать парсер в ручную, используя местами регулярные выражения.
Именно так был создан оригинальный парсер Маркдауна на Перле и большинство других реализаций. Недостаток решения в низкой производительности: во-первых, из-за использования регулярных выражений, во-вторых, потому что оптимизировать парсер в ручную до уровня, который обеспечивает автоматически сгенерированный, как правило очень сложная задача. Кроме того, если вы пишете на императивных языках(PHP, Java, C++), то реализовать и отлаживать самописный парсер будет очень трудно.
- Использовать генератор парсеров с поддержкой встроенных действий, и писать действия, имеющие обратный эффект.
За счет использования встроенных действий с обратным эффектом можно, например, осуществлять анализ выравнивания данной строки относительно предыдущей, таким образом имитируя контекстно-зависимые правила. Недостаток в том, что контекстно-свободные грамматики не предназначены для этих целей, а использование обратного эффекта может привести к багам во время разбора.
- Рекурсивное применение парсера контекстно-свободной грамматики.
На самом деле, можно сначала грубо разбить весь код на отдельные блоки(абзацы, комментарии одного уровня), а потом к ним применить еще раз этот же самый парсер. Это решение не приведет к непредсказуемым последствиям как в предыдущем варианте, и оно более правильно с идеологической точки зрения, но менее эффективно в плане производительности.
Возможно, это будет самым простым в реализации решением.
- Предварительно в ручную обработать входные данные.
Можно в ручную разбить код на строки, и циклом пройтись по ним, заменяя пробелы в начале каждой строки на символ указывающий ее сдвиг(влево или вправо) относительно предыдущей. Точно также можно обработать вложенность комментариев. Затем полученный массив строк можно склеить обратно, и уже разбирать его контекстно-свободной грамматикой. Полученный после фильтрации язык будет контекстно-свободным.
Это решение по сложности сопоставимо с предыдущим. По производительности должно в общем случае быть более эффективным.
Теги: compiler design, compilers, parser, markdown, markup, компиляция, разметка, cms, cms разработка, framework, программирование, programming, programming languages
