Mathjax vs Katex

Jeśli zajmujesz się matematyką lub fizyką, prezentujesz w internecie treści naukowe lub techniczne to na pewno chciałbyś wstawiać na stronę ładnie sformatowane wzory. Najpopularniejszymi obecnie rozwiązaniami są MathJax i KaTeX. Oba projekty pozwalają renderować wzory zapisane w składni LaTeX bezpośrednio w przeglądarce, jednak różnią się architekturą, wydajnością i możliwościami. W artykule porównam oba narzędzia, omawiając ich podobieństwa i różnice oraz podpowiem, które rozwiązanie wybrać do konkretnego zastosowania.

Co to jest MathJax?

MathJax to biblioteka JavaScript rozwijana od roku 2009 przez środowiska akademickie. Jej celem jest wyświetlanie wzorów matematycznych w sposób zgodny z typografią znaną z LaTeXa. MathJax potrafi interpretować LaTeX, MathML oraz AsciiMath i zamieniać je na HTML + CSS, SVG, MathML. Spójrz na poniższy przykład.

<p>
Równanie kwadratowe:

\[
ax^2 + bx + c = 0
\]
</p>

Po załadowaniu biblioteki wzór matematyczny zostanie automatycznie wyrenderowany.

Co to jest Katex?

Katex to biblioteka stworzona przez inżynierów z Khan Academy. Głównym celem projektu była maksymalna szybkość renderowania wzorów matematycznych. Spójrzmy na poniższy przykład.

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">

<script defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js">
</script>

<div id="math"></div>

<script>
katex.render(
  "\\int_0^\\infty e^{-x^2} dx",
  document.getElementById("math")
);
</script>

Ta biblioteka generuje gotowy kod HTML niemal natychmiast, dzięki czemu jest niezwykle szybka nawet przy dużej liczbie wzorów.

Podobieństwa

Oba silniki wykorzystują składnię znaną z LaTeXa.
Obie biblioteki działają w JavaScript. Wszystko renderowane jest bezpośrednio w przeglądarce użytkownika.
Zarówno MathJax, jak i KaTeX są projektami open source.
Obie biblioteki można wykorzystywać w zwykłych stronach HTML, jak i w popularnych frameworkach JavaScript np. Vue, React, Angular, Svelte, Next.js.

Różnice

Teraz przejdziemy do aspektów, które najczęściej decydują o wyborze konkretnej biblioteki.

Wydajność

KaTeX został zaprojektowany z myślą o szybkości. W praktyce renderuje wzory:

kilka razy szybciej,
przy mniejszym zużyciu pamięci,
z krótszym czasem ładowania strony.

Przy dokumentach zawierających setki równań różnica jest bardzo zauważalna. Biblioteka świetnie nadaje się do dużych dokumentów. MathJax wykonuje znacznie więcej operacji. Obsługuje:

większą liczbę makr,
MathML,
zaawansowaną konfigurację,
rozszerzenia.

Cena za tą elastyczność jest wolniejsze działanie.

Zgodność z LaTeX

To obszar, w którym MathJax wygrywa. Obsługuje on ogromną część składni LaTeX. Katex obsługuje większość codziennie używanych konstrukcji. Problemy mogą pojawić się przy:

nietypowych pakietach,
egzotycznych makrach,
skomplikowanych środowiskach matematycznych.

W ostatnich latach zgodność znacząco wzrosła, ale nadal jest nieco mniejsza niż w MathJax.

Obsługa MathML

MathJax posiada pełną obsługę MathML. Na przykład MathJax poprawnie wyrenderuje poniższy zapis.

<math>
  <mfrac>
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
</math>

Katex skupia się głównie na składni LaTeX. Wsparcie dla MathML jest ograniczone. Jeżeli pracujesz z dokumentami generującymi MathML, MathJax będzie lepszym wyborem.

Konfiguracja

MathJax przypomina rozbudowaną platformę renderowania matematyki. Możemy konfigurować:

parser,
makra,
format wyjściowy,
rozszerzenia,
automatyczne numerowanie równań.

Przykład:

window.MathJax = {
  tex: {
    tags: "ams",
    inlineMath: [['$', '$']]
  }
};

KaTeX oferuje prostszy model konfiguracji.

katex.render(expr, element, {
  throwOnError: false,
  displayMode: true
});

Dla wielu projektów jest to zaleta, ponieważ wymaga mniej konfiguracji.

Rozmiar biblioteki

KaTeX jest wyraźnie lżejszy. Mniejsze pliki oznaczają szybsze pobieranie i krótszy czas renderowania. Biblioteka MathJax jest większa, ponieważ zawiera znacznie więcej funkcjonalności. W zamian oferuje większą elastyczność.

Renderowanie po stronie serwera

W nowoczesnych frameworkach coraz częściej stosuje się SSR (Server Side Rendering). KaTeX dobrze współpracuje z:

Next.js
Nuxt
Astro
Eleventy

i może generować gotowy HTML jeszcze przed wysłaniem strony do użytkownika. MathJax również obsługuje SSR, ale konfiguracja jest bardziej złożona.

Przykład użycia

Załóżmy, że chcemy wyświetlić wzór: [mathb] \int_{0}^{\infty} e^{-x^2}dx = \frac{\sqrt{\pi}}{2} [/mathb] MathJax:

<script>
window.MathJax = {
  tex: {
    inlineMath: [['$', '$']]
  }
};
</script>

<script
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

Następnie:

<script>
$$
\int_{0}^{\infty} e^{-x^2}dx
=
\frac{\sqrt{\pi}}{2}
$$
</script>

KaTeX:

katex.render(
"\\int_{0}^{\\infty} e^{-x^2}dx=\\frac{\\sqrt{\\pi}}{2}",
element
);

Kod jest nieco bardziej bezpośredni i zwykle renderuje się szybciej.

Kiedy wybrać MathJax?

MathJax będzie dobrym wyborem, gdy:

tworzysz platformę edukacyjną,
korzystasz z MathML,
potrzebujesz maksymalnej zgodności z LaTeX,
używasz niestandardowych makr,
publikujesz zaawansowane artykuły naukowe.

Przykłady:

czasopisma naukowe,
repozytoria publikacji,
uczelnie,
dokumentacja badawcza.

Kiedy wybrać KaTeX?

KaTeX sprawdzi się najlepiej, gdy:

liczy się szybkość działania,
publikujesz blog techniczny,
tworzysz kurs online,
generujesz dużo treści matematycznych,
zależy Ci na wysokich wynikach Core Web Vitals.