Markdown: предпросмотр без innerHTML

Предпросмотр markdown: заголовки, списки, таблицы, код-блоки и ссылки. Рендер по белому списку тегов — script из разметки остаётся текстом.

Введите markdown — предпросмотр появится сразу. Или начните с готового примера ниже.

Разметка строится по белому списку тегов

Предпросмотр не использует innerHTML: узлы собираются из разобранного документа через createElement и textContent. Сырые <script>,onerror-атрибуты и javascript:-ссылки остаются текстом — код не исполняется, якоря строятся только для http(s). Вкладка «HTML» показывает ровно ту разметку, которая генерируется из документа, с экранированием текста.

Последние разборы

В истории — сводка по составу документа (заголовки, абзацы, слова), сам markdown не сохраняется. Вкладка восстанавливается кнопкой «В закладки».

Готовые примеры

Найдено: 3 из 3

Что это и как пользоваться

Страница показывает три вида одного документа: исходную разметку, предпросмотр и получившийся HTML. Переключение мгновенное, поэтому видно не только «как выглядит», но и что именно уйдёт на страницу.

Рендер идёт по белому списку: заголовки только h1–h3 (уровни 4–6 обрезаются до третьего), списки с вложенностью до восьми уровней, таблицы до 64 колонок, код, цитаты, ссылки. Всё остальное остаётся текстом.

Ссылки живут только с http и https: javascript:, mailto: и относительные пути превращаются в обычный текст, а не в якорь. HTML не вставляется через innerHTML — узлы собираются поштучно, поэтому тег script в разметке ничего не исполняет.

Код-блоки и код-спаны выводятся как pre и code, а не как экранированный текст: содержимое остаётся данными и не исполняется, даже если внутри попадётся угловая скобка.

Символ # без пробела после него остаётся обычным текстом, а не заголовком: это соответствует CommonMark и избавляет от ложных заголовков в тексте вроде «C#».

Когда пригодится

  • Проверить README перед публикацией: увидеть, как разметка отрендерится, и поправить таблицу или список.
  • Получить безопасный HTML-фрагмент для вставки в страницу или в письмо.
  • Разобрать чужой markdown: понять, почему абзац слипся или список уехал вправо.
  • Убедиться, что в тексте не осталось сырого HTML — в предпросмотре он будет виден как текст.
  • Проверить, что таблица соберётся: увидеть, где не хватает колонки или строки-разделителя.
  • Проверить, как выглядит цитата и вложенный список, прежде чем публиковать текст в блоге.

Чего инструмент не делает

  • Это не редактор: файлы не сохраняются, версии не ведутся, экспорта в PDF или DOCX нет.
  • Расширения markdown не поддерживаются: сноски, математика, диаграммы и директивы конкретных движков останутся текстом.
  • Вложенный HTML не рендерится — это осознанное ограничение, а не дефект: именно оно не даёт разметке исполниться.
  • Подсветки синтаксиса в код-блоках нет: страница не подключает сторонних библиотек.
  • Ввод ограничен 200 000 знаков: большие документы придётся проверять частями.

Примеры

Вход
                    # Заголовок
- пункт
Выход
                    <h1>Заголовок</h1><ul><li>пункт</li></ul>
Вход
                    текст с <script>alert(1)</script>
Выход
                    тег показан как текст и не исполняется