MyDevTools
RU

Markdown превью

Редактор Markdown с живым HTML-превью рядом: таблицы GFM, списки задач, зачёркивание. Копируйте очищенный HTML или скачивайте файл .html.

Введённые данные и файлы остаются в браузере

Напишите или вставьте Markdown или загрузите пример.

Превью

Здесь по мере набора появится готовый предпросмотр.

На этой странице

Пишите Markdown с одной стороны и сразу видите отрендеренный результат с другой — удобно для черновиков README, комментариев к issue, документации и release notes с последующим экспортом в HTML.

Подробное описание функциональности

Рендеринг выполняет библиотека marked с GitHub Flavored Markdown: таблицы, списки задач - [x], зачёркивание ~~text~~, блоки кода в ограждениях и автоматические ссылки для голых URL. Одиночный перевод строки становится <br>, как в комментариях GitHub, поэтому строки не сливаются в один абзац. Блоки кода выводятся моноширинным шрифтом без синтаксической подсветки.

Сырой HTML внутри Markdown очищается: скрипты, iframe, формы, стили и атрибуты-обработчики вроде onclick удаляются, ссылки javascript: блокируются, а безобидные теги вроде <kbd>, <details> или <sub> сохраняются. Ссылки открываются в новой вкладке. В превью заголовки показываются на уровень ниже, чтобы не конкурировать с заголовком страницы; Копировать HTML и Скачать HTML сохраняют исходные <h1>–<h6>.

Панель инструментов вставляет у курсора разметку для жирного, курсива, заголовка, ссылки, изображения, inline-кода и списка, а Синхронная прокрутка держит обе панели в одной относительной позиции. Всё работает в браузере, и инструмент не сохраняет текст — скопируйте его, прежде чем закрыть страницу.

Практические примеры

Список задач: - [x] tests и - [ ] docs отображаются как отмеченный и неотмеченный флажок.

Переводы строк: две строки line one и line two ~~old~~ превращаются в <p>line one<br>line two <del>old</del></p>.

Таблица: строки | A | B |, |---|---|, | 1 | 2 | превращаются в HTML-таблицу со строкой заголовка.

Опасный HTML: <script>alert(1)</script><b onclick=x>hi</b> экспортируется просто как <b>hi</b>.

Как использовать этот инструмент

  1. Напишите Markdown

    Пишите в Редактор Markdown. При первом открытии показан пример документа; нажмите Очистить, чтобы начать с пустой страницы.

  2. Форматируйте через панель

    Выделите текст и используйте кнопки форматирования (жирный, курсив, заголовок, ссылка, изображение, код, список), чтобы вставить разметку.

  3. Проверьте превью

    Панель Превью обновляется при каждом нажатии клавиши; включите Синхронная прокрутка, чтобы прокручивать обе панели вместе.

  4. Экспортируйте

    Используйте Копировать HTML или Копировать Markdown либо Скачать HTML, чтобы сохранить markdown-preview.html с базовыми стилями.

Советы и лучшие практики

  • Относительные пути к изображениям вроде img/logo.png здесь не разрешаются; чтобы увидеть картинки, используйте полные URL https://.
  • Изображения с других сайтов браузер загружает напрямую с их серверов.
  • Возможности только GitHub — @mentions, коды эмодзи вроде :smile:, диаграммы Mermaid и формулы — показываются как обычный текст.
  • Встроенный HTML вроде <kbd>Ctrl</kbd> или <details> работает, но атрибуты style и class удаляются.
  • Скачанный файл — самостоятельная страница со светлыми стилями, готовая к печати или отправке.