Матвей Земсков

Заметки веб-мастера

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

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

Оцените материал
(0 голосов)

Публикация математических формул, особенно сложных, на веб-странице может стать «головной болью» для разработчика. Библиотека 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 удобна в использовании. Если мне когда-нибудь будет нужно разместить формулы на веб-странице, я обязательно воспользуюсь этим инструментом.

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

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

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: