Понедельник, 18 января 2016 09:59

KaTeX – инструмент для публикации математических формул

Оцените материал

(7 голосов)

Публикация математических формул, особенно сложных, на веб-странице может стать «головной болью» для разработчика. Библиотека KaTeX может значительно облегчить этот процесс. Она не имеет зависимостей от других библиотек, зато имеет довольно простой API. Еще одним преимуществом KaTeX – является высокая скорость работы во всех современных браузерах.

Если быть точнее, то эта библиотека будет корректно работать в следующих браузерах: Chrome, Safari, Firefox, Opera и IE 8 - IE 11. s

Katex

Результат работы KaTeX будет выглядеть одинаково, независимо от того, где происходит преобразование. Поэтому вы без проблем сможете обработать выражение на сервере с помощью Node.js, а результат отправить в браузер в виде HTML-кода.

У библиотеки есть страница на GitHub, на которой размещена небольшая инструкция по работе с этим инструментом. Также там присутствуют ссылки для загрузки файлов KaTeX.

Давайте попробуем этот инструмент в действии: разместим на веб-странице несколько формул.

Сначала скачаем библиотеку. Архив состоит из 2 JS-файлов (katex/katex.min.js, katex/contrib/auto-render.min.js), файла стилей (katex/katex.min.css) и набора шрифтов, собранных в папке fonts.
Чтобы работать с библиотекой на клиентской стороне используйте 2 файла: katex.min.js и katex.min.css. Файл auto-render.min.js является расширением библиотеки и служит для автоматического преобразования всех выражений, размещенных на странице или в каком-либо HTML-элементе.

HTML

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

Далее добавим на страницу HTML-элемент, в котором будет отображаться формула и присвоим ему идентификатор.
HTML
```
 <body>        
   <div id="math"></div>             
 </body>
```

Теперь можно написать небольшой скрипт для преобразования формулы и вставить его в раздел <head> нашей страницы. Выражение, которое будет преобразовано в формулу я нашел в архиве с библиотекой.

HTML

	<script type="text/javascript">
	  window.onload = function(){
		var f = "(\left( x \right) \left( x^2 \right) \left( \frac{a}{b} \right) \left( \frac{a^2}{b} \right) \left( \dfrac{a}{b} \right) \left( \dfrac{a^2}{b} \right)";
		var res = document.getElementById('math');
		katex.render(f, res);
	  }			
	</script>

В результате, если все сделано правильно, то внутри блока с id=“math” отобразится формула.

Кстати, со списком поддерживаемых команд, из которых можно создавать выражения для преобразования их в формулы можно ознакомиться здесь.

У библиотеки имеется небольшой набор параметров преобразования. Вы можете передавать их в виде объекта в метод katex.render().

displayMode: boolean - параметр для отображения результата работы KaTeX. Если значение true, то результат отображается как блочный элемент, его содержимое выравнивается по-середине, иначе (false) результат отображается в строковом виде.
throwOnError: boolean — если значение true, то в случае передачи методу katex.render() неизвестных команд, произойдет ошибка типа ParseError, иначе (false) неизвестная команда будет отображена в виде текста. Цвет текста будет равен значению параметра errorColor.
errorColor: string - в этом параметре указывается цвет, которым будут отображаться сообщения в случае передачи методу katex.render() неизвестных команд, которые KaTeX не сможет преобразовать и отобразить в виде формулы (по-умолчанию #cc0000). Значение параметра передается в виде "#XXX" или "#XXXXXX".

Если вам интересно узнать об автоматическом режиме преобразования формул, ознакомьтесь с описанием расширения auto-render библиотеки KaTeX. На странице есть ссылки на примеры использования расширения.

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

Демо-страница

Прочитано 9256 раз

Опубликовано в HTML-верстка

Теги

KaTeX

Другие материалы в этой категории: « Реализуем hover-эффект над картинкой с помощью CSS3 Создаем вертикальный график с помощью CSS »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх