Типичные ошибки

Неправильная установка и импорт

Одной из частых ошибок является некорректная установка пакета или неверный способ импорта. В Node.js установка через npm install marked или yarn add marked является стандартной. После установки в современных проектах с поддержкой модулей ECMAScript правильный импорт выглядит так:

import { marked } from 'marked';

Ошибка часто возникает при использовании require('marked') в средах, где ожидается ESM, либо наоборот — попытка использовать import в проектах без поддержки модулей. Это приводит к ошибкам вида “Cannot use import statement outside a module” или “marked is not a function”.

Игнорирование асинхронного парсинга

Marked поддерживает асинхронный режим работы, особенно при использовании кастомных рендереров с асинхронными операциями. Частая ошибка — вызов парсинга Markdown как синхронного кода в случаях, когда рендереры делают асинхронные операции (например, получение данных с API). Это может привести к некорректной генерации HTML или неожиданным пустым результатам.

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

const html = await marked.parse(markdownString, { async: true });

Попытка выполнить marked.parse(markdownString) без await или без параметра { async: true } приведет к тому, что возвращаемое значение будет промисом, а не HTML-строкой.

Некорректная конфигурация опций

Marked позволяет настраивать поведение через объект опций. Распространенная ошибка — установка неправильного типа значения или опций, которые устарели в последних версиях. Например:

marked.setOptions({
  gfm: true,            // корректно
  breaks: 'true',       // ошибка: должно быть boolean, не строка
  smartLists: true      // устаревшая опция, не влияет на рендеринг
});

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

Несоблюдение безопасности при рендеринге

Marked по умолчанию не фильтрует HTML, вставленный в Markdown. Частая ошибка — непосредственный вывод HTML из Markdown без санитации:

const html = marked(markdownString);
document.body.innerHTML = html; // риск XSS

Правильный подход — использовать DOMPurify или аналогичные библиотеки для очистки HTML перед вставкой в DOM:

import DOMPurify from 'dompurify';

const html = DOMPurify.sanitize(marked(markdownString));
document.body.innerHTML = html;

Игнорирование этого шага часто приводит к уязвимостям типа XSS.

Пренебрежение кастомными рендерерами

Marked позволяет создавать кастомные рендереры для управления отображением заголовков, ссылок, изображений и других элементов. Частая ошибка — попытка заменить методы рендерера без понимания их вызова, что ведет к неправильной генерации HTML или к потере функциональности:

const renderer = {
  heading(text, level) {
    return `<h${level}>${text}</h${level}>`; // упрощенный пример
  }
};

marked.use({ renderer });

Ошибки возникают, когда методы возвращают нестроковые значения, возвращают промисы в синхронном контексте или полностью пропускают обязательные аргументы.

Игнорирование различий между marked.parse и marked.parseInline

Часто разработчики используют marked.parse для рендеринга как блока, так и встроенных элементов. Это приводит к лишним тегам <p> вокруг текста при попытке встроенного рендеринга.

marked.parseInline('**Bold text**'); // корректно для встроенного текста
marked.parse('**Bold text**');       // создаст <p><strong>Bold text</strong></p>

Непонимание этой разницы ведет к неконсистентной разметке, особенно при генерации HTML для UI-компонентов.

Отсутствие обработки ошибок

Markdown, особенно с пользовательским вводом, может содержать неожиданные символы или некорректные конструкции. Игнорирование обработки ошибок при парсинге может приводить к сбоям:

try {
  const html = marked(markdownString);
} catch (error) {
  console.error('Ошибка парсинга Markdown:', error);
}

Без try/catch ошибки в кастомных рендерерах или при некорректных строках Markdown могут привести к падению всего приложения.

Проблемы с версиями и зависимостями

Marked активно развивается, и методы или опции могут меняться. Распространенная ошибка — использование устаревших примеров из интернета, что приводит к несовместимости с текущей версией. Всегда необходимо сверяться с документацией для конкретной версии пакета.

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

Оглавление