KaTeX — библиотека для математических формул

В процессе разработки одного из приложений (как не сложно догадаться — это Кафедра) мне приходилось выкручиваться с рисованием формул средствами HTML. Как только сложность формул достигла более высокой отметки, пришлось прикрутить к проекту библиотеку KaTeX (более производительный аналог MathJax). Как это сделать и несколько нюансов про библиотеку будет ниже.

К слову говоря, никакой библиотеки для формул обычно не требовалось, так как 99% формул требовали лишь:

• верхнего индекса, например x²
• нижнего индекса, как в z₄
• г??ч?с??г? ?????и??
• и немного спецсимволов

Однако в 1% случаев требовалось что-то посложнее, типа тех же дробей, а иногда матриц. Вот ради этого 1% формул я и решил в конце концов привязать к проекту что-то вроде MathJax. Однако руки дошли буквально недавно.

Изначально я очень долго присматривался к технологиям MathML и TeX, пытаясь выбрать сначала среди них, а уже затем подбирать библиотеку. Не утруждая вас столь же длительными рассуждениями сразу скажу, что в итоге остановился на хорошо знакомом мне ранее TeX из-за его краткости и естественности (в некотором смысле).

Библиотека №1 в мире JS+TeX — это уже упомянутый MathJax, однако данная библиотека является настоящим швейцарским ножом, умеющим абсолютно всё и ещё чуть-чуть. Что это даёт из минусов? Размер? Скорость работы? Да, хотя основной вклад в размер вносят входящие в комплект библиотеки шрифты. Что-то мне ещё не понравилось в лицензии библиотеки. Мне послышалось, что она не полностью свободная и я, не став далее углубляться в этот вопрос, пошёл искать что-то иное.

Случайно на Хабре наткнулся на библиотеку KaTeX, которая была заметно шустрей. Сравните быстродействие на картинке.

Картинка взята с официального github библиотеки. Слева пример того, как отрисовывается страница с katex, а справа — MathJax. Что? Картинка не самая объективная, так как взята у заинтересованной стороны? Совершенно верно. Katex не является панацеей и на самом деле производительность может оказаться совсем скромной. Однако она явно выше, чем у конкурента. Берём.

На момент знакомства с библиотекой она была в версии 0.1, открыто заявляла о своей ущербности и скромном функционале, однако обещала развиваться. К моменту её включения в Кафедру версия подросла до 0.5 и её-то я и стал тестировать. Особой ущербности я не заметил к этому моменту, потому прекратил дальнейшие поиски и остановился на ней.

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

Использовать библиотеку нужно так:

// всё использование идёт вокруг одной-единственной функции-рендера:
katex.render("a = b^2 + c^2", element);

// этой функции нужно передать два параметра:
// - формулу в формате tex
// - html-элемент, где она будет отображаться

Более конкретный пример:

Упомяну ещё одну свою хотелку — библиотеку для рисования химических формул и уравнений. Для этого даже существует специальный язык CML, однако с этим справляется и KaTeX. Поэтому здесь я поиски пока прекращу и остановлюсь на том, что есть. Одним словом, данная библиотека позволяет мне и математические формулы рисовать, и химические. Достаточно удобно?

Обращу внимание на некоторые странности (особенности?) в работе. А именно, когда мы набираем формулы, то нужно быть внимательным к фигурным скобкам. Например, при использовании дроби необходимо ставить пробелы, иначе рендер не работает:

% данный пример работать не будет:
\\frac{1}{2}

% но стоит добавить пробелы после открывающих скобок и перед закрывающими, как всё заработает:
\\frac{ 1 }{ 2 }

В свою очередь с матрицами будет всё с точностью до наоборот:

% такой пример работает корректно:
\\begin{vmatrix} -3 & 3 & -4 \\\\ 0 & 3 & 2 \\\\ -3 & 2 & -4 \\end{vmatrix}

% а такой, увы, не работает:
\\begin{ vmatrix } -3 & 3 & -4 \\\\ 0 & 3 & 2 \\\\ -3 & 2 & -4 \\end{ vmatrix }

Отмечу ещё один недостаток, найденный мной в ходе эксплуатации. Библиотека KaTeX умеет отображать не все формулы. Например, такую комбинацию не обрабатывает, оставляя пустое пространство в браузере:

% экспонента, аргументом которой является полином в ещё некоторой степени:
e^{ -2 x^{ 2 } + 4 x^{ -3 } }^{ 10 }

% или даже так:
2^{3}^{4}

% то есть выражение в степени и ещё раз в степени - это не по зубам
% однако, как только мы расставим круглые скобки в нужных местах, то всё заработает

В Кафедре Katex используется дважды, а именно: непосредственно как средство отображения формул, а ещё как ядро математического редактора. Да, теперь вместе с основной программой разрабатывается и ряд вспомогательных инструментов, созданных не для пользователей программы, а для разработчиков. Как выяснилось, не все разработчики являются программистами вообще и не так хорошо знают TeX в частности. Вот для них и разработан простейший математический редактор:

• http://kafedra.sepetov.ru/mt.php

В нём есть возможность и проверить свои навыки в рисовании формул, и протестировать разрабатываемую в данный момент формулу. Так рекомендуется поступать каждый раз перед тем, как вставлять новую формулу в условие задачи. Так разработчику проще отделить ошибки работы своего php-кода от своих же ошибок в tex-коде.