Рендеринг жирного текста

Библиотека Marked предоставляет мощный инструмент для преобразования Markdown в HTML в среде JavaScript. Одной из ключевых возможностей является поддержка различных типов текста, включая жирный, который обозначается в Markdown двойными звёздочками (**текст**) или двойными подчёркиваниями (__текст__).

Синтаксис жирного текста

В Markdown жирный текст оформляется следующим образом:

**Это жирный текст**
__И это тоже жирный текст__

При обработке Marked такие конструкции преобразуются в HTML-теги <strong>:

<strong>Это жирный текст</strong>
<strong>И это тоже жирный текст</strong>

Ключевой момент: Marked строго следует стандарту CommonMark, поэтому правильное закрытие символов ** или __ обязательно. Несовпадение количества символов приведёт к тому, что текст останется обычным.

Использование функции marked.parse

Базовый способ рендеринга Markdown в HTML через Marked выглядит следующим образом:

import { marked } from 'marked';

const markdownText = "**Жирный текст** и обычный текст";
const html = marked.parse(markdownText);

console.log(html);
// Вывод: <p><strong>Жирный текст</strong> и обычный текст</p>

Объяснение работы:

  • marked.parse принимает строку Markdown и возвращает HTML.
  • Все жирные элементы автоматически оборачиваются в тег <strong>.
  • Остальные элементы Markdown, такие как курсив, заголовки и списки, также корректно преобразуются.

Настройка рендерера

Marked позволяет полностью настраивать процесс рендеринга через объект Renderer. Для жирного текста можно задать собственное оформление:

import { marked } from 'marked';

const renderer = new marked.Renderer();

renderer.strong = (text) => {
  return `<b class="custom-bold">${text}</b>`;
};

const markdownText = "**Кастомный жирный текст**";
const html = marked.parse(markdownText, { renderer });

console.log(html);
// Вывод: <p><b class="custom-bold">Кастомный жирный текст</b></p>

Особенности подхода:

  • Функция renderer.strong вызывается для каждого блока жирного текста.
  • Можно добавлять классы, атрибуты, оборачивать текст в дополнительные теги.
  • Такой подход позволяет интегрировать Markdown в сложные веб-интерфейсы с уникальным стилем.

Интеграция с безопасностью HTML

При работе с Markdown важно учитывать XSS-атаки. Marked предоставляет опцию sanitize, хотя начиная с последних версий рекомендуется использовать отдельные библиотеки для очистки HTML, например, DOMPurify.

import { marked } from 'marked';
import DOMPurify from 'dompurify';

const markdownText = "**Жирный текст** с потенциальным <script>alert('xss')</script>";
const dirtyHtml = marked.parse(markdownText);
const cleanHtml = DOMPurify.sanitize(dirtyHtml);

console.log(cleanHtml);
// Вывод: <p><strong>Жирный текст</strong> с потенциальным </p>

Важный момент: даже простой жирный текст может находиться рядом с опасными элементами. Обязательная очистка HTML защищает приложение.

Продвинутые приёмы

  1. Вложенный текст: жирный текст может комбинироваться с курсивом или ссылками:
**Жирный и _курсивный_ текст**

Результат с Marked:

<p><strong>Жирный и <em>курсивный</em> текст</strong></p>
  1. Использование HTML внутри Markdown: Marked поддерживает встроенный HTML, что позволяет смешивать <strong> и Markdown:
**Жирный <span class="highlight">текст</span>**

Будет корректно преобразовано в HTML, сохраняя стили span внутри жирного текста.

  1. Кастомные токены: с помощью парсера можно расширять синтаксис и определять собственные правила для рендеринга жирного текста, включая специфические символы или цветовые схемы.

Практические рекомендации

  • Использовать ** для жирного текста, чтобы сохранить совместимость с CommonMark.
  • Для визуального выделения в сложных интерфейсах лучше создавать кастомный renderer, а не изменять HTML вручную.
  • Всегда очищать HTML перед вставкой в DOM, особенно если Markdown поступает от пользователей.
  • Тестировать вложенные конструкции (курсив внутри жирного, ссылки внутри жирного) для корректного отображения.

Marked предоставляет гибкую систему рендеринга жирного текста, позволяя создавать как стандартный HTML <strong>, так и полностью кастомизированные решения с безопасной обработкой.

Оглавление