Различия в парсинге

Библиотека Marked является мощным инструментом для преобразования Markdown в HTML. Она обеспечивает быстрый и гибкий парсинг, позволяя управлять поведением обработки Markdown на уровне токенов и рендеринга.

Пример базового использования:

import { marked } from 'marked';

const markdownString = "# Заголовок\n\nТекст с **жирным** выделением.";
const html = marked(markdownString);
console.log(html);

В результате парсинга получится корректный HTML, где # Заголовок преобразуется в <h1>, а **жирным** в <strong>.

Различия между inline и block-парсингом

Marked разделяет Markdown на блоки (block-level elements) и инлайн-элементы (inline-level elements).

  • Block-парсинг отвечает за обработку структурных элементов: заголовки, списки, цитаты, кодовые блоки.
  • Inline-парсинг применяется к тексту внутри блоков: ссылки, изображения, выделения, строчные коды.

Пример различия:

const inlineExample = marked.parseInline("Текст с [ссылкой](https://example.com)");
console.log(inlineExample); 
// Выдаст: Текст с <a href="https://example.com">ссылкой</a>

parseInline обрабатывает только содержимое строки, не затрагивая блочные элементы.

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

Marked позволяет создавать кастомные рендереры через класс Renderer или объект с функциями. Это даёт полный контроль над тем, как преобразуются Markdown-теги в HTML.

const renderer = {
  heading(text, level) {
    return `<h${level} class="custom-heading">${text}</h${level}>`;
  },
  link(href, title, text) {
    return `<a href="${href}" title="${title || ''}" target="_blank">${text}</a>`;
  }
};

const htmlCustom = marked("## Пример заголовка\n[Ссылка](https://example.com)", { renderer });
console.log(htmlCustom);

Особенности:

  • heading – позволяет добавить классы или атрибуты к заголовкам любого уровня.
  • link – можно настроить открытие ссылок в новом окне, добавлять атрибуты rel и т.д.

Опции парсера и их влияние

Marked поддерживает множество настроек, которые напрямую влияют на поведение парсинга:

  • gfm (true/false) – включает или отключает расширенный синтаксис GitHub Flavored Markdown (таблицы, чекбоксы).
  • breaks (true/false) – управление переносами строк: превращает перенос строки в <br>.
  • sanitize (устаревшая) – удаляет HTML-теги; современный подход – использовать DOMPurify или аналог.
  • mangle (true/false) – шифрует e-mail ссылки для защиты от спама.

Пример использования:

const markdownGFM = `
- [x] Сделано
- [ ] В процессе
`;

const htmlGFM = marked(markdownGFM, { gfm: true });
console.log(htmlGFM);

Включение gfm: true превращает чекбоксы в интерактивные элементы <input type="checkbox">.

Работа с токенами

Marked позволяет получать токены Markdown перед рендерингом, что даёт возможность тонко анализировать и модифицировать содержимое.

const tokens = marked.lexer("# Заголовок\nТекст с **жирным** выделением.");
console.log(tokens);

Токены представляют собой объекты с ключами:

  • type – тип элемента (heading, paragraph, list).
  • depth – уровень заголовка.
  • text – содержимое элемента.
  • tokens – вложенные inline-токены для блока.

Применение токенов удобно для создания собственных рендереров или анализа Markdown перед генерацией HTML.

Различия в парсинге HTML внутри Markdown

Marked по умолчанию может обрабатывать встроенный HTML. Настройки:

  • headerIds (true/false) – генерация id для заголовков, полезно при навигации.
  • mangle – кодирует email для безопасности.
  • smartLists – корректная работа вложенных списков.
  • smartypants – автоматическая замена кавычек и тире на типографские аналоги.

Пример:

const htmlWithHtml = marked("<div>Прямой HTML</div>\n\n# Заголовок", { smartypants: true });
console.log(htmlWithHtml);

HTML-теги сохраняются в output, при этом Markdown-преобразования применяются корректно.

Настройка Highlight для кода

Поддержка подсветки синтаксиса возможна через опцию highlight, которая принимает функцию.

import hljs from 'highlight.js';

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlight(code, { language: lang }).value;
  }
});

const codeMarkdown = "```js\nconsole.log('Hello');\n```";
console.log(marked(codeMarkdown));

Особенности:

  • Поддержка любых языков Highlight.js.
  • Можно возвращать HTML с кастомными стилями.
  • Позволяет объединять GFM, инлайновый парсинг и подсветку.

Подытоживание различий

  1. Block vs Inline – базовое разделение элементов.
  2. Lexer/Tokens vs Renderer – раздельное управление разбором и выводом.
  3. Опции парсинга – глобально изменяют поведение Markdown (GFM, breaks, smartypants).
  4. HTML и кастомные функции – контроль над встроенным HTML и безопасностью.
  5. Подсветка кода – интеграция с внешними библиотеками без нарушения структуры документа.

Эта система позволяет использовать Marked не просто как конвертер Markdown, а как полноценный инструмент для построения кастомных Markdown-рендереров с точным контролем поведения на каждом уровне парсинга.

Оглавление