Показать Меню
falbar Библиотека katex

Интегралы больше не проблема!

Библиотека katex

Математика и все, что связано с ней, не очень популярная тема в рунете. Если за рубежом профессора и преподаватели ещё ведут свои блоги, есть весьма интересные сайты университетов, то у нас все остановилось на банальном распространении курсовых и контрольных. Однако, креативным людям увлекающимся матаном и понимающим в сайтостроении, сегодняшняя статья будет не безынтересна. А затронем мы в ней вывод формул в браузер, на заметку студентам – полноценный сайт, подготовленный к дипломному проекту с парой-тройкой коментов, будет выглядеть на защите просто убийственно, по сравнению с приевшимися презентациями в PowerPoint.

В годы моей студенческой юности набор математических формул в обычном Word уже вызывал уйму неприятных эмоций, с появлением 2007 версии данная проблема слегка сгладилась. Но вывод математических формул в окне браузера был огромнейшей проблемой! Самое простое решение – показать пользователю картинку с формулой, что и мы и видели на подавляющем числе ресурсов, о каком-либо качестве тут и говорить не приходилось. Кто-то пытался выкладывать формулы в строчном представлении, как мы это делаем для работы в Excel – вариант рабочий, но математические формулы становятся трудны для прочтения и восприятия.

Все, кто работал с JavaScript, наверняка знает, что у языка для математических расчётов и получения различных констант есть объект Math. Так вот, библиотека katex.js поможет визуализировать расчётные данные. Это не единственное решение, поэтому давайте рассмотрим плюсы его использования:

  • Быстрое и синхронное отображение формул;
  • Качественная отрисовка формул;
  • Автономность работы – библиотека не требует других скриптов и расширений;
  • Поддерживает отрисовку и на стороне сервера. Вы можете спокойно отрисовать нужные формулы на сервере, используя NodeJS, а затем отправить страницу браузеру как HTML.

Подключим стили и сам скрипт:

<link href="katex.min.css" type="text/css" rel="stylesheet" />
<script src="katex.min.js" type="text/javascript"></script>

Вот, собственно, и все, что нужно сделать. Стоит только отметить, что в архиве, который прикреплен к статье, находятся также и шрифты, используемые библиотекой. Подключать их не требуется – katex сама будет использовать то, что ей нужно, важно не забывать их скидывать в папку с проектом!

Переходим к использованию плагина и попробуем написать простую формулу:

katex.render("c = \\pm\\sqrt{c^2 + x^3}", element);

/*
	Первые слэшы необходимы для экранирования вторых
	Поэтому на странице демо пишем без них
	c = \pm\sqrt{c^2 + x^3}
*/

Чтобы отрисовать формулу необходимо её передать первым параметром метода render(), а вторым – элемент DOM дерева, куда отображать результат. Список операций, которые доступы для этой библиотеки можно найти на странице из документации по скрипту.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено