Inline и block формулы

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

В экосистеме Remark и Rehype работа с математическими формулами разделяется на два подхода: inline (встроенные) и block (блочные) формулы. Inline-формулы вставляются непосредственно в текст строки, тогда как block-формулы отделяются как отдельные блоки и обычно отображаются на новой строке с центровкой и специальным стилем.

Inline-формулы обычно обрамляются одним символом доллара $...$ . Block-формулы — двумя символами доллара $$...$$.

Пример Markdown-разметки:

Текст с inline-формулой: $E = mc^2$.
Блочная формула:

$$
\int_a^b f(x) dx
$$

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

Remark — это парсер Markdown, который преобразует Markdown в Abstract Syntax Tree (AST). Для работы с формулами используется плагин remark-math, который добавляет узлы inlineMath и math в AST.

Установка плагина:

npm install remark-math

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

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

const processor = unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkRehype)
  .use(rehypeStringify);

const markdown = `
Это inline-формула: $a^2 + b^2 = c^2$.

$$
\\frac{1}{n} \\sum_{i=1}^n x_i
$$
`;

const html = processor.processSync(markdown).toString();
console.log(html);

После обработки AST будет содержать следующие узлы:

inlineMath — для формул внутри строки.
math — для блочных формул.

Визуализация через Rehype

Rehype отвечает за преобразование AST в HTML. Для корректного рендеринга формул часто используют rehype-katex, который превращает узлы math и inlineMath в HTML с поддержкой KaTeX.

Установка:

npm install rehype-katex katex

Пример конфигурации:

import rehypeKatex from 'rehype-katex';

const processor = unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkRehype)
  .use(rehypeKatex)
  .use(rehypeStringify);

Результатом становится корректно отрендеренный HTML с классами katex и структурой <span class="katex"> для inline и <div class="katex-display"> для блочных формул.

Особенности рендеринга

Inline-формулы не создают новых блоков, интегрируются в абзац.
Block-формулы создают отдельные <div> с центровкой.
Все специальные символы LaTeX экранируются автоматически.
Плагин remark-math не производит визуализацию, а только маркирует AST узлы.
rehype-katex выполняет генерацию HTML и CSS для корректного отображения.

Настройка KaTeX

KaTeX поддерживает разные стили и расширения:

import 'katex/dist/katex.min.css';

Можно передавать опции в rehype-katex:

.use(rehypeKatex, { throwOnError: false, displayMode: true });

throwOnError — отключает выброс исключений при ошибках синтаксиса LaTeX.
displayMode — принудительное отображение формул в блочном стиле.

Примеры комбинированного Markdown

Пусть $f(x) = x^2$. Тогда интеграл

$$
\int_0^1 f(x) dx = \frac{1}{3}
$$

является блочной формулой.

После обработки Remark + Rehype + KaTeX HTML будет иметь:

<p>Пусть <span class="katex">...</span>. Тогда интеграл</p>
<div class="katex-display">...</div>
<p>является блочной формулой.</p>

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

KaTeX поддерживает:

Дроби: \frac{a}{b}
Интегралы: \int, \iint, \iiint
Суммы и произведения: \sum, \prod
Индексы и степени: x_i, x^2
Корни: \sqrt{}

Любые формулы можно комбинировать в inline и block-форматах, а Remark/Rehype корректно создают AST и HTML.