MathJax: Vkladanie matematických vzorcov na stránku

Asi 2 roky dozadu som tu písal o jazyku MathML. Jedná sa o jazyk z rodiny XML ktorý nám umožňuje vkladať na web matematické vzorce. Tento jazyk má však jednu nevýhodu a to, že aj na zapísanie jednoduchého a relatívne malého vzorca musíme napísať veľa neprehľadných riadkov. Tento problém zdá sa rieši MathJax. MathJax taktiež vkladá do stránky matematické vzorce ale dokáže ich vyrenderovať aj napríklad zo syntaxe ktorú používa LaTeX či AsciiMath a ta je oveľa kratšia a čitateľnejšia ako MathML. Použitie si ukážeme na jednoduchom zápise kvadratickej rovnice a vzorca slúžiaceho na jej výpočet.

Ak $a \ne 0$, potom $ax^2 + bx + c = 0$ má práve 2 korene ktoré vypočítame nasledovne: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Použitie LaTeX-u

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MathJax LaTeX Test</title>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
  </head>
  <body>
    Ak $a \ne 0$, potom \(ax^2 + bx + c = 0\) má práve 2 korene ktoré vypočítame nasledovne:
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
  </body>
</html>

Použitie AcsiiMath

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MathJax AsciiMath Test</title>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML"></script>
  </head>
  <body>
    <p>Ak `a != 0`, potom `ax^2 + bx + c = 0` má práve 2 korene ktoré vypočítame nasledovne:</p>
    <p style="text-align:center">`x = (-b +- sqrt(b^2-4ac))/(2a) .`</p>
  </body>
</html>

Zdroje a užitočné odkazy

[1] MathJax Documentation
[2] AsciiMath

Tomas Adamjak

Vyhľadávať v tomto blogu