Первый пример работы

Для работы с Marked необходимо сначала установить её через npm:

npm install marked

После установки библиотеку можно подключить в проекте:

import { marked } from 'marked';

Если используется старый синтаксис CommonJS:

const { marked } = require('marked');

Простейшее использование

Библиотека Marked позволяет конвертировать текст в формате Markdown в HTML. Самый простой пример:

const markdownText = `
# Заголовок первого уровня

Это простой абзац с **жирным текстом** и *курсивом*.

- Элемент списка 1
- Элемент списка 2
`;

const html = marked(markdownText);
console.log(html);

В результате получаем HTML, полностью готовый к вставке на страницу:

<h1>Заголовок первого уровня</h1>
<p>Это простой абзац с <strong>жирным текстом</strong> и <em>курсивом</em>.</p>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>

Разбор ключевых функций

marked.parse()

Метод marked.parse() выполняет ту же функцию, что и вызов marked(markdownText), но его использование более явно указывает на процесс парсинга Markdown в HTML:

const html = marked.parse(markdownText);

marked.parseInline()

Позволяет обработать только встроенные элементы Markdown, такие как жирный, курсив или ссылки, без создания тегов <p> или блоков заголовков:

const inlineHtml = marked.parseInline("Это **жирный** текст");
console.log(inlineHtml); // <p>Это <strong>жирный</strong> текст</p>

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

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

const renderer = new marked.Renderer();

renderer.heading = function (text, level) {
    return `<h${level} class="custom-heading">${text}</h${level}>`;
};

const htmlCustom = marked(markdownText, { renderer });
console.log(htmlCustom);

С помощью собственного рендерера можно изменять HTML-представление заголовков, ссылок, списков, изображений и других элементов Markdown.

Опции безопасности

Для предотвращения XSS-атак и вывода небезопасного HTML Marked предоставляет опцию sanitize или позволяет использовать внешние библиотеки вроде DOMPurify. Современная версия Marked рекомендует фильтровать HTML перед вставкой в DOM:

import DOMPurify from 'dompurify';

const dirtyHtml = marked(markdownText);
const cleanHtml = DOMPurify.sanitize(dirtyHtml);

Асинхронная обработка

Marked поддерживает асинхронное преобразование Markdown, что полезно при работе с кастомными функциями:

const renderer = new marked.Renderer();

renderer.code = async (code, language) => {
    const highlighted = await highlightCodeAsync(code, language);
    return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
};

const htmlAsync = await marked.parse(markdownText, { renderer });

Это позволяет интегрировать подсветку синтаксиса или другие асинхронные операции при генерации HTML.

Примеры встроенных опций

  • gfm: поддержка GitHub Flavored Markdown (по умолчанию true).
  • breaks: перенос строк после каждого перевода строки (true превращает одиночные переводы строки в <br>).
  • headerIds: генерировать id для заголовков, полезно для создания якорей (true по умолчанию).

Пример:

const htmlWithOptions = marked(markdownText, {
    gfm: true,
    breaks: true,
    headerIds: true
});

Выводы первого примера

В первом примере работы с Marked видно, что библиотека:

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

Эти базовые возможности закладывают фундамент для дальнейшей работы с более сложными документами и интеграции с веб-приложениями.

Оглавление