Отображение математических формул в yandex. MathJax - библиотека для отображения математических формул (краткий справочник)

MathJax позволяет включать математические формулы на web-страницы, используя разметку LaTeX, MathML или AsciiMath, после чего формулы будут обработаны javascript-библиотекой и преобразованы в HTML, SVG или MathML для отображения в любом современном браузере.

В настоящее время MathJax позволяет использовать как копию данной библиотеки на собственном сервере, так и версию библиотеки из CDN cdn.mathjax.org:

Конфигурация TeX-AMS-MML_HTMLorMML является одним из самых общих (и, следовательно, самых больших) файлов конфигурации. Хотя использование данной конфигурации возможно и не эффективно, но здесь она приведена для возможности быстрого старта использования MathJax.

Краткий справочник

Так как разметка LaTeX показалась мне более лаконичной, далее описываются только вопросы по её использованию при работе с MathJax:

чтобы увидеть, как написана любая из формул, кликните правой кнопкой мыши на выражении и выберите "Show Math As > TeX Commands" (символы разделителей не показываются);

для отображения формулы в отдельном блоке заключите её в разделители $$...$$ или \[...\] \[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]

для отображения формулы внутри строки заключите её в разделители \(...\) . Например, \(\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\) . Обратите внимание, что разделители $...$ по умолчанию не поддерживаются, так как одиночные знаки доллара могут появляться в тексте и вызывать ошибочное преобразование текста в формулу;

для отображения букв греческого алфавита , используйте \alpha , \beta , …, \omega: \(\alpha\) , \(\beta\) , …, \(\omega\) . Для верхнего регистра используйте \Gamma , \Delta , …, \Omega: \(\Gamma\) , \(\Delta\) , …, \(\Omega\) ;

для верхних и нижних индексов используйте ^ и _ . Например, x_i^2: \(x_i^2\) ;

группы . Верхний и нижний индексы, а также другие операции применяются только к следующей "группе". "Группой" является либо один символ, либо любая формула, заключенная в фигурные скобки {...} . Если вы выполните 10^10 , то неожиданно получите \(10^10\) . Но 10^{10} даст вам возможно то, что вы хотели: \(10^{10}\) . Используйте фигурные скобки, чтобы выделить формулу, к которой применяется верхний или нижний регистр: x^5^6 вызовет ошибку; {x^y}^z соответствует \({x^y}^z\) , и x^{y^z} соответствует \(x^{y^z}\) . Заметьте отличие между x^i^2 \(x_i^2\) и x_{i^2} \(x_{i^2}\) ;

скобки . Одиночные символы () создают круглые и квадратные скобки \((2+3)\) . Используйте \{ и \} для отображения фигурных скобок \(\{\}\) .
Описанные выше скобки не масштабируются вместе с формулой. То есть, если вы напечатаете (\frac{\sqrt x}{y^3}) , круглые скобки будут слишком маленькими: \((\frac{\sqrt x}{y^3})\) . Использование \left(и \right) выполнит автоматическую подстройку размера скобок к размеру формулы, которую они окружают: \left(\frac{\sqrt x}{y^3}\right) соответствует \(\left(\frac{\sqrt x}{y^3}\right)\) . \left и \right применяются ко всем следующим типам скобок: (и) \(\left(x\right)\) , [ и ] \(\left\) , \{ и \} \(\left\{x\right\}\) , | \(\left|x\right|\) , \langle и \rangle \(\left\langle x\right\rangle\) , \lceil и \rceil \(\left\lceil x\right\rceil\) , и \lfloor и \rfloor \(\left\lfloor x\right\rfloor\) .
Есть также невидимые скобки, обозначенные. : \left.\frac12\right\rbrace соответствует \(\left.\frac12\right\rbrace\) ;

суммы и интегралы \sum и \int ; нижний индекс соответствует нижнему пределу, а верхний индекс - верхнему пределу. Например, \sum_1^n \(\sum_1^n\) . Не забудьте {...} , если пределы состоят из более чем одного символа. Например, \sum_{i=0}^\infty i^2 соответствует \(\sum_{i=0}^\infty i^2\) . Аналогично \prod \(\prod\) , \int \(\int\) , \bigcup \(\bigcup\) , \bigcap \(\bigcap\) , \iint \(\iint\) ;

дроби . Существует два способа создать дробь. \frac ab применятся к следующим двум группам и генерирует следующее \(\frac ab\) ; для более сложных числителей и знаменателей используйте {...} : \frac{a+1}{b+1} соответствует \(\frac{a+1}{b+1}\) . Если числитель и знаменатель слишком сложны, можно использовать \over , который разделяет группу, в которой находится: {a+1\over b+1} соответствует \({a+1\over b+1}\) ;

шрифты

• используйте \mathbb или \Bbb для полужирного шрифта для "черной доски": \(\mathbb{CHNQRZ}\) ;
• используйте \mathbf для полужирного шрифта: \(\mathbf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathbf{abcdefghijklmnopqrstuvwxyz}\) ;
• используйте \mathtt для шрифта "печатной машинки": \(\mathtt{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathtt{abcdefghijklmnopqrstuvwxyz}\) ;
• используйте \mathrm для "римского" шрифта: \(\mathrm{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathrm{abcdefghijklmnopqrstuvwxyz}\) ;
• используйте \mathsf для шрифта без засечек: \(\mathsf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathsf{abcdefghijklmnopqrstuvwxyz}\) ;
• используйте \mathcal для "каллиграфического" написания: \(\mathcal{ ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) ;
• используйте \mathscr для "скриптового" шрифта (как бы написанного от руки): \(\mathscr{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) ;
• используйте \mathfrak для шрифта "Fraktur" (старый немецкий стиль): \(\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ} \mathfrak{abcdefghijklmnopqrstuvwxyz}\) ;

знаки корня . Используйте \sqrt , который подстраивается к размеру аргумента: \sqrt{x^3} \(\sqrt{x^3}\) ; \sqrt{\frac xy} \(\sqrt{\frac xy}\) . Для сложных выражений предпочтительнее использование {...}^{1/2} ;

некоторые функции , такие как "lim", "sin", "max", "ln" и т.д., обычно используют "римский" (прямой) шрифт вместо "итальянского" (курсив). Используйте \lim , \sin и т.д., чтобы получить подобное: \sin x \(\sin x\) , а не sin x \(sin x\) . Используйте нижние индексы, чтобы прикрепить дополнительные надписи к \lim: \lim_{x\to 0} \[\lim_{x\to 0}\]

существует слишком большое количество специальных символов и обозначений , чтобы перечислить здесь из все. Вот некоторые из наиболее часто используемых:

• \lt \gt \le \ge \neq \(\lt\, \gt\, \le\, \ge\, \neq\) . Вы можете использовать \not , чтобы поместить косую черту почти на всё: \not\lt \(\not\lt\) , но часто это выглядит некрасиво;
• \times \div \pm \mp \(\times\, \div\, \pm\, \mp\) . \cdot соответствует точке в центре: \(x \cdot y\) ;
• \cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing \(\cup\, \cap\, \setminus\, \subset\, \subseteq \,\subsetneq \,\supset\, \in\, \notin\, \emptyset\, \varnothing\) ;
• {n+1 \choose 2k} или \binom{n+1}{2k} \({n+1 \choose 2k}\) ;
• \to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \(\to\, \rightarrow\, \leftarrow\, \Rightarrow\, \Leftarrow\, \mapsto\) ;
• \land \lor \lnot \forall \exists \top \bot \vdash \vDash \(\land\, \lor\, \lnot\, \forall\, \exists\, \top\, \bot\, \vdash\, \vDash\) ;
• \star \ast \oplus \circ \bullet \(\star\, \ast\, \oplus\, \circ\, \bullet\) ;
• \approx \sim \simeq \cong \equiv \prec \(\approx\, \sim \, \simeq\, \cong\, \equiv\, \prec\) ;
• \infty \aleph_0 \(\infty\, \aleph_0\) \nabla \partial \(\nabla\, \partial\) \Im \Re \(\Im\, \Re\) ;
• для сравнений по модулю используйте \pmod , например, a\equiv b\pmod n \(a\equiv b\pmod n\) ;
• \ldots соответствует многоточию в \(a_1, a_2, \ldots ,a_n\) ; \cdots соответствует многоточию в \(a_1+a_2+\cdots+a_n\) ;
• у некоторых греческих букв есть форма написания для обозначения переменной: \epsilon \varepsilon \(\epsilon\, \varepsilon\) , \phi \varphi \(\phi\, \varphi\) и т.д. "Скриптовая" (написанная от руки) l в нижнем регистре: \ell \(\ell\) .

Detexify позволяет нарисовать символ на web-странице, а затем перечисляет \(\TeX\) символы, которые напоминают нарисованный. Не гарантируется, что это будет работать и в MathJax, но это хорошее место для начала поиска. Чтобы проверить, поддерживается ли команда, обратите внимание на текущий список поддерживаемых \(\LaTeX\) команд на MathJax.org.

пробелы . MathJax обычно сам решает, как использовать пробелы в формулах, используя комплексный набор правил. Печать дополнительных пробелов в формулах не изменит количество пробелов, которые добавит в формулу MathJax: a␣b и a␣␣␣␣b соответствуют \(a b\) . Чтобы добавить больше пробелов, используйте \, для узкого пробела \(a\,b\) или \; для широкого пробела \(a\;b\) . \quad и \qquad соответствуют большим пробелам \(a\quad b\) , \(a\qquad b\) .
Чтобы использовать простой текст, используйте \text{...} : \(\{x\in s\mid x\text{ is extra large}\}\) ;

акценты и диакритические знаки . Используйте \hat для одиночного символа \(\hat x\) , \widehat для формулы \(\widehat{xy}\) (но если вы сделаете символ слишком широким, это будет выглядеть нелепо). Аналогичным образом \bar \(\bar x\) и \overline \(\overline{xyz}\) , и \vec \(\vec x\) и \overrightarrow \(\overrightarrow{xy}\) и \overleftrightarrow \(\overleftrightarrow {xy}\) . Для точек, как \(\frac d{dx}x\dot x = \dot x^2 + x\ddot x\) , используйте \dot и \ddot ;

специальные символы, используемые для интерпретации MathJax, могут быть экранированы , используя символ \ : \$ \(\$\) , \{ \(\{\) , \_ \(\_\) и т.д. Если вам нужен символ \ , вы должны использовать \backslash \(\backslash\) , так как \\ соответствует новой строке.

До выхода HTML5 использование формул было сущим наказанием. Судите сами: в 2005-м необходимо было иметь под рукой либо специальный браузер, либо разбивать текст на собственно HTML и вставки из изображений или PDF. Поиск и прочие операции редактирования и/или вывода на экран/бумагу был неоднозначной задачей, коей посвящались целые монографии .

В 2012-м было уже попроще. Появилась возможность подключать необходимые плагины (Firemath для FireFox и Daum Equation Editor для Chrome). Но неоднозначность стандартов (и поддержки) фактически заставляла писать одну и ту же статью для каждого из браузеров (и для их версий). Или встречать пользователей волшебным приветствием «Ваш браузер надо обновить/дополнить расширением».

Неудобно? - Да! Отнимало много времени на поиск универсального решения? - Да! Заставляет думать о том, какой тип записи лучше (презентационный или содержательный), каким конвертером пользоваться (а их только общеизвестных с десятка полтора)? - ДА! ДА! ДА!

В результате работа по публикации превращалась в освоение двух-трех лексиконов разметки и изучения работы минимум одной программы-перекодировщика.

Теперь, с приходом HTML5, все стало намного проще. В нем появился новый контейнер .
Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.
Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.

Атрибуты тэга В дополнение к следующим атрибутам, тэг воспринимает любые атрибуты из .

class, id, style
При условии использования вместе с таблицами стилей .
dir
Указывает направление формулы: ltr - слева направо или rtl - справа налево.
ref
Используется для установки гиперссылки на указанный URI.
mathbackground
Цвет фона. Вы можете использовать #rgb , #rrggbb и названия цветов HTML .
mathcolor
Цвет текста. Вы можете использовать #rgb , #rrggbb и названия цветов HTML .
display
Этот атрибут определяет способ вывода. Возможные значения:

• block - означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;
• inline -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из нее без изменения значения этого текста.

Значение по умолчанию inline .

Mode Шрифт.
Для вставки в формулу греческих и различных специальных символов следует обратиться к пункту меню Вставка > Символ и выбрать нужный шрифт и символ. В качестве пробела при наборе формул следует использовать так называемый неразрывный пробел, который можно найти в меню Вставка > Символ или воспользоваться специальным сочетанием клавиш, нажав одновременно Ctrl+Shift+Пробел.

Для набора сложных формул существует редактор уравнений Microsoft Equation, который входит в Microsoft Office. Отметим, что MS Equation не всегда устанавливается по умолчанию, и о его наличии надо позаботиться при инсталляции редактора Word, а затем для удобства использования добавить в меню редактора Word соответствующую кнопку. После этого для набора формул достаточно нажать на кнопку или обратиться к пункту меню Вставка > Объект > Microsoft Equation. Можно вызывать редактор формул и в автономном режиме.

Недостатками первого способа является его сложность,нарушение порядка ввода формулы (например:сначала скобки, потом выражение в них), кроме того,формулы воспринимаются рисунком отдельным от текста и при изменении шрифта могут стать несоразмерными с ним.

2 способ: Вставка формул с помощью разметки MathML.
Общий принцип использования MathML состоит в том, что математические конструкции встраиваются в обычный HTML-документ и (если броузер либо специальная программа поддерживает эту спецификацию) адекватно воспроизводятся при загрузке документа из сети.

Первое, с чем приходится столкнуться в MathML и что отличает данный язык разметки от аналогов, — это использование двух способов кодирования выражений . Один из них основан на непосредственной передаче синтаксиса формулы (presentation), другой, напротив, отражает семантику выражения (content). Проще говоря, первый способ передает запись формулы вне связи с ее смыслом, второй, наоборот, отражает ее математическое содержание.
Пример записи в MathML:

В результате получится формула:

Недостатки: не все браузеры поддерживает «MathML»; доскональное изучение «MathML» громоздко и сложно для обычного пользователя.

3 способ: Вставка формул с помощью разметки TeX.
Ее создатель Дональд Кнут.
Система ТеХ – система типографского набора , предназначенная для создания книг, в особенности тех, где много математических формул. Подготовка рукописи в формате системы ТеХ означает, что вы точно указываете компьютеру, как преобразовать текст страницы.
Система ТеХ не имеет собственного редактора . Для верстки tex-файла можно использовать любой редактор, например, Блокнот или WinEdt, специально ориентированный на набор файлов ТеХа. Текст форматируется при помощи системы тегов, подобных тегам языка HTML.
Если мы наберем следующую строку

.

Необходимость разметки MathML вызвана тем, что формат HTML, несмотря на множество замечательных свойств, имеет довольно-таки ограниченные возможности передачи математических обозначений. Чаще всего формулы на HTML-страницах представляются в виде графики (растровой или векторной), но этот способ имеет очевидные недостатки. Например, формулу-рисунок практически невозможно отредактировать, а качество ее при печати обычно оставляет желать лучшего. Развитие идей и привело к созданию целого семейства языков математической разметки, к которым относится и MathML. Разработчики осознавали глубину проблематики и поставили цель создать спецификацию, удовлетворяющую следующим ограниченным, но все же достаточно важным требованиям:

ü легкость освоения и ручного набора основных математических обозначений

ü максимальная совместимость с другими математическими форматами, которая должна обеспечиваться соответствующими конвертами

ü возможность вывода формул на различные терминальные устройства

ü поддержка расширяемости, т. е. введения новых символов, схем.

Общий принцип использования MathML состоит в том, что математические конструкции встраиваются в обычный HTML-документ и воспроизводятся при загрузке документа из сети.

Язык MathML предлагает гибкую и расширяемую систему записи математического материала, позволяющую взаимодействовать с внешними программами и осуществлять высококачественное отображение в различных информационных средах. Общий принцип использования MathML состоит во встраивании математических конструкций в XHTML/HTML-документ. Cоздание веб-страниц с использованием MathML возможно тремя способами: HTML + презентационный MathML, XHTML + презентационный MathML, XML + MathML

Для преобразования математических выражений в MathML существует множество утилит . Основными браузерами , непосредственно поддерживающими MathML, являются последние версии Mozilla и его разновидности. Многие другие браузеры поддерживают этот формат при установке соответствующих плагинов . Кроме того, MathML поддерживается основными офисными программами, такими как Microsoft Word и OpenOffice.org , а также математическими программными продуктами например, Mathematica , Maple . MathML — о чень мощный и универсальный язык разметки формул. Правда, ред актировать формулы (и читать) довольно тяжело . Язык MathML построен по XML-технологии и для задания фрагментов формул используются свои теги.

Пример описания простой формулы

x

+

3

Пример 2

Вставка формул в html-документы с помощью разметки TeX

TeX – это популярный язык разметки, который используют многие люди, особенно в математическом мире, текстовый процессор, система форматирования документов.

Пакет позволяет автоматизировать многие задачи набора текста и подготовки статей, включая набор текста на нескольких языках, нумерацию разделов и формул, перекрёстные ссылки, размещение иллюстраций и таблиц на странице, ведение библиографии и др.

Формулы в LaTeX набираются с помощью специальных команд. Например, формула для нормального распределения в LaTeX будет выглядеть так: \frac{1}{\sigma\sqrt{2\pi}}\exp\left(-\frac{(x-\mu) ^2}{2\sigma^2}\ right)

а отображаться будет так:

Исходный код математической формулы записывается внутри тега ... Пробелы игнорируются (ТеХ их сделает сам). Пустые строки не разрешаются.

Достоинства TEX:

• программные реализации TEX есть практически для всех типов компьютеров
• низкие требования к аппаратным ресурсам (для работы достаточно IBM PC совместимого компьютера с 286/386 процессором)
• переносимость исходных текстов, (результаты форматирования, т.е. конечный вид вашего документа, будет идентичен для все платформ)
• при печати получается текст типографского качества,
• большое количество бесплатных реализаций
• возможность подготовки математических и других формул любой сложности которые будут прекрасно смотреться при печати, затрачивая при этом минимум усилий
• расширяемость (на основе имеющихся базовых команд можно создавать свои, более сложные)

Одной из основных функций, заложенных в TeX при его проектировании, была возможность простого набора математических формул.

Набор сложных формул существенно легче и быстрее «визуальных» редакторов (M$ Equation, MathCAD). В особенности это заметно, где требуется выравнивание формул относительно друг друга, расстановка нумерации, а также при использовании нестандартных математических обозначений.

Формулы поддерживаются только в нотации TeX. Пример:

E=mc^2

что будет выглядеть так:

Вставка формул в html-документы в виде рисунков

Самый простой способ — вставлять формулы как растровые картинки с помощью тэга img . Изображение формулы может быть получено как вручную (из визуального редактора формул), так и автоматически. Формулы представляются в виде вставных объектов, внедренных в документ. Они могут содержать многоэтажные простые дроби, греческие буквы, матрицы.