Markdown-редактор
Что такое Markdown?
Markdown — легкий язык разметки для написания структурированного контента в читаемом plain text. Заголовки, списки, ссылки, изображения, цитаты, блоки кода и таблицы задаются простыми символами, а затем отображаются как HTML или другие форматы. Markdown-редактор помогает сравнивать исходник и предпросмотр, находить ошибки форматирования и быстрее готовить README, документацию, статьи, заметки, базы знаний, changelog и продуктовые тексты. Markdown намеренно прост, но платформы поддерживают разные расширения: GitHub-Flavored Markdown, frontmatter, task lists или Mermaid. Поэтому итоговый вид нужно проверять там, где материал будет опубликован. Перед публикацией полезно проверить ссылки и изображения отдельно. При совместном использовании нужно заранее прояснить входные данные, допущения и ожидаемый результат, чтобы вывод не поняли неверно.
Как использовать
Как пользоваться
- Введите текст Markdown в редакторе слева
- На правой панели отображается предпросмотр в реальном времени
- Используйте кнопки панели инструментов для вставки часто используемого синтаксиса
- На нижней панели отображается количество слов, символов и строк
- Содержимое автоматически сохраняется в локальное хранилище браузера
Возможности
Советы по редактированию
- Отображение предпросмотра может отличаться на разных платформах, поэтому проверяйте итоговый результат в целевой системе при использовании таблиц, HTML или расширенных возможностей Markdown.
- Автосохранение полезно при написании черновиков, но для важных заметок сохраняйте отдельную копию перед очисткой данных браузера или сменой устройства.
Применение
Технический принцип
Рендеринг Markdown обычно включает три этапа: токенизатор нарезает текст на синтаксические единицы — заголовки, абзацы, списки и блоки кода; парсер превращает поток токенов в абстрактное синтаксическое дерево (AST) по правилам грамматики; рендерер обходит AST и выводит соответствующий HTML. Популярные JavaScript-библиотеки — marked, markdown-it, remark и micromark — различаются размером сборки, скоростью и расширяемостью, но все следуют спецификации CommonMark. CommonMark устранил неоднозначности оригинальной грамматики Markdown (например, как делать отступы во вложенных списках и как определять границы инлайн-кода), так что разные реализации дают одинаковый результат. Поверх CommonMark GitHub добавил GFM (GitHub Flavored Markdown), расширяющий стандарт таблицами, списками задач (- [ ]), зачёркиванием (~~), автолинками и огороженными блоками кода; сегодня GFM — фактический стандарт, и большинство современных Markdown-инструментов включают его по умолчанию. Подсветка синтаксиса в блоках кода обычно выполняется highlight.js или Prism.js, которые распознают языковой тег при рендеринге и помечают ключевые слова, строки и комментарии CSS-классами, окрашиваемыми темой. Чтобы пользовательский HTML не вызвал XSS, рендереры обычно пропускают вывод через DOMPurify или аналогичный фильтр по белому списку, удаляющий теги script, iframe и атрибуты on* — поэтому вставка чужого Markdown не может выполнить вредоносный скрипт.
- Поток разбора: исходный текст проходит через Токенизатор → Парсер → Рендерер и превращается в HTML, где AST — промежуточное представление.
- Стандарты: CommonMark — официальная грамматика; GFM расширяет её таблицами, списками задач, зачёркиванием, огороженными блоками кода и автолинками.
- Сравнение библиотек: marked — компактная и быстрая, markdown-it обладает богатой экосистемой плагинов, remark построена на экосистеме unified и удобна для конвейеров обработки документов.
- Подсветка синтаксиса: highlight.js или Prism.js читают языковой тег блока кода при разборе и помечают ключевые слова, строки и комментарии CSS-классами.
- Защита от XSS: библиотеки вроде DOMPurify фильтруют выходной HTML по белому списку, удаляя script, iframe и атрибуты on* для предотвращения скриптовой инъекции.
- Живой предпросмотр: редактор слушает события ввода, debounce-ит каждое изменение, перепарсивает и обновляет правый DOM через diff, балансируя отзывчивость и производительность.
Примеры
Заголовки, списки и блоки кода
# Заголовок 1
## Заголовок 2
- Пункт списка A
- Пункт списка B
- Вложенный пункт
```javascript
function hello() {
console.log('Hello Markdown');
}
```Таблицы
| Инструмент | Тип | Размер |
|------------|--------|--------|
| Vite | Build | Small |
| Webpack | Build | Large |
| Rollup | Bundle | Mid |Цитаты и ссылки
> «Markdown позволяет письму вернуться к самому содержанию.»
> -- John Gruber
Источник: [CommonMark Spec](https://commonmark.org)Часто задаваемые вопросы
Какой диалект Markdown поддерживается?
Большинство сборок используют CommonMark плюс расширения GitHub Flavored Markdown: таблицы, зачёркивание, списки задач, огороженные блоки кода с указанием языка. Некоторые включают MathJax/KaTeX для блоков $math$ и Mermaid для диаграмм. Что доступно конкретно у вас — смотрите по панели инструментов.
Загружается ли документ на сервер?
Нет. Парсинг и рендеринг Markdown происходят в вашем браузере с помощью JS-библиотеки (обычно markdown-it или remark). Черновик не покидает устройство.
Как работает живой предпросмотр?
Пока вы печатаете, исходная панель парсится и рендерится в HTML на панели предпросмотра. Синхронная прокрутка удерживает обе панели в одном положении, сопоставляя позиции абзацев. В большинстве сборок также есть полноэкранный режим и переключение «бок-о-бок».
Можно ли экспортировать документ?
Да — скачать как .md (исходник), HTML (отрендеренный, готовый для встраивания на веб-страницу) или PDF (через печать в браузере). Экспорт в PDF сохраняет заголовки, списки, блоки кода и встроенные изображения. Если нужен пиксельно точный PDF, вставьте HTML в полноценный текстовый процессор.
Сохранится ли черновик, если я закрою вкладку?
Большинство сборок автоматически сохраняют в localStorage, поэтому при повторном открытии в том же браузере черновик восстанавливается. Закрытие приватного окна или очистка данных сайта его сотрут. Для надёжного хранения периодически экспортируйте файл .md в файловую систему или в git-репозиторий.
Загружаются ли куда-то картинки, если я их вставляю?
Некоторые редакторы хранят вставленные изображения как inline base64 (это видно в исходнике markdown). Другие выгружают на хостинг изображений — проверьте поведение конкретной страницы. Если конфиденциальность важна, сначала сохраните картинки в файловой системе и подключайте по относительному пути.
Можно ли вставлять таблицы, формулы или диаграммы?
Таблицы GitHub Flavored Markdown (| col1 | col2 |) работают везде. Математические блоки ($x^2$) и диаграммы Mermaid (```mermaid) требуют отдельной поддержки — смотрите кнопки на панели. Где это поддерживается, предпросмотр рендерит их вживую.