Что такое Remark и Rehype

Remark и Rehype представляют собой мощные инструменты для обработки текстового контента в экосистеме JavaScript, ориентированные на работу с Markdown и HTML. Они используют единый подход к парсингу и трансформации документов, позволяя создавать гибкие цепочки обработки данных.

  • Remark — это парсер и процессор для Markdown. Он преобразует текст Markdown в абстрактное синтаксическое дерево (MDAST, Markdown Abstract Syntax Tree), которое можно модифицировать с помощью плагинов.
  • Rehype — это аналог для HTML. Он парсит HTML в дерево HAST (Hypertext Abstract Syntax Tree), предоставляя возможность анализа и трансформации содержимого HTML-документов.

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

Работа с деревьями синтаксиса

MDAST (Markdown AST)

Дерево MDAST является промежуточным представлением документа Markdown. Основные элементы MDAST:

  • Root — корневой узел документа, содержит массив дочерних узлов.
  • Paragraph — параграф текста.
  • Heading — заголовки разных уровней.
  • List / ListItem — списки и элементы списка.
  • Code — блоки кода с возможной информацией о языке.

Каждый узел имеет тип (type) и свойства (data, value, children), что делает его удобным для программного анализа и модификации содержимого Markdown.

HAST (HTML AST)

HAST используется для представления HTML-документов. Основные элементы:

  • element — HTML-теги с атрибутами и дочерними узлами.
  • text — текстовые узлы.
  • comment — комментарии HTML.
  • doctype — информация о типе документа.

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

Плагины и обработка контента

Remark и Rehype поддерживают плагины, которые позволяют расширять функциональность без изменения основного кода библиотеки. Плагины бывают двух типов:

  1. Простые функции-плагины: модифицируют AST напрямую. Пример — добавление идентификаторов заголовкам или исправление орфографии.
  2. Плагины с опциями: позволяют задавать конфигурацию при подключении. Например, генерация таблицы содержания или преобразование ссылок в Markdown.

Принцип работы плагинов:

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const processor = unified()
  .use(remarkParse)       // парсинг Markdown
  .use(remarkRehype)      // преобразование в HAST
  .use(rehypeStringify);  // генерация HTML

const markdown = '# Заголовок\n\nТекст параграфа';
const html = processor.processSync(markdown).toString();

Этот пример демонстрирует цепочку обработки: Markdown → AST → HTML.

Интеграция Remark и Rehype

Часто требуется объединять возможности обеих библиотек для комплексной обработки контента. Remark используется для работы с исходным Markdown, а Rehype — для манипуляций HTML после конверсии. Связка выглядит следующим образом:

  1. Парсинг Markdown с помощью Remark.
  2. Трансформация MDAST в HAST через remark-rehype.
  3. Обработка HTML-дерева с помощью Rehype-плагинов.
  4. Генерация итогового HTML.

Такой подход позволяет создавать сложные преобразования, например, автогенерацию ссылок, добавление классов CSS к элементам или обогащение кода подсветкой синтаксиса.

Основные преимущества подхода AST

  • Универсальность: одинаковый подход для Markdown и HTML.
  • Масштабируемость: легко добавлять новые плагины и расширения.
  • Прозрачность обработки: доступ к дереву документа позволяет точно контролировать структуру и содержимое.
  • Согласованность данных: преобразования происходят через AST, что снижает вероятность ошибок при ручной обработке текста или HTML.

Типичные сценарии использования

  1. Статические генераторы сайтов: обработка Markdown-файлов в HTML с кастомной структурой.
  2. Редакторы контента: преобразование текста, подсветка синтаксиса, генерация ссылок.
  3. Инструменты для документации: автоматическое создание оглавлений, интеграция с API.
  4. SEO и оптимизация HTML: добавление атрибутов, очистка или нормализация HTML перед публикацией.

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

Оглавление