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> и встроенные обработчики событий удаляются.

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

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

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

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 под чистый JavaScript, React или Vue: TypeScript, Babel, CSS или Sass, изображения, HtmlWebpackPlugin, dev-сервер и команда npm install.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Валидатор XSD

Проверьте XML-документ в соответствии с схемой XSD и выявите несоответствия между элементами и их типами, указав точные номера строк.

Проверка телефонных номеров

Проверьте структуру номера по стране и получите регион, тип, форматы E.164, международный, национальный и RFC 3966.

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