Математические формулы

Библиотека Markdown-it предоставляет мощный и гибкий механизм для преобразования текста Markdown в HTML. Для работы с математическими формулами чаще всего используется интеграция с расширениями, поддерживающими LaTeX-синтаксис, такими как markdown-it-katex или markdown-it-mathjax. Они позволяют вставлять как строчные, так и блочные формулы, сохраняя точность и читабельность математического текста.

Подключение и настройка Markdown-it для формул

Для базового использования необходимо установить Markdown-it и выбранное расширение для формул:

npm install markdown-it markdown-it-katex

Далее создается экземпляр Markdown-it и подключается плагин:

const MarkdownIt = require('markdown-it');
const markdownItKatex = require('markdown-it-katex');

const md = new MarkdownIt();
md.use(markdownItKatex);

  • markdown-it-katex автоматически распознает синтаксис формул:

    • Строчные формулы: $...$
    • Блочные формулы: $$...$$

  • Важно: любые символы внутри $...$ интерпретируются как LaTeX, поэтому нельзя использовать $ без экранирования внутри текста.

Синтаксис математических выражений

Строчные формулы

Строчные формулы используются внутри текста. Они оформляются через одинарные знаки доллара:

Эта формула $a^2 + b^2 = c^2$ встроена в текст.

Результат преобразуется в HTML примерно так:

<p>Эта формула <span class="katex">a^2 + b^2 = c^2</span> встроена в текст.</p>

Особенности:

  • Поддерживаются стандартные команды LaTeX (\frac, \sqrt, \sum, \int и др.).
  • Можно комбинировать несколько строчных формул в одном абзаце.

Блочные формулы

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

$$
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

В HTML это преобразуется в:

<p class="katex-display">
  <span class="katex">...</span>
</p>

Особенности:

  • Блочные формулы удобны для длинных выражений, интегралов, сумм и матриц.
  • Поддерживают многострочные выражения через \\.

Расширенные возможности

Настройка рендеринга

Markdown-it позволяет переопределять рендеринг элементов формул через функцию:

md.renderer.rules.math_inline = function(tokens, idx) {
  return `<span class="custom-math">${tokens[idx].content}</span>`;
};

Это полезно для:

  • Кастомизации стилей формул
  • Добавления интерактивных элементов
  • Интеграции с другими JS-библиотеками визуализации

Использование с MathJax

Для динамической подгрузки формул на фронтенде можно подключать MathJax. Markdown-it будет генерировать текст LaTeX, а MathJax преобразует его в SVG/HTML:

md.use(require('markdown-it-mathjax'));

Это дает возможность:

  • Поддерживать сложные формулы
  • Использовать интерактивное масштабирование
  • Работать с нумерацией уравнений

Советы по интеграции

  1. Экранирование символов: Символ $ внутри текста необходимо экранировать (\$), чтобы не нарушить рендеринг.

  2. Безопасность: Markdown-it по умолчанию безопасен для HTML, но плагины формул могут генерировать raw HTML. Следует использовать опцию html: true осторожно:

    const md = new MarkdownIt({ html: true });

  3. Стилизация: KaTeX автоматически подключает CSS для красивого отображения. Необходимо подключить:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css">

  4. Производительность: Блочные формулы могут быть тяжелыми для рендеринга на страницах с большим количеством уравнений. Рекомендуется кешировать HTML или использовать SSR.

Примеры сложных формул

  • Матрицы:
$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$
  • Интегралы и суммы:
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
  • Дроби и корни:
Строчная формула: $\frac{1}{\sqrt{2}}$  
Блочная формула: 
$$
\frac{d}{dx} \left( e^{x^2} \right) = 2x e^{x^2}
$$

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

Оглавление