Сердюк Елена Владимировна
Преподаватель Информатики и Информационных
технологий в профессиональной деятельности
Государственное бюджетное профессиональное образовательное учреждение “Ейский медицинский
колледж” министерства здравоохранения Краснодарского края, г. Ейск
elena@serdy.uk
ИСПОЛЬЗОВАНИЕ MATHJAX В ПРОФЕССИОНАЛЬНОЙ
ДЕЯТЕЛЬНОСТИ ПРЕПОДАВАТЕЛЯ
В статье рассматривается опыт использования кроссбраузерной библиотеки
JavaScript MathJax в части использования формата LaTeX в профессиональной деятельности
преподавателя
дисциплин
«Информатика»
и
«Информационные
технологии
в
профессиональной деятельности». Статья может быть полезной также преподавателям
математики, физики, химии и других дисциплин, активно использующих в своей терминологии
формулы и иные схематические конструкции.
Информатика, как сугубо техническая наука, широко использует запись выражений в
виде формул. При использовании таких выражений на веб-ресурсах, возникает задача их
корректного отображения. В простейшем случае это могут быть индексы, для которых
достаточно тегов html. Но при описании задач программирования, может быть подключен
полноценный математический «инструментарий формул». Как пример – задача численного
интегрирования на любом языке программирования. В процессе её формализации не обойтись
без правил записи интегралов, суммы членов ряда и других формул.
MathJax для отрисовки формул на веб-страницах
Изначально у меня возникла необходимость публикации текстов лекций по дисциплине
«Информатика» на своей веб-страничке. Данная задача была решена с помощью библиотеки
MathJax. MathJax – это кроссбраузерная, свободно распространяемся библиотека на JavaScript
(текущая стабильная версия 3.2.2). Библиотека успешно парсит на web-страницах разметку
MathML, LaTeX и ASCIIMathML. У каждой разметки есть свои плюсы и минусы, в этой статье
используется разметка LaTeX [1].
Впоследствии в нашем учебном заведении внедрили систему дистанционного обучения
Moodle и на её базе была развёрнута электронная библиотека. Преподаватели смогли
полноценно работать в этой системе, вести свои разделы в едином стилевом оформлении, не
используя свои собственные странички и сайты. Поскольку Moodle уже поддерживает MathJax
«из коробки», то это было приятном бонусом. Набирать формулы стало не сложнее работы в
редакторе MathType (его «урезанная» версия присутствует в MS Word на вкладке
ВставкаУравнение).
Интеграция MathJax на собственном сайте
Политика разработчика MathJax допускает как использование копии библиотеки на
собственном сервере, так и загрузка версии библиотеки с сайта разработчика.
Второй вариант очень прост — достаточно написать на html-странице (лучше в секции
head, но можно в произвольном месте внутри body) следующий код:
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMSMML_HTMLorMML">
</script>
Этот способ прост, но имеет недостаток – библиотека «лежит» на стороннем ресурсе, и
может быть изменена или стать недоступной в любой момент времени. В условиях
санкционной политики это особенно критично. Поэтому мною был выбран способ «хранить
всё у себя».
Для использования на своём сервере MathJax, необходимо скачать последнюю версию
библиотеки с сайта разработчика https://github.com/mathjax/MathJax/releases. В скачанном
архиве MathJax-3.2.2.zip нам потребуется папка es5, которую необходимо закачать на сервер,
где хостится сайт. Для закачивания можно воспользоваться панелью управления хостингом,
или – самый удобный способ – это доступ к корневому каталогу сайта по FTP.
Подключаем скрипт (в секции head):
<script type="text/javascript" src="es5/tex-chtml.js" id="MathJax-script" async></script>
Всё! В тексте ваших страниц теперь можно использовать математическую разметку
LaTeX [2]!
Пример Вы можете посмотреть по адресу https://mathjax-test.serdy.uk. Код php-файла (в
реальности внутри только html):
Результат в окне браузера :
Обратите внимание, что изначальный тег <p>, содержащий код формулы на LaTeX, был
преобразован скриптами MathJax в код html, «отрисовывающий» соответствующую формулу.
Как видно, пользоваться формулами не так сложно. Приведённая формула достаточно
«тяжела», но в повседневной практике, как правило, используется ограниченный набор
формул (верхний/нижний индексы, дробь, радикал, саморастягивающиеся скобки и др.),
которые можно освоить очень быстро. Кроме того, на начальном этапе (или когда имеешь дело
с новой или сложной формульной конструкцией) удобно пользоваться онлайн-редакторами
формул LaTeX, например https://latexeditor.lagrida.com или https://www.latex4technics.com. Эти
редакторы имеют панель инструментов, позволяющую сконструировать практически любую
формулу. Пример набора формулы количества информации о неравновероятном событии k в
таком редакторе:
Таким образом, можно «сконструировать» и отладить формулу, и её текстовое
представление использовать далее для отображения на веб-ресурсе.
Интеграция MathJax на CMS и LMS
Процедуры интергации MathJax в наиболее распространённые CMS (Joomla, Wordpress,
DLE и др.) выходят за рамки данной статьи. Однако, они ничем не отличаются от установки
любого стороннего скрипта для каждой конкретной системы управления контентом. [3]
Что касается системы управления обучением (LMS), то самая распространённая (и
свободная!) из них – Moodle уже включает в себя интеграцию с MathJax. Вам ничего не надо
делать дополнительно – можно сразу писать код LaTeX в своих публикациях!
Пример использования MathJax в LMS Moodle
Поскольку Moodle имеет в своём арсенале множество дополнительных инструментов,
наиболее
часто
используются
возможности
тестирования.
Для
подготовки
тестов
предварительно составляются текстовые файлы для импорта в формате GIFT.
Фрагменты файлов, которые использовались на моих дисциплинах для проведения
тестирования с результатами отображения в окне браузера приведены ниже:
Фрагмент файла для импорта (GIFT)
Вид в окне браузера
// Системы счисления и двоичное представление информации в памяти компьютера
::06.::Даны 4 числа, они записаны с
использованием
различных
систем
счисления. Укажите среди этих чисел
наибольшее:
{
=\( 63_\{10\} \cdot 4_\{10\} \)
~\( \text\{F8\}_\{16\} + 1_\{10\} \)
~\( 333_8 \)
~\( 11100111_2 \)
}
::07.::Дано: \( a=\text\{D7\}_\{16\}
\) и \( b=331_8 \). Какое из чисел \(
c \), записанных в двоичной системе
счисления,
удовлетворяет
неравенству \( a \lt c \lt b \)?
{
~\( 11011001_2 \)
~\( 11011100_2 \)
~\( 11010111_2 \)
=\( 11011000_2 \)
}
::08.::В двоичной записи числа \(
1025_\{10\}
\)
содержится
{#2}
единиц(ы).
// Логические высказывания
Голубым цветом выделен неосновной участок вопроса (в html формате), используемый для улучшения восприятия
::03.::Напишите
наименьшее
целое
число \(X\), для которого истинно
высказывание:
$$\overline\{\left( X \leqslant 8
\right)\} \& \overline\{\left( X
\geqslant
15
\right)\}
\&
\overline\{\left(
X
\;
чётное
\right)\}$$
<hr style="width: 100%" />
<div
style="background-color:
#fffbc6; width: 100%; padding: 10px;
margin: 10px;">
<div
style="font-family:
'Courier
New', Courier, monospace; padding:
10px; font-size: 100%; border: thin
dotted navy; border-radius: 10px;">
Справочно:
В
алгебре
логики
используются
следующие
обозначения
основных
логических операций:
\( \textbf\{НЕ\} \left( x \right) =
\overline\{x\} \)
\( a \; \textbf\{И\} \; b \; = \; a
\; \& \; b \)
\( a \; \textbf\{ИЛИ\} \; b \; = \;
a \; \vee \; b \)
</div>
</div>
{#10}
// Вычисление информационного объема сообщения
::05.::Объем сообщения, содержащего
4096 символов, равен \( \displaystyle
\frac1\{512\} \) части Мбайта. Какова
мощность алфавита, с помощью которого
записано это сообщение?
{
=16 символов
~256 символов
~75 байт
~600 байт
}
Список использованных источников
1.
Якубович, Д. А. Издательская система LaTeX [Электронный ресурс] : учеб. пособие
/ Д. А. Якубович, Е. С. Еропова ; Владим. гос. ун-т им. А. Г. и Н. Г. Столетовых. – Владимир :
Изд-во ВлГУ, 2019. – 327 с. – ISBN 978-5-9984-0956-1.
2.
Котельников И.А., Чеботаев П.З. LaTeX по-русски. – 3-е изд. Перераб. и доп.. / И.А.
Котельников, П.З. Чеботаев – Новосибирск: Сибирский Хронограф, 2004. – 496 с., ил. – ISBN
5–87550–195–2
3.
Коттвиц Ш. LATEX: руководство для начинающих : пер. с англ. — М. : ДМК Пресс,
2022. — 320 с.
