Отличия от классического Markdown

Marked — это современная библиотека для парсинга Markdown в JavaScript, которая отличается высокой производительностью и гибкостью по сравнению с классическим стандартом Markdown. Несмотря на то, что синтаксис Marked в большинстве случаев совместим с оригинальным Markdown, существуют ключевые особенности и расширения, которые делают его более мощным инструментом для веб-разработки и серверных приложений.

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

1. GitHub Flavored Markdown (GFM) Marked по умолчанию поддерживает GFM, который включает дополнительные возможности по сравнению с классическим Markdown:

  • Таблицы

    | Столбец 1 | Столбец 2 |
|-----------|-----------|
| Данные 1  | Данные 2  |

    В классическом Markdown таблицы не являются частью стандарта и требуют расширений.

  • Зачёркнутый текст

    ~~Устаревший текст~~

    В обычном Markdown такой возможности нет.

  • Автоматические ссылки Marked автоматически преобразует URL в кликабельные ссылки:

    https://example.com

Настраиваемый рендеринг

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

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

import { marked } from 'marked';

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

marked.use({ renderer });

const html = marked('# Заголовок с кастомным стилем');

Преимущества кастомного рендеринга:

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

Безопасность и фильтрация HTML

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

Настройка безопасного рендеринга:

marked.setOptions({
  mangle: false,   // Отключает автоматическое преобразование email
  headerIds: true, // Генерация id для заголовков
  sanitizer: (html) => html.replace(/<script.*?>.*?<\/script>/gi, '')
});

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

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

Пример асинхронного парсинга:

import { marked } from 'marked';

async function renderMarkdown(mdText) {
  const html = await marked.parse(mdText);
  return html;
}

Асинхронный подход позволяет:

  • Обрабатывать большие файлы Markdown без блокировки основного потока.
  • Встраивать динамическое содержимое, например, комментарии или цитаты из API.
  • Повышать производительность веб-приложений.

Гибкая настройка лексера и токенизации

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

  • Возможность расширять синтаксис новыми элементами.
  • Контроль над порядком и приоритетом правил парсинга.
  • Генерация промежуточного представления Markdown в виде токенов, что облегчает интеграцию с системами анализа текста.

Пример получения токенов:

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

Поддержка плагинов и расширений

Marked легко интегрируется с внешними плагинами и библиотеками для добавления функциональности:

  • Поддержка подсветки кода через highlight.js или Prism.js.
  • Расширение синтаксиса для эмодзи, математических формул или кастомных блоков.
  • Возможность писать собственные правила парсинга и рендеринга.

Итог различий с классическим Markdown

  • Расширенный синтаксис: таблицы, зачёркнутый текст, GFM-ссылки.
  • Кастомный рендеринг: управление HTML-выводом и атрибутами.
  • Безопасность: фильтрация потенциально опасного HTML.
  • Асинхронность: поддержка промисов и интеграция с динамическим контентом.
  • Лексер и токенизация: доступ к внутренней структуре Markdown.
  • Плагинная архитектура: простое добавление новых функций и расширений.

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

Оглавление