Remark и Rehype — это две взаимосвязанные библиотеки для работы с Markdown и HTML в экосистеме JavaScript. Remark ориентирован на синтаксический разбор Markdown и манипуляцию его абстрактного синтаксического дерева (MDAST — Markdown Abstract Syntax Tree). Rehype работает с HTML, создавая и трансформируя HAST (HTML Abstract Syntax Tree). В контексте MDX они часто используются совместно для парсинга Markdown, обработки JSX внутри Markdown и преобразования в HTML или React-компоненты.

Импорты в MDX

MDX расширяет возможности Markdown, позволяя вставлять JSX-компоненты прямо в текст. Для этого необходим корректный синтаксис импортов:

import Button from './Button';
import { Alert, Modal } from './UIComponents';

Особенности импорта:

• Любой импорт выполняется в начале MDX-файла, до основного контента.
• Можно импортировать как default-экспорт, так и именованные экспорты.
• Импорты поддерживают относительные пути (./Button) и абсолютные пути, если проект настроен соответствующим образом.

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

Экспорты в MDX

MDX позволяет экспортировать не только React-компоненты, но и любые данные. Основной синтаксис:

export const metadata = {
  title: 'Пример MDX',
  description: 'Детальное руководство по Remark и Rehype'
};

export function Footer() {
  return ;
}

Важные моменты:

• Экспортированные объекты и функции доступны на уровне MDX-контейнера. Например, metadata можно использовать для генерации заголовков страниц или мета-тегов.
• Экспорт React-компонентов позволяет интегрировать MDX-документы в экосистему React, обеспечивая переиспользуемость UI-элементов.
• Можно комбинировать экспорт данных и компонентов, создавая полностью динамические MDX-файлы.

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

Для использования Remark и Rehype с MDX часто применяются плагины remark-mdx и rehype-mdx. Их задача — корректно парсить MDX-документы, распознавая JSX внутри Markdown.

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

const processor = unified()
  .use(remarkParse)          // Парсинг Markdown
  .use(remarkMdx)            // Поддержка JSX в MDX
  .use(remarkRehype)         // Преобразование MDAST в HAST
  .use(rehypeStringify);     // Преобразование HAST в HTML

const result = processor.processSync('# Заголовок MDX\n');
console.log(String(result));

Принципы работы цепочки:

1. Remark-парсер создает синтаксическое дерево Markdown.
2. remark-mdx обрабатывает встроенные JSX-элементы.
3. remark-rehype преобразует Markdown AST в HTML AST.
4. rehype-плагины (например, rehype-stringify) превращают дерево в финальный HTML-код.

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

Трансформация импортов и экспортов через плагины

Remark и Rehype позволяют создавать кастомные плагины, которые изменяют структуру дерева, включая импорты и экспорты. Например, можно автоматически добавлять импорт компонентов в MDX, если они используются в документе:

function autoImportComponents() {
  return (tree) => {
    const imports = [];
    visit(tree, 'jsx', (node) => {
      if (node.value.includes('

export default function Page() {
  return 
Главная страница
;
}

export const author = 'Иван Иванов';