Горячие клавиши

Для работы с библиотекой Marked необходимо сначала установить её через npm или подключить через CDN. В Node.js установка производится командой:

npm install marked

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

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

Для браузера можно использовать CDN:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

В этом случае объект marked становится доступен глобально.

Основное использование

Marked преобразует Markdown в HTML. Базовое использование выглядит так:

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

Текст с **жирным** и *курсивным* форматированием.

- Пункт 1
- Пункт 2
`;

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

Результатом будет корректный HTML с соответствующей структурой:

<h1>Заголовок первого уровня</h1>
<p>Текст с <strong>жирным</strong> и <em>курсивным</em> форматированием.</p>
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

Настройка опций

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

Основные опции:

  • gfm — включает поддержку GitHub Flavored Markdown (по умолчанию true).
  • breaks — переводит переносы строк в <br> (по умолчанию false).
  • sanitize — отключает выполнение HTML (устаревшая, лучше использовать DOMPurify).
  • headerIds — добавляет id к заголовкам (по умолчанию true).
  • mangle — маскирует email-адреса (по умолчанию true).

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

marked.setOptions({
  gfm: true,
  breaks: true,
  headerIds: false
});

const html = marked('# Заголовок\nТекст с переносом\nновой строки.');

Использование рендереров

Renderer позволяет полностью контролировать преобразование Markdown в HTML. Создание кастомного рендерера выглядит так:

const renderer = new marked.Renderer();

renderer.link = function(href, title, text) {
  return `<a href="${href}" target="_blank" title="${title || ''}">${text}</a>`;
};

const html = marked('[Google](https://google.com)', { renderer });

В этом примере все ссылки будут открываться в новом окне, независимо от исходного Markdown.

Лексический разбор и токены

Marked поддерживает работу на уровне лексического анализа с использованием метода lexer. Это полезно для сложной обработки Markdown перед рендерингом:

const tokens = marked.lexer('# Заголовок\nТекст');
console.log(tokens);

Результат представляет собой массив объектов-токенов, например:

[
  { "type": "heading", "depth": 1, "text": "Заголовок" },
  { "type": "paragraph", "text": "Текст" }
]

Эти токены можно модифицировать или фильтровать перед преобразованием в HTML.

Парсинг и безопасный вывод

Для защиты от XSS рекомендуется комбинировать Marked с библиотеками типа DOMPurify:

const dirtyHtml = marked('Пример с <script>alert(1)</script>');
const cleanHtml = DOMPurify.sanitize(dirtyHtml);

Это предотвращает внедрение опасного кода в браузер.

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

С версии 4 Marked поддерживает асинхронные парсеры, что позволяет использовать промисы для рендеринга:

(async () => {
  const html = await marked.parse('# Асинхронный заголовок');
  console.log(html);
})();

Асинхронность особенно полезна при работе с кастомными асинхронными рендерерами, например, для загрузки данных по ссылкам или изображений.

Горячие клавиши и интеграция с редакторами

В контексте Markdown-редакторов горячие клавиши помогают ускорить форматирование текста:

  • Ctrl + B — жирный текст. Добавляет ** вокруг выделенного фрагмента.
  • Ctrl + I — курсив. Добавляет * вокруг выделенного текста.
  • Ctrl + K — вставка ссылки. Формирует [текст](url).
  • Ctrl + Shift + L — маркированный список. Добавляет - перед каждой строкой.
  • Ctrl + Shift + O — нумерованный список. Преобразует строки в 1., 2., …
  • Ctrl + Shift + C — кодовый блок. Добавляет тройные обратные апострофы ```.

Интеграция горячих клавиш с Marked обычно осуществляется через прослушку событий клавиатуры и динамическую вставку Markdown в текстовое поле, после чего вызывается marked() для обновления HTML.

Пример обработчика Ctrl + B:

textarea.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'b') {
    e.preventDefault();
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = textarea.value.slice(start, end);
    textarea.setRangeText(`**${selectedText}**`, start, end, 'end');
    updatePreview();
  }
});

Функция updatePreview() может просто вызывать marked() и подставлять HTML в область предпросмотра.

Поддержка расширений

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

  • Custom Tokens — новые типы синтаксиса Markdown.
  • Inline Hooks — изменение поведения при рендеринге отдельных элементов.
  • Smart Lists — улучшенная обработка списков с вложенностью.

Расширения создаются через собственные функции-обработчики, которые подключаются через опцию extensions.

Пример создания простого расширения для подсветки TODO:

const todoExtension = {
  name: 'todo',
  level: 'inline',
  start(src) { return src.indexOf('[ ]'); },
  tokenizer(src) {
    const match = /^\[ \]/.exec(src);
    if (match) return { type: 'todo', raw: match[0] };
  },
  renderer(token) {
    return '<input type="checkbox">';
  }
};

marked.use({ extensions: [todoExtension] });

После этого в Markdown [ ] будет преобразовываться в HTML-чекбокс.

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

  • Для больших текстов использовать lexer + parser, чтобы оптимизировать производительность.
  • Всегда фильтровать HTML через безопасный санитайзер.
  • Для редакторов с горячими клавишами реализовать единый обработчик вставки Markdown и обновления предпросмотра.
  • Использовать кастомные рендереры для контроля внешнего вида HTML и добавления атрибутов (например, target="_blank" для ссылок).
  • Поддержка асинхронного рендеринга позволяет интегрировать внешние API (например, автозаполнение ссылок или изображений) без блокировки интерфейса.

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

Оглавление