* MathJax 2.0 – нова ера в писането на формули!
Публикувано на 17 април 2012 в раздел Математика.
На 26 февруари 2012г е излязла новата версия 2.0 на MathJax. Малко ме е срам, но разбрах за това чак сега. А миналата година написах публикация на тема „Технологии за въвеждане и изобразяване на математически формули в Уеб 2.0 приложения“, в която отбелязах именно MathJax като един от лидерите тогава.
Какво ново във версия 2.0? На първо място вече се поддържа не само LateX и MathML, но и AsciiMath! Това вече наистина го направи незаменим лидер сред софтуера за писане на математически формули в уеб сайтове, защото практически вече поддържа всички възможни стандарти. При това резултата се изобразява в браузъра в текстови вид, а не като картинка, което спомага да имаме индексиране от търсачките и поддръжка на copy/paste с други локални текстови редактори. Накрая, но не последно, формулите се изобразяват значително по-бързо спрямо предишната версия (всъщност MathJax беше най-бавната технология от тези, които разгледах).
Ето един пример за формула написана с MathJax 2.0 с режим displayMath:
[math]\sin{x} \cos{y} = \frac{1}{2}\left[ \sin{(x-y)}+\sin{(x+y)} \right][/math]
… и с режим inlineMath: [mathi]\sin{x} \cos{y} = \frac{1}{2}\left[ \sin{(x-y)}+\sin{(x+y)} \right][/mathi]
Ако виждате формулата от резултата, натиснете с десен бутон, за да видите допълнителни „екстри“. Може да правите „zoom“ (при това доста удобен) и също така можете да копирате формулата в TeX или MathML формат. Също така ви се дава възможност да изобразявате с html/css, mathml или svg.
Освен това MathJax се инсталира буквално елементарно. Свалете последната версия от уебсайта и я разархивирайте в поддиректория „mathjax“ в root директорията на вашия домейн (внимание – файловете са доста). След това вмъкнете следния код в <head> частта на вашите страници, в които искате да имате визуализиране на формули:
<script type='text/x-mathjax-config'> MathJax.Hub.Config({tex2jax: {inlineMath: [['[mathi]','[/mathi]']], displayMath: [['[math]','[/math]']]}})</script>
<script type='text/javascript' src='https://www.cphpvb.net/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
Разбира се вместо „cphpvb.net“ сложете вашия собствен домейн. От тук нататък всеки текст, който е ограден с [mathi] и [/mathi] или [math] и [/math] ще се визуализира чрез MathJax скрипта (освен ако тези „BB кодове“ не са вътре в тагове <pre> или <code>).
Конкретно за WordPress – ако искате да зареждате скрипта само когато е използван, а не на всяка страница, то може да използвате следния код в header.php на темата:
$math_shortcode_found = false;
foreach ($posts as $post) {
if (strpos($post->post_content, '[math')!==false){
$math_shortcode_found = true;
break;
}
}
if ($math_shortcode_found) {
echo ... // тук отпечатвате script таговете
}
Това ще облекчи изпращането на ненужни данни към потребителя (към момента 14690 байта) когато не се използват формули в дадена статия, но за сметка на това ще натовари сървъра (при всеки преглед на всяка статия ще се прави проверка за наличието на тага). По-добро решение е да слагате паразитен таг в началото на всяка статия, в която ще използвате математически формули и в PHP кода да сравнявате само началото на статията:
$math_shortcode_found = false;
foreach ($posts as $post) {
if (strncmp($post->post_content, '', 15) == 0){
$math_shortcode_found = true;
break;
}
}
if ($math_shortcode_found) {
echo ... // тук отпечатвате script таговете
}
Празният таг е inline и няма да направи нов ред, а съдържанието му също е празно, затова mathjax няма да изобрази нищо. Неудобството е, че трябва да пишете този празен таг във всяка статия, в която ви трябва математическа формула. По-лошото обаче е, че този паразитен празен таг ще се показва във вашия RSS feed, както и евентуално може да повлияе на търсачките. Затова най-добре ще е да го добавяме в края на текста на статиите ни:
$math_shortcode_found = false;
foreach ($posts as $post) {
if(mb_strlen($post->post_content)>15 &&
substr_compare($post->post_content, '', -15, 15) === 0
){
$math_shortcode_found = true;
break;
}
}
if ($math_shortcode_found) {
echo ... // тук отпечатвате script таговете
}
Така просто слагайте в края на всяка статия, в която използвате математически формули, и WordPress ще вмъква необходимия javascript файл.
MathJax 2.0 наистина е най-добрия софтуер за математически формули в уеб, който е излизал до този момент. Моят дневник вече официално е powered by MathJax.
П.П. Вместо да отпечатвате директно в header.php файла, може да подходите още по-културно и да използвате add_filter във functions.php. Направете следното там:
function conditionally_add_mathjax($posts){
if (empty($posts)) return $posts;
$shortcode_found = false;
foreach ($posts as $post) {
if(mb_strlen($post->post_content)>15 &&
substr_compare($post->post_content, '', -15, 15) === 0){
$shortcode_found = true;
break;
}
}
if ($shortcode_found) {
wp_enqueue_script('mathjax',
'/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML,myconfig',
array(), null, false );
}
return $posts;
}
add_filter('the_posts', 'conditionally_add_mathjax');
За да работи в „config“ директорията на MathJax трябва да сложите файл с име „myconfig.js“ със следното съдържание:
MathJax.Hub.Config({tex2jax: {inlineMath: [['[mathi]','[/mathi]']], displayMath: [['[math]','[/math]']]}});
MathJax.Ajax.loadComplete("[MathJax]/config/myconfig.js");
Редакция 01 юни 2014 г.:
В по-новите версии на WordPress има още по-лесен начин – чрез т.нар. shortcode. Вместо всичко написано по-горе, добавете следното в functions.php:
add_shortcode('mathjax', 'mathjax_shortcode_handler');
function mathjax_shortcode_handler($atts) {
wp_register_script('mathjax', '/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML,myconfig', array(), null, false );
wp_enqueue_script('mathjax');
}
След това само добавете shortcode и име „mathjax“ някъде в статията, в която искате да се показват формули. Това е.
Моето впечатление е, че е доста бавен за големи документи (от порядъка на десетки страници предимно формули) – но не съм тествал с локална инсталация на скрипта (конкретното приложение не го позволява).
Междувременно миналата седмица го активираха като опция в Уикипедия (http://www.gossamer-threads.com/lists/wiki/wikitech/279411).