Математика и все, что связано с ней, не очень популярная тема в рунете. Если за рубежом профессора и преподаватели ещё ведут свои блоги, есть весьма интересные сайты университетов, то у нас все остановилось на банальном распространении курсовых и контрольных. Однако, креативным людям увлекающимся матаном и понимающим в сайтостроении, сегодняшняя статья будет не безынтересна. А затронем мы в ней вывод формул в браузер, на заметку студентам – полноценный сайт, подготовленный к дипломному проекту с парой-тройкой коментов, будет выглядеть на защите просто убийственно, по сравнению с приевшимися презентациями в PowerPoint.
В годы моей студенческой юности набор математических формул в обычном word уже вызывал уйму неприятных эмоций, с появлением 2007 версии данная проблема слегка сгладилась. Но вывод математических формул в окне браузера был огромнейшей проблемой! Самое простое решение – показать пользователю картинку с формулой, что и мы и видели на подавляющем числе ресурсов, о каком-либо качестве тут и говорить не приходилось. Кто-то пытался выкладывать формулы в строчном представлении, как мы это делаем для работы в excel – вариант рабочий, но математические формулы становятся трудны для прочтения и восприятия.
Все, кто работал с JavaScript, наверняка знает, что у языка для математических расчётов и получения различных констант есть объект Math. Так вот, библиотека katex поможет визуализировать расчётные данные. Это не единственное решение, поэтому давайте рассмотрим плюсы его использования:
- Быстрое и синхронное отображение формул;
- Качественная отрисовка формул;
- Автономность работы – библиотека не требует других скриптов и расширений;
- Поддерживает отрисовку и на стороне сервера. Вы можете спокойно отрисовать нужные формулы на сервере, используя NodeJS, а затем отправить страницу браузеру как HTML.
Подключим стили и сам скрипт:
<link href="katex.min.css" type="text/css" rel="stylesheet" />
<script src="katex.min.js" type="text/javascript"></script>
Вот, собственно, и все, что нужно сделать. Стоит только отметить, что в архиве, который прикреплен к статье, находятся также и шрифты, используемые библиотекой. Подключать их не требуется – katex сама будет использовать то, что ей нужно, важно не забывать их скидывать в папку с проектом!
Переходим к использованию плагина и попробуем написать простую формулу в HTML:
katex.render("c = \\pm\\sqrt{c^2 + x^3}", element);
/*
Первые слэшы необходимы для экранирования вторых
Поэтому на странице демо пишем без них
c = \pm\sqrt{c^2 + x^3}
*/
Чтобы отрисовать формулу необходимо её передать первым параметром метода render(), а вторым – элемент DOM дерева, куда отображать результат. Список операций, которые доступы для этой библиотеки можно найти на странице из документации по скрипту.