C, PHP, VB, .NET

Дневникът на Филип Петров


* 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" някъде в статията, в която искате да се показват формули. Това е.

 



Един коментар


  1. Моето впечатление е, че е доста бавен за големи документи (от порядъка на десетки страници предимно формули) - но не съм тествал с локална инсталация на скрипта (конкретното приложение не го позволява).

    Междувременно миналата седмица го активираха като опция в Уикипедия (http://www.gossamer-threads.com/lists/wiki/wikitech/279411).

Добави коментар

Адресът на електронната поща няма да се публикува


*