Softonic

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

Шаг 1 / 2
Далее

Вводите текст слева и наблюдайте за рендерингом HTML справа. Предпросмотр понимает Markdown в стиле GitHub: таблицы, списки задач, огороженные блоки кода с подсветкой синтаксиса, зачёркивание, автоматически преобразуемые в ссылки URL и встроенный HTML. Удобно для подготовки README перед коммитом, проверки того, как будет выглядеть комментарий в pull request, или просто для изучения синтаксиса Markdown, наблюдая за рендерингом каждого нажатия клавиши.

Как пользоваться предпросмотром

  1. 1

    Напишите Markdown

    В левой панели вводится исходный Markdown. Каждое изменение мгновенно перерисовывает правую панель.

  2. 2

    Смотрите предпросмотр HTML

    В правой панели отображается отрендеренный результат в стиле GitHub.

  3. 3

    Переключайте режим

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

  4. 4

    Скопируйте HTML

    Возьмите отрендеренный HTML, если нужно вставить его в почтовый клиент или CMS.

Что поддерживает этот предпросмотр

  • CommonMark: заголовки, абзацы, выделение, списки, цитаты, блоки кода, ссылки, изображения, горизонтальные линии.
  • Расширения GFM: таблицы с выравниванием столбцов, списки задач (- [ ] и - [x]), зачёркивание через ~~, автоматические ссылки и огороженные блоки кода с указанием языка.
  • Подсветка синтаксиса: более 100 языков через highlight.js, JavaScript, Python, Go, Rust, SQL, YAML и др.
  • Сырой HTML: встроенный HTML передаётся как есть (очищается ради безопасности).
  • Математика (по желанию): $...$ в строке и $$...$$ блоком, если включить математическое расширение.

Не поддерживается

  • Пользовательские вики-ссылки в стиле Obsidian ([[Page]]), они доступны только в Obsidian.
  • Огороженные блоки div из Pandoc (:::), только для Pandoc.
  • Серверные включения (server-side includes) и шаблонные теги {% ... %}.

Типичные сценарии

  • Черновик README: напишите его вне IDE и вставьте окончательную версию.
  • Проверка форматирования комментариев в PR: перед публикацией, поле комментариев на GitHub неправильно показывает блоки кода.
  • Преобразование заметок в HTML: когда нужно вставить оформленный контент в письмо или в CMS, принимающую сырой HTML.
  • Обучение Markdown: режим бок о бок делает синтаксис наглядным.

Производительность

Для рендеринга используется парсер Markdown-it с плагином GFM, работающий полностью в браузере. Документы в несколько сотен КБ рендерятся за миллисекунды; очень большие (целая книга в одном файле) могут подтормаживать при вводе, в этом случае разбейте их на главы.

Экспорт

  • Копировать HTML, вы получаете <div> с отрендеренным содержимым и стилевыми классами.
  • Скачать .md, сохраняет исходник.
  • Печать в PDF из диалога печати браузера создаёт оформленную PDF-копию отрендеренного вида.

Часто задаваемые вопросы

GitHub применяет поверх GFM собственный CSS. Разметка HTML должна совпадать; оформление (шрифты, отступы), их. Для точного соответствия используйте переключатель темы «как на GitHub».

Да, если включить математическое расширение, строчные $...$ и блочные $$...$$ отрисовываются через KaTeX. По умолчанию оно отключено, чтобы страница оставалась лёгкой.

Он очищается, безопасные теги вроде <div>, <span>, <table>, <img> проходят, а <script> и встроенные обработчики событий удаляются.

Сотни КБ работают без проблем. Для очень больших файлов отключите рендеринг в реальном времени и рендерите по запросу.

Рендеринг выполняется полностью на стороне клиента, содержимое никуда не отправляется. При обновлении страницы черновики теряются, если только браузер не сохранит состояние формы.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Инструмент доступен на других языках