Markdown онлайн — предпросмотр и копирование HTML

Редактор Markdown с живым предпросмотром и очищенным HTML для копирования и сохранения

Работает в браузере · файлы никуда не загружаются

Markdown

Сохранять черновик в этом браузере

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

Предпросмотр

Загружаем движок предпросмотра…

HTML предпросмотра всегда очищается: скрипты, атрибуты событий, ссылки javascript:, iframe и формы удаляются. Если в тексте есть адреса изображений, браузер загружает их напрямую по этим адресам.

Что это за инструмент

Предпросмотр Markdown показывает готовый результат рядом с текстом прямо во время набора. Удобно, чтобы проверить README, черновик статьи для блога, документацию или заметки со встречи перед публикацией. Поддерживаются заголовки, списки, цитаты и блоки кода, а также расширения GitHub Flavored Markdown: таблицы, зачеркивание и списки задач. Перед показом результат всегда очищается, поэтому вставка текста из неизвестного источника не запустит никакой скрипт.

Как пользоваться

Введите или вставьте Markdown в левое поле. Сначала там лежит короткий пример, кнопка «Очистить» его удаляет.
Предпросмотр справа обновляется через мгновение после того, как вы перестанете печатать. Проверьте глазами выравнивание таблиц и вложенные списки.
«Копировать HTML» кладет в буфер обмена очищенный фрагмент HTML, готовый для редактора в режиме HTML или шаблона письма.
«Сохранить .md» скачивает исходный текст. «Сохранить .html» скачивает полный HTML-документ с простой таблицей стилей. Имя файла берется из первого заголовка первого уровня.
Чтобы продолжить позже, включите черновик. Текст хранится только в этом браузере.

Как это работает

Парсер: marked (лицензия MIT) превращает текст в HTML по спецификации GFM. Как и в стандарте, одиночный перевод строки не становится переносом, если строка не заканчивается двумя пробелами и за ней не следует пустая строка.
Очистка: DOMPurify (Apache-2.0 или MPL-2.0, здесь используется по Apache-2.0) очищает HTML перед показом. Удаляются теги script, iframe, object, form и style, атрибуты событий, начинающиеся с on, атрибуты style, а также ссылки с адресами javascript: и data:.
Ссылки: оставшиеся ссылки открываются в новой вкладке с rel=“noopener noreferrer”.
Флажки: флажки списков задач всегда неактивны, предпросмотр только для чтения.
Изображения: адреса картинок остаются как есть, поэтому браузер запрашивает их напрямую с серверов, и эти серверы видят запрос.
Файлы: .md — ваш текст как есть в UTF-8. .html — документ в UTF-8 с атрибутом lang и минимальной таблицей стилей.

Примеры

Вы пишете	Вы получаете
`жирный`	жирный
`~~удалено~~`	~~удалено~~
`- [x] готово`	отмеченный флажок и слово «готово»
`[ссылка](https://example.com)`	ссылка, открывающаяся в новой вкладке
`[нажми](javascript:alert(1))`	адрес удаляется, остается только текст
`<script>alert(1)</script>`	ничего не выполняется

Таблица выглядит так. Двоеточия во второй строке задают выравнивание.

| Товар | Кол-во |
|:---|---:|
| Яблоки | 3 |

Частые вопросы

Отправляется ли мой Markdown на сервер?

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

Выполнится ли тег script из моего текста?

Нет. Перед показом HTML всегда проходит через DOMPurify, который удаляет теги script, атрибуты событий вроде onclick и onerror, ссылки javascript, iframe, формы и теги style. Копируется и скачивается именно очищенный HTML.

Как написать таблицу или список задач?

В таблице столбцы разделяются вертикальной чертой, а под заголовком ставится строка из дефисов. Двоеточие слева в этой строке означает выравнивание влево, справа — вправо. Пункт списка задач начинается с - [ ] или - [x], а в предпросмотре видны флажки только для чтения. Обе возможности — расширения GitHub Flavored Markdown.

Будет ли выглядеть точно как на GitHub или в моем блоге?

Синтаксис разбирается так же, но шрифты, отступы и цвета каждый сервис задает сам. Используйте страницу, чтобы проверить, что Markdown разбирается так, как вы задумали. В скачанный файл .html входит только простая таблица стилей для удобного чтения.

Какой длины может быть текст?

До 500 000 символов. При превышении предпросмотр приостанавливается и показывает предупреждение, поэтому очень длинные документы вставляйте частями.