Просмотр Markdown

Редактор

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

0 words 0 chars 0 min read

Что такое «Просмотр Markdown»?

Бесплатный браузерный просмотрщик GitHub Flavored Markdown в реальном времени — с подсветкой синтаксиса (highlight.js), рендерингом математики через KaTeX, диаграммами Mermaid, очищенным HTML-выводом и экспортом в .html или .md одним кликом. Ничего не загружается; каждое нажатие клавиши рендерится в браузере с markdown-it и DOMPurify.

Как сделать живой предпросмотр GitHub Flavored Markdown онлайн с математикой, диаграммами и подсветкой синтаксиса?

Вводите или вставляйте markdown слева — отрендеренный HTML мгновенно появляется справа. Просмотрщик поддерживает таблицы, блоки кода с highlight.js, KaTeX-математику ($E = mc^2$ строчная или блочная), диаграммы Mermaid (graph, sequenceDiagram и др.), task-листы, цитаты и многое другое. Вывод очищается через DOMPurify — безопасно копировать в email, блог или статический сайт. Инструмент полностью работает в браузере — ничего не загружается.

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

Живой GFM-рендеринг

markdown-it с linkify, typographer и таблицами даёт мгновенный GitHub Flavored Markdown — заголовки, списки, код, таблицы, цитаты, сноски; небезопасный inline-HTML экранируется.

highlight.js для кода

Fenced-блоки кода получают цвета синтаксиса из highlight.js для 190+ языков — с автоопределением, если язык не указан.

KaTeX строчная + блочная математика

Математику оборачивайте одним или двумя долларами ($E = mc^2$ или $\int_0^1 f(x) dx$). KaTeX рендерит точный, быстрый LaTeX прямо в браузере — без обращений к MathJax.

Диаграммы Mermaid (отложенная загрузка)

Используйте ```mermaid fenced-блоки для блок-схем, диаграмм последовательности, gantt и др. 3-МБ Mermaid bundle грузится только при реальном использовании диаграммы.

Три режима просмотра

Переключайтесь одним кликом между Разделить, Только редактор и Только предпросмотр. Полноэкранный режим скрывает отвлекающее для сосредоточенного письма.

Очищенный вывод + экспорт

Вывод проходит через DOMPurify (с allowlist SVG/MathML) перед вставкой — безопасно встраивать. Копируйте отрендеренный HTML, копируйте исходный markdown или скачайте оба как отдельный файл.

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

Введите или вставьте markdown в левую панель. Предпросмотр справа обновляется живо, с задержкой 80 мс. На панели инструментов вставляйте жирный, курсив, заголовок, ссылку, код, цитату, список и таблицу, или нажмите «Пример» для загрузки демонстрационного документа. Переключайте режимы (Разделить / Редактор / Предпросмотр), полный экран, экспортируйте результат как HTML или .md. Ничего не загружается — markdown-it, DOMPurify, highlight.js, KaTeX и Mermaid работают в браузере.

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

Загружается ли мой markdown куда-то?

Нет. Весь просмотрщик работает в браузере с markdown-it (парсер), DOMPurify (санитайзер), highlight.js (цвета кода), KaTeX (математика) и Mermaid (диаграммы). Вставленный текст не покидает устройство — безопасно для приватных черновиков и неопубликованных постов.

Какой диалект markdown поддерживается?

GitHub Flavored Markdown (CommonMark + таблицы, fenced code, автоссылки, strikethrough, task-листы) плюс KaTeX-синтаксис и диаграммы Mermaid в fenced ```mermaid блоках. URL автоматически линкуются, применяются типографские замены (em-dash, умные кавычки).

Безопасен ли отрендеренный HTML для встраивания?

Да. Вывод очищается через DOMPurify с allowlist для KaTeX/Mermaid SVG-вывода — атаки XSS через специально подготовленный markdown блокируются. Сырой HTML в источнике экранируется, не выполняется.

Каков размер загружаемых библиотек?

markdown-it (~124 КБ), DOMPurify (~27 КБ), highlight.js (~127 КБ) и KaTeX (~271 КБ + 24 КБ CSS) загружаются при первом визите. Mermaid (3,3 МБ) загружается только при использовании диаграммы — начальная страница остаётся быстрой.

Можно ли экспортировать отрендеренный HTML?

Да. «Копировать HTML» помещает разметку в буфер обмена, «Скачать HTML» сохраняет автономный документ, «Копировать Markdown» / «Скачать .md» сохраняет источник.

Создан командой Tooljar с markdown-it (v14+), DOMPurify, highlight.js (v11+), KaTeX (v0.16+) и Mermaid (v11+) — всё в vanilla JavaScript, ноль аналитики на ввод в редакторе; инструмент работает офлайн после кэширования и уважает приватность черновиков.