Довольно часто нужно вывести на сайт какое-то математическое выражение. И все ничего пока это просто дробь и многочлен, но с интегралами и прочим восьмиэтажным добром приходит тоска. Делать гору картинок очень не удобно, тем более что есть вариант по интереснее.
Что если хранить формулы в TeX нотации, а пользователю предлагать обрисованный JavaScript`ом вариант?
Этим и занимается KaTeX — js библиотека для рендеринга математических выражений.
Пользоваться ей очень просто. Качаем с github файлы katex.min.css, katex.min.js и каталог с шрифтами.
Добавляем на страницу.
<script src="katex.min.js" type="text/javascript"></script> <link href="katex.min.css" rel="stylesheet" type="text/css">
Размещаем на страницу парочку тегов pre с классом katex. Можно и иначе, это мой подход.
<pre class="katex">f(x) = \int_{-\infty}^\infty \hat f(\xi),e^{2 \pi i \xi x}\,d\xi</pre> <pre class="katex"> f(x) = \sum \dot f(\lambda) e^{2 \pi i \mu x}\,d\Omega </pre>
И в конец страницы JavaScript, который заменяет код внутри тегов pre с классом katex отрендеренный html код.
Смотреть пример.