Интерактивный предпросмотр Markdown и проверка PDF перед печатью

Экспорт в PDF вслепую всегда превращается в утомительную череду попыток. Вы правите ширину таблицы, нажимаете экспорт, открываете внешнюю программу и обнаруживаете, что заголовок остался сиротой на предыдущей странице. Повторение этого цикла для каждого абзаца отнимает много времени.

md2pdf решает эту проблему благодаря двухпанельному режиму реального времени. По мере набора, вставки или импорта текста в правом окне отображается отформатированный результат с применением реальных стилей печати. Шрифты, поля и отступы на экране точно соответствуют геометрии будущего PDF.

В этом руководстве объясняются принципы работы механизма предпросмотра, фильтрация безопасности DOMPurify и проверка верстки перед выводом на печать. Советы по вставке текста собраны в статье Вставка и редактирование Markdown в браузере.

Why live preview matters for print-bound documents

Обычный веб-браузер и движок печати PDF обрабатывают правила CSS по-разному. Веб-страница непрерывно прокручивается вниз, тогда как документ для печати строго ограничен границами листа:

• Ограничения разрыва страниц: таблицы, иллюстрации и листинги кода должны аккуратно помещаться в высоту листа.
• Четкость типографики: иерархия заголовков должна оставаться разборчивой при печати с разрешением 300 DPI.
• Границы печатных полей: элементы, выходящие за поля, обрезаются, а не прокручиваются.

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

How the client-side preview pipeline renders Markdown

Пайплайн рендеринга в md2pdf переводит исходный текст в элементы DOM за доли секунды:

const rawHtml = markdownParser.render(markdownSource);
const cleanHtml = DOMPurify.sanitize(rawHtml, sanitizeConfig);
previewElement.innerHTML = cleanHtml;
applyHeadingAnchors(previewElement);

Парсер строго следует спецификациям CommonMark и GitHub-Flavored Markdown, корректно обрабатывая зачеркивания, ссылки, списки задач и подсветку синтаксиса.

HTML sanitization and safety filters

При вставке стороннего текста из открытых источников безопасность имеет первостепенное значение. Поскольку Markdown допускает использование тегов HTML, существует риск внедрения вредоносных скриптов (XSS).

md2pdf пропускает каждую строку через DOMPurify с жесткими правилами фильтрации:

• Удаление опасных тегов: элементы <script>, <iframe>, <object> и <form> блокируются и вырезаются.
• Очистка атрибутов: любые обработчики событий JavaScript вроде onclick или onload удаляются.
• Контроль протоколов: ссылки с псевдопротоколами javascript: или data:text/html аннулируются.
• Безопасные теги: сохраняется только оформление (<b>, <code>, <table>, <img>) с доверенными атрибутами.

Вся фильтрация происходит в вашем браузере до вставки элементов в окно предпросмотра.

Previewing print themes and theme transitions

В md2pdf доступны четыре темы оформления: Clean, Business, Academic и Dark. Переключение темы мгновенно обновляет классы CSS в панели предпросмотра:

• Clean: нейтральный современный стиль со стандартными шрифтами без засечек.
• Business: строгая верстка для инженерных отчетов с четкими разделителями.
• Academic: классический стиль с засечками, нумерацией и плотным межстрочным интервалом.
• Dark: контрастная темная тема для экрана, которая при печати автоматически становится белой для экономии краски.

Подробный разбор параметров каждого стиля смотрите в руководстве по темам печати md2pdf.

Differences between screen preview and print output

Несмотря на высокую точность предпросмотра, между экраном монитора и бумагой есть небольшие отличия:

• Ширина окна: предпросмотр подстраивается под ширину окна браузера, а печать жестко привязана к форматам A4 или Letter.
• Разделение на страницы: на экране документ выглядит сплошным полотном, тогда как принтер делит его на страницы согласно правилу break-inside: avoid.
• Цветопередача: цвета монитора RGB на бумаге могут казаться чуть темнее из-за свойств тонера или чернил.

Diagnosing preview rendering glitches

• Предпросмотр перестал обновляться: проверьте, нет ли в тексте незакрытых тегов HTML или огромных изображений Data URI.
• Таблицы выходят за край листа: если таблица слишком широкая, изучите руководство по таблицам Markdown в PDF для настройки переноса колонок.
• Не видны изображения: убедитесь, что картинки доступны по протоколу HTTPS, либо используйте импорт README из GitHub для локальных путей.

Проверяйте документы в реальном времени и печатайте качественные PDF-файлы на md2pdf.