Автор: «…Мы очищаем место бою
Стальных машин, где дышит интеграл…»
(с) Александр Блок. «Скифы», 1918 г.
А Вы хотели бы, чтобы на страницах вашего сайта «дышал» интеграл? 😎 Например, вот в таком уравнении:
$$\mathbf{P}((X,Y) \in B) =\mathop{\int\int}\limits_{(x,y) \in B} f_{X,Y}(x,y) \,dx \,dy$$
Или, вдруг, у Вас возникла потребность записать (не вставить в виде картинки, а именно записать) подобное неравенство?
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
Или, может быть, Вам ближе тема, связанная с определителем матрицы? 🙃
$$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
\end{vmatrix}$$
Если Вы занимаетесь разработкой сайтов, наверняка задавались вопросом, как реализовать возможность вывода на web-страницах сложных математических формул, использующих особые символы из высшей алгебры. Язык разметки HTML, за исключением небольшого количества спецсимволов (например, √ — √, квадратный корень) подобной возможности для «полета» математической мысли не предусматривает.
Я же столкнулся с данной темой несколько дней назад, когда мы решили расширить на основном сайте раздел онлайн-калькуляторов и добавить калькулятор для решения кубических уравнений — не слишком сложный в плане написания php-кода для вычислительной части, но — надо же при этом как-то изобразить на странице кубический корень \(\sqrt[3]{x}\) … А как это сделать?
Расскажу, как решал эту задачу, и с какими сложностями пришлось немного побороться в процессе.
1. Библиотека MathJax
Пробежавшись «по интернетам» довольно быстро понял, что наиболее распространенным решением на математических сайтах является подключение библиотеки MathJax. Это кроссбраузерная, свободно распространяемся библиотека на JavaScript, ее актуальная версия на сегодня — 3.2.2. Библиотека позволяет использовать на web-страницах разметку MathML, LaTeX и ASCIIMathML. Углубляться в эту тему не буду, различные справочники по этим языкам, предназначенным для написания символов и выражений, используемых в математике, Вы без труда найдете самостоятельно.
На официальном сайта проекта MathJax указано, что разрешается использовать как копию данной библиотеки на собственном сервере, так и версию библиотеки из CDN cdn.mathjax.org
Последний способ очень прост — достаточно написать на html-странице (либо в «шапке» между тегами <head> … </head>, либо в конце документа, перед закрывающим тегом </body> — на самом деле дело вкуса, принципиальной разницы нет — следующий код:
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
Мне это сразу не понравилось — ссылка на чужой ресурс, даже если это сайт разработчика библиотеки, в любой момент может измениться, и все старания накроются «медным тазом». Тогда вместо того же \(\sqrt[3]{x}\) посетитель страницы увидит вот такую абракадабру: \(\sqrt[3]{x};\). Посмеется над криворукостью вебмастера, уйдет и больше не вернется ))
Такой вариант нам не нужен, значит надо установить эту библиотеку на свой сайт. Скачиваем последнюю актуальную версию. Я это делал по ссылке github.com/mathjax/MathJax/releases, предварительно набрав в поисковике запрос «mathjax 3 скачать библиотеку». Есть и другие источники. Вобщем, справитесь ))
MathJax скачивается в виде zip-архива, в котором много файлов и папок. Не пугайтесь, для установки на сайт понадобится только одна из них — она называется «es5». Извлекаем ее из архива, и, если не нравится «es5», можно ее переименовать как Вам нравится.
2. Установка и подключение
Теперь нужно как-то закинуть библиотеку на хостинг, на котором расположен сайт. Вроде бы, что тут сложного, но на этом этапе у меня случился «тормоз». Причиной стала заумная инструкция на mathjax.org (добросовестно перекопированная вездесущими копипастерами на ряде других сайтов))). В инструкции написано следующее (цитата):
Чтобы включить MathJax в свой проект, используйте команду
npm install mathjax@3Это установит MathJax в node_modules/mathjax подкаталог вашего текущего каталога. Он будет включать в себя предварительно созданные компоненты в node_modules/mathjax/es5 каталоге.
Я, конечно, далеко не чайник, но, буду честен, и не крутой IT-шник. Всего лишь уверенный пользователь 😎. И вот это npm install, признаюсь, сильно смутило — как это реализовать, было непонятно. Ничего путного поиск по этой теме не дал (может быть, неверно формулировал запросы). Подозреваю, что это консольная команда, которую может использовать администратор сервера, и для этого нужно иметь доступ к этому самому серверу. А откуда он у нас, простых смертных пользователей виртуального хостинга? 😮
В итоге, проблему решил очень просто. Решил закачать папку es5 на сервер через FTP-клиент (так же, как мы закачиваем любый другие файлы и папки для сайта), и посмотреть, что будет. Папка благополучно загрузилась.
Далее, добавил на сайт тестовую страницу, в которой были записаны приведенные выше математические выражения на языке MathML и вставлен этот скрипт:
<script type="text/javascript" src="es5/tex-chtml.js" id="MathJax-script" async</script>
Дальнейшее тестирование показало, что все прекрасно работает, без всяких непонятных npm. Так что смело закачиваем папку с библиотекой в корневой каталог сайта, и… читаем, что делать дальше ))
3. Интеграция MathJax на самописном сайте
Здесь сразу стоит оговориться, что наш проект, на котором предполагается использование математических функций, уравнений и выражений, полностью самописный — не использует никакой движок (CMS). Он состоит из обычных html-страниц, написанных вручную в текстовом редакторе (разумеется, с «добавками» PHP и JavaScript — куда ж без них…). Поэтому вначале расскажу о подключении MathJax в этом, простом варианте, а в пункте 4 — об интеграции MathJax в WordPress. Но, обо всем по порядку.
Итак, папка es5 у нас уже находится в корневом каталоге. Установка ее в корень сайта, на самом деле не обязательна, можно ее расположить, например, в какой-нибудь подпапке. Но важно правильно прописать путь к запускающему библиотеку файлу tex-chtml.js
В расположенном выше примере это «es5/tex-chtml.js». У Вас он может быть другим. Например, в случае расположения es5 внутри папки math, и при условии, что файлы страниц, на которых будут использоваться математические символы, лежат в корневом каталоге, путь будет следующим: «math/es5/tex-chtml.js».
А если файлы с математикой у Вас в отдельной папке первого уровня от корня сайта, например, в папке uravnenie (при том, что math — тоже папка первого уровня), тогда путь: «/math/es5/tex-chtml.js». При указании пути следует быть внимательным.
Далее, как я уже написал в пункте 2, строку с кодом указанного там скрипта нужно вставить в файл web-страницы, на которой будут демонстрироваться математические выражения. Повторюсь, не имеет особого значения, в какой место страницы Вы установите скрипт — он будет работать.
У себя у добавил его в самом низу перед </body>. Соответственно, уравнения из высшей математики находятся выше строки со скриптом — это нормально.
Собственно на этом все. Интеграция библиотеки MathJax на «обычную» самописную html-страницу выполнена, и мы можем добавлять на нее спецсимволы, используя любой из трех языков: MathML, LaTeX и ASCIIMathML.
Пример записи выражения для кубического корня их переменной «x» для указания его в строке другого текста приведен выше, в пункте 1. Если кубический корень нужно было вывести не в строке (среди прочего текста), а отдельным блоком, вот так:
$$\sqrt[3]{x}$$
то вместо открывающих и закрывающих скобок с косой чертой \(...выражение...\) следовало бы использовать справа и слева символы «сдвоенного доллара»: $$...выражение...$$
Изучите материалы по языкам математическй разметки, и все станет понятно.
4. Интеграция MathJax в отдельные записи WordPress
Теперь самое интересное )). Я ведь сейчас пишу в блоге, не на упомянутой в пункте 3 самописной html-странице. Блог работает на движке WordPerss. А WordPress посторонние скрипты сильно не любит — настолько, что не дает их запускать в записях (подобных этой статье) и на стационарных страницах. Если Вы попытаетесь при редактировании записи добавить туда любой код JavaScript в виде текста, WordPress при сохранении его «порежет» (либо удалит совсем, либо изменит так, что скрипт не запустится). Это же относится к кодам на других языках программирования.
Каким способом заставить Вордпресс «полюбить» MathJax — расскажу.
Вообще, для исполнения в WordPerss JavaScript существуют специальные плагины. Но, как известно, «Яндекс» для слабаков, настоящие мужики спрашивают у Ясеня» 🤣. Захотелось не искать легких путей, а решить вопрос своими силами, без использования плагинов, и вот почему. Плагины удобны для пользователя, но у них есть недостатки:
а) Плагины (которых у Вас, наверняка, и так довольно много) содержат много лишнего функционала (а значит и кода) и «утяжеляют» и без того немаленький движок WordPress, что не лучшим образом сказывается на скорости загрузки страниц.
б) Самое главное — плагины имеют свойство устаревать. В один прекрасный день разработчик прекращает поддержку установленного Вами плагина, через несколько обновлений версии Вордпресс он становится несовместим с ней, и… нужно искать ему замену. Оно нам надо? Не лучше ли не зависеть от случайностей и от решений постороннего «дяди», и сделать все самому?
в) Мне нужно использовать символы высшей математики всего лишь в одной записи блога. Хочется решить эту задачку без привлечения «тяжелой артиллерии».
Вот что сделал я. Для краткости приведу только описание выполненных практически шагов, без теории и «воды» — просто поверьте, что это работает на текущей версии WordPress 6.2.2 (в будущем, конечно, что-то может поменяться, но направление действий, скорее всего, останется таким же).
1. Делаем собственный плагин, своими руками. Не пугайтесь, это просто. Для этого открываем любой текстовый редактор (хотя бы тот же «Блокнот» Windows) и копируем туда следующий код:
<?php
/* ====================================
* Plugin Name: MathJax
* Description: Плагин для MathJax и кодов JavaScript
* Author: Petroleks
* Author URI: https://petroleks.ru/
* Version: 1.1
* ==================================== */
function MathJax_shortcode($atts, $text)
{
global $post;
return get_post_meta($post->ID, $text, true);
}
@add_shortcode('MathJax','MathJax_shortcode');
?>
Сохраняем файл под любым именем, но обязательно с расширением php. Я его назвал mathjax.php, Вы можете иначе, имя файла не важно.
Теперь заходим в консоль WordPress, в левом меню выбираем «Плагины» > «Добавить новый». Затем вверху открывшейся страницы жмем «Добавить новый», после чего станет доступной кнопка «Обзор…» — также нажимаем. В открывшемся окне выбираем ранее сохраненный файл mathjax.php и нажимаем «Открыть»… Дальнейшую последовательность действий описывать не буду, она очевидна. В результате в списке установленных плагинов появится только что созданный Вами новый, с названием MathJax. Нажмите «Активировать» — плагин начнет функционировать.
Что делает этот плагин? Он позволяет добавлять в отдельные записи блога шорткоды для внедрения в текст программного года, указанного в произвольном поле классического редактора. В том числе и кода скрипта, запуск которого нужен для подключения библиотеки MathJax. Шорткод выглядит так: [MathJax]MathJax[/MathJax]. Написал непонятно ((, но дальнейшая инструкция все расставит на свои места.
2. Создаем в блоге через консоль (она же админ-панель )) новую запись, в классическом редакторе. Указываем заголовок, пишем какой-то текст самой статьи… все как обычно. Начатая статья у Вас сохранилась в черновиках — отлично! Теперь прокрутите страницу до самой верхней ее части (до упора) — в левом верхнем углу обратите внимание на малозаметную ссылку «Настройки экрана». Нажмите — откроется ранее скрытое поле «Элементы экрана» (также в верху). В этом поле отметьте галочкой «Произвольные поля». После этого можно снова нажать «Настройки экрана» — «Элементы экрана» снова скроются.
Теперь опускаемся вниз и видим, что под полем редактирования записи появились эти самые «Произвольные поля». Находим кнопку «Добавить произвольное поле» (пока не нажимайте!), а над ней ссылку «Введите новое». Жмем на эту ссылку — появится окно для ввода имени поля. Введите название поля — любое на Ваш вкус. Я назвал его MathJax. После присвоения имени нажимаем «Добавить произвольное поле» — новое поле появится в верхней таблице «Произвольных полей».
В окно, расположенное справа от только что созданного поля, вставляем код нашего скрипта (ради чего, собственно, все и затевалось):
<script type="text/javascript" src="es5/tex-chtml.js" id="MathJax-script" async</script>
3. Последний «удар»! В тексте редактируемой статьи, желательно в самом низу, последней строкой под редактируемым текстом пишем шорткод: [MathJax]MathJax[/MathJax]
Дело сделано (actum est, как говорили древние римляне 😉)! Доказательства — выражения из высшей алгебры, которые Вы можете видеть благодаря работающей библиотеке MathJax в блоге WordPress — в начале этой статьи.
P.S. Если описанный здесь метод Вам не помог, перечитайте инструкцию еще раз — скорее всего что-то упустили. Обязательно проверьте, верный ли путь к файлу tex-chtml.js относительно папки с Вордпресс (если он у Вас в отдельной папке) или корня сайта (если весь сайт построен на Вордпресс) Вы указали. У Вас он может быть вовсе не «es5/tex-chtml.js»!
P.P.S. Данным методом, через добавление произвольных полей, можно вставлять в отдельные записи блога не только скрипт, активирующий MathJax, но и любой другой, написанный на JavaScript. Шорткод будет тем же, а имя произвольного поля нужно будет изменить: [MathJax]имя нового поля[/MathJax].
