Если нужно когда-никогда добавлять одну-две математические формулы на веб-страницу, то проще всего сделать это, как описано в статье Как Wolfram|Alpha помогает вставлять математические формулы в Blogger: математические формулы легко вставляются на сайт в виде картинок, которые автоматически генерирует Вольфрам Альфа. Кроме простоты, этот универсальный способ поможет улучшить видимость сайта в поисковых системах. Он работает давно (и, думаю, будет работать вечно), но морально уже устарел.
Если же вы постоянно используете математические формулы на своем сайте, то я рекомендую вам использовать MathJax - специальную библиотеку JavaScript, которая отображает математические обозначения в веб-браузерах с использованием разметки MathML, LaTeX или ASCIIMathML.
Есть два способа, как начать использовать MathJax: (1) при помощи простого кода можно быстро подключить к вашему сайту скрипт MathJax, который будет в нужный момент автоматически подгружаться с удаленного сервера (список серверов здесь); (2) закачать скрипт MathJax с удаленного сервера на свой сервер и подключить ко всем страницам своего сайта. Второй способ - более более сложный и долгий - позволит ускорить загрузку страниц вашего сайта, и если родительский сервер MathJax по каким-то причинам станет временно недоступен, это никак не повлияет на ваш собственный сайт. Несмотря на эти преимущества, я выбрал первый способ, как более простой, быстрый и не требующий технических навыков. Следуйте моему примеру, и уже через 5 минут вы сможете использовать все возможности MathJax на своем сайте.
Подключить скрипт библиотеки MathJax с удаленного сервера можно при помощи двух вариантов кода, взятого на главном сайте MathJax или же на странице документации:
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
Один из этих вариантов кода нужно скопировать и вставить в код вашей веб-станицы, желательно между тегами <head> и </head> или же сразу после тега <body>. По первому варианту MathJax подгружается быстрее и меньше тормозит страницу. Зато второй вариант автоматически отслеживает и подгружает свежие версии MathJax. Если вставить первый код, то его нужно будет периодически обновлять. Если вставить второй код, то страницы будут загружаться медленнее, зато вам не нужно будет постоянно следить за обновлениями MathJax.
Подключить MathJax проще всего в Blogger или WordPress: в панели управления сайтом добавьте виджет, предназначенный для вставки стороннего кода JavaScript, скопируйте в него первый или второй вариант кода загрузки, представленного выше, и разместите виджет поближе к началу шаблона (кстати, это вовсе не обязательно, поскольку скрипт MathJax загружается асинхронно). Вот и все. Теперь изучите синтаксис разметки MathML, LaTeX и ASCIIMathML, и вы готовы вставлять математические формулы на веб-страницы своего сайта.
Далее показаны типичные примеры вставки математических формул, позаимствованные с сайта MathJax.
Пример 1. Формула корней квадратного уравнения: \(x_{_{1, 2}} = {-b \pm \sqrt{b^2-4ac} \over 2a}\) - встроенная в строку или вынесенная в отдельный абзац:
$$x_{_{1, 2}} = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
$$x_{_{1, 2}} = \frac{-b\pm\sqrt{b^2-4ac}}{2a}.$$
Первые две формулы представлены одинаковым кодом LaTeX, а именно:
x_{_{1, 2}} = {-b \pm \sqrt{b^2-4ac} \over 2a}.
LaTeX-код третьей по счету формулы записан иначе (результат тот же самый):
x_{_{1, 2}} = \frac{-b\pm\sqrt{b^2-4ac}}{2a}.
Чтобы формула размещалась в строке вместе с текстом, LaTeX код формулы надо обозначить справа и слева символами \ ( ... \ ). Код формулы, которая располагается в отдельном абзаце, отделяется двойными знаками доллара $ $ ... $ $ слева и справа (без пробелов между знаками). Все, что располагается между указанными символами, MathJax интерпретирует, как математическую формулу.
Код LaTeX для вставки на веб-страницу легко получить при помощи бесплатного расширения для браузера Google Chrome - Daum Equation Editor, который представляет собой простой редактор математических формул, и позволяет автоматически получать математические формулы в виде изображений, а также одновременно генерирует соответствующий код в формате TeX. Daum Equation Editor можно загрузить из интернет-магазина Chrome по ссылке Solutions of Daum Equations. После загрузки его нужно установить в своем браузере, и можно сразу же использовать.
Альтернативный способ - генерировать код математических формул при помощи одного из многочисленных онлайн-редакторов LaTeX. Например, редактор математических LaTeX-формул, у которого имеется удобный справочник по синтаксису LaTeX.
Пример 2. Формула интеграла типа Коши: \(f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz.\)
$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz.$$
$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz.$$
$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz.$$
Все четыре формулы представлены одним кодом LaTeX:
f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz,
Все они имеют разный размер, поскольку для них установлен разный размер шрифта, как это делается при форматировании обычного текста.
Пример 3. Формула косинуса суммы:
$$\cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ).$$
Код LaTeX:
\cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ)
Пример 4. Дивергенция векторного поля (теорема Гаусса):$$\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS.$$
Код LaTeX:
\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS.
Пример 5. Ротор векторного поля:
$$\vec{\nabla} \times \vec{F} = \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i} + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j} + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}$$
Код LaTeX:
\vec{\nabla} \times \vec{F} = \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i} + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j} + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}
Пример 6. Формула среднеквадратического отклонения:
$$\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}$$
Код LaTeX:
Пример 7. Символ Кристоффеля:
$$(\nabla_X Y)^k = X^i (\nabla_i Y)^k = X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)$$
Код LaTeX:
(\nabla_X Y)^k = X^i (\nabla_i Y)^k = X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)
Все представленные выше формулы используют синтаксис LaTeX и отображаются на веб-странице при помощи MathJax.
Альтернативным вариантом, о котором было сказано выше, является использование вместо LaTeX синтаксиса ASCIIMathML. Это вариант имеет ряд преимуществ, среди которых наиболее важным является то, что математические формулы, записанные с использованием ASCIIMathML легко читаются даже в том случае, если по каким-то причинам они не интерпретируются скриптом MathJax.
Например, если LaTeX-код формулы x = {-b \pm \sqrt{b^2-4ac} \over 2a}, то на ASCIIMathML, это будет выглядеть намного проще: x = (-b +- sqrt(b^2-4ac))/(2a).
Вот почему, если вы заинтересованы в использовании математических формул на страницах своего сайта, я настоятельно рекомендую вам подробнее изучить синтаксис ASCIIMathML (здесь и здесь). Также обратите внимание, что для интерпретации ASCIIMathML используется другой скрипт MathJax и другие символы встраивания формул, которые, впрочем, можно переназначить в коде страницы (подробности на сайте MathJax).
Если этот пост решил вашу проблему или просто понравился вам, поделитесь ссылкой на него со своими друзьями в социальных сетях.
Посетите страницу Как поддержать наш сайт?
Код LaTeX:
\vec{\nabla} \times \vec{F} = \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i} + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j} + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}
Пример 6. Формула среднеквадратического отклонения:
$$\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}$$
Код LaTeX:
\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
Пример 7. Символ Кристоффеля:
$$(\nabla_X Y)^k = X^i (\nabla_i Y)^k = X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)$$
Код LaTeX:
(\nabla_X Y)^k = X^i (\nabla_i Y)^k = X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)
Все представленные выше формулы используют синтаксис LaTeX и отображаются на веб-странице при помощи MathJax.
Альтернативным вариантом, о котором было сказано выше, является использование вместо LaTeX синтаксиса ASCIIMathML. Это вариант имеет ряд преимуществ, среди которых наиболее важным является то, что математические формулы, записанные с использованием ASCIIMathML легко читаются даже в том случае, если по каким-то причинам они не интерпретируются скриптом MathJax.
Например, если LaTeX-код формулы x = {-b \pm \sqrt{b^2-4ac} \over 2a}, то на ASCIIMathML, это будет выглядеть намного проще: x = (-b +- sqrt(b^2-4ac))/(2a).
Вот почему, если вы заинтересованы в использовании математических формул на страницах своего сайта, я настоятельно рекомендую вам подробнее изучить синтаксис ASCIIMathML (здесь и здесь). Также обратите внимание, что для интерпретации ASCIIMathML используется другой скрипт MathJax и другие символы встраивания формул, которые, впрочем, можно переназначить в коде страницы (подробности на сайте MathJax).
Если этот пост решил вашу проблему или просто понравился вам, поделитесь ссылкой на него со своими друзьями в социальных сетях.
Посетите страницу Как поддержать наш сайт?