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

Что такое рендер Markdown?#

Markdown — это Plain-text-стенография, которой разработчики пишут форматированный текст: **bold**, # headings, - lists, `code`. Рендер — программа, превращающая эти знаки в HTML, который реально показывает браузер. README-файлы, сайты документации, комментарии в трекерах задач, чаты и генераторы статических сайтов пропускают Markdown через рендер, прежде чем показать его вам.

Эта страница — рендер Markdown с одной конкретной приоритетной идеей дизайна: он безопасен по построению, а не за счёт фильтрации. Большинство рендеров сначала превращают Markdown в HTML, а затем пытаются вычистить опасные теги из результата — модель, где одна пропущенная регулярка означает XSS-уязвимость. Этот инструмент работает наоборот: каждый символ исходника HTML-экранируется до применения форматирования, а единственные теги, которые он когда-либо порождает, берутся из фиксированного захардкоженного списка (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br). Не существует пути, по которому из ввода мог бы появиться тег <script>, потому что raw-< в исходнике экранируется в < ещё до того, как форматер вообще его увидит. Именно это делает инструмент пригодным для статического сайта со строгой CSP, как этот.

Реализовано сфокусированное подмножество CommonMark плюс основы GitHub-Flavored Markdown: огороженные блоки кода, заголовки ATX, абзацы, нумерованные и ненумерованные списки, цитаты, тематические разделители (---), инлайн-код, жирный, курсив, зачёркнутый, изображения, ссылки и angle-autolinks. Один и тот же ввод даёт два вывода рядом — предпросмотр и raw HTML, — чтобы вы видели, что именно выдал рендер.

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

1. Введите Markdown в левую панель или нажмите Пример, чтобы загрузить встроенный документ, демонстрирующий каждую поддерживаемую возможность.
2. Переключайте вывод двумя кнопками над правой панелью:
   • Предпросмотр показывает форматированный результат в том виде, в каком он появится на веб-странице.
   • HTML показывает точный HTML, выданный рендером, — то, что вы вставили бы в шаблон или передали на аудит санитайзеру.
3. Нажмите Копировать HTML, чтобы забрать сгенерированный HTML для использования в другом месте — вставка в CMS, embed в шаблон или прогон через ревью.
4. Нажмите Очистить, чтобы опустошить обе панели.
5. Строка состояния сообщает длину отрендеренного вывода в байтах или отмечает, что ввод пуст.

Ключевые возможности#

• Безопасен по построению. Весь исходный текст HTML-экранируется до форматирования, а рендер выдаёт только теги из фиксированного allow-списка. Шага «затем удалить опасные части», который можно выполнить неверно, просто нет.
• Опасные URL-схемы отбрасываются. URL ссылок и изображений проверяются по схеме; javascript:, vbscript:, data:, file: и about: блокируются, а проблемный текст показывается буквально, вместо того чтобы стать живой ссылкой.
• Два представления из одного источника. Переключение между предпросмотром и raw HTML без перепечатывания — можно проверить и визуальный результат, и порождённую разметку.
• Основы GFM включены. Зачёркивание (~~текст~~), огороженные блоки кода с указанием языка и списки ведут себя как в GitHub-Flavored Markdown.
• Ноль зависимостей, 100 % на клиенте. Рендер написан самостоятельно — без встроенной библиотеки парсинга — и работает целиком в браузере. Ничего не загружается, и бэкенда, куда можно что-то внедрить, нет.

Разбор примера#

Нажмите Пример — и левая панель заполнится документом, затрагивающим основной синтаксис:

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

Переключитесь на HTML — и увидите точно то, что выдал рендер. Абзац превращается в:

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

Ссылка становится жёсткой целью с безопасными rel/атрибутами:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

а огороженный блок превращается в экранированный <pre><code>, дословно сохраняющий исходник — const x = 42; появляется как текст, а не как исполняемый скрипт. Этот последний пункт — вся история безопасности в миниатюре: даже если вставить в исходник <script>alert(1)</script>, он отрендерится как буквальный текст <script>alert(1)</script>, потому что < экранируется в < ещё до того, как форматер решит, что является тегом.

FAQ#

Зачем это, если можно писать HTML напрямую?#

Потому что Markdown быстрее набирать, его легче читать в исходном виде, и он позволяет контрибьюторам, не знающим HTML, писать контент. Этот рендер для случаев, когда нужно удобство без доверия к тому, что универсальная библиотека парсинга ещё и безопасна — безопасность здесь даёт архитектура, а не прикрученный в конце санитайзер.

Я вставил тег <script>, а он показался как текст. Это баг?#

Нет — это задуманное поведение и базовая гарантия безопасности. Каждый символ ввода HTML-экранируется до форматирования, поэтому любой похожий на тег текст в исходнике рендерится как инертный видимый текст. Через этот рендер нет способа вывести живой <script>.

Почему моя ссылка javascript: показана как обычный текст?#

Рендер проверяет схему у каждого URL ссылок и изображений. Схемы вроде javascript:, vbscript:, data:, file: и about: блокируются, потому что это классические векторы атак на внедрение. Когда URL блокируется, рендер оставляет исходный Markdown как буквальный текст, а не выдаёт опасный якорь.

Поддерживаются ли таблицы, task-списки или сноски?#

Нет — это намеренное, сфокусированное подмножество CommonMark плюс основы GFM (огороженный код, зачёркивание, autolinks). Таблицы и сноски требуют более богатого парсера и более широкой поверхности атаки; они умышленно вне рамок. Придерживайтесь поддерживаемых конструкций из списка возможностей выше.