KaTeX od podstaw

KaTeX to szybka biblioteka do renderowania wzorów matematycznych w przeglądarce. Pozwala pisać wzory w stylu LaTeX, np.: [mathb]E = mc^2[/mathb] i zamienia je na pięknie sformatowaną matematykę w HTML. Najważniejsze cechy:

  • bardzo szybki rendering (bez MathJax w runtime)
  • działa w przeglądarce i Node.js
  • nie wymaga ciężkich zależności
  • idealny do stron edukacyjnych i blogów
katex

Prosty przykład

Poniżej mamy kod prostego przykładu użycia katex. 
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <title>KaTeX demo</title>
  <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>
</head>
<body>
  <div id="formula"></div>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      katex.render(
        "c = \\pm\\sqrt{a^2 + b^2}",
        document.getElementById("formula")
      );
    });
  </script>
</body>
</html>
Ładujemy bibliotekę katex za pomocą CDN. Wzór jest generowany w divie o id formula. KaTeX używa składni LaTeX. Poniżej składnia: ułamek, potęga, indeks i pierwiastek. 
\frac{a}{b}
x^2
x_i
\sqrt{x}
[mathb] \frac{a}{b} x^2 x_i \sqrt{x} [/mathb] KaTeX obsługuje dwa tryby: inline (w tekście) 
katex.render("x^2 + 1", element);
wzór w linii tekstu oraz display 
katex.render("\\int_0^1 x^2 dx", element, {
  displayMode: true
});
większy, wyśrodkowany wzór. Jeśli nie chcesz ręcznie wywoływać katex.render, użyj auto-render. Dodaj w sekcji head. 
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
Potem dodaj konfigurację ograniczników dla obu trybów. To znaczniki określające, gdzie zaczyna się i kończy wzór matematyczny. Biblioteka auto-render przeszukuje HTML i szuka takich znaczników, a następnie zamienia ich zawartość na wzory KaTeX. 
<script>
document.addEventListener("DOMContentLoaded", function () {
  renderMathInElement(document.body, {
    delimiters: [
      { left: "$$", right: "$$", display: true },
      { left: "$", right: "$", display: false }
    ]
  });
});
</script>
Teraz możesz pisać w HTML: 
<p>Wzór na pole koła: $P = \pi r^2$</p>

<p>Całka:
$$\int_0^1 x^2 dx$$</p>
Otrzymamy: Wzór na pole koła: [math]P = \pi r^2[/math]. Całka: [mathb]\int_0^1 x^2 dx[/mathb]

Najczęściej wykorzystywane funkcje matematyczne

Sumy i całki: 
\sum_{i=1}^{n} i^2

\int_a^b f(x) dx
[mathb]\sum_{i=1}^{n} i^2 \int_a^b f(x) dx[/mathb] Granice: 
\lim_{x \to \infty} f(x)
[mathb]\lim_{x \to \infty} f(x)[/mathb] Macierze: 
\begin{pmatrix}
1 & 2 \\
3 & 4
\end{pmatrix}
[mathb]\begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}[/mathb]

Może Cię zainteresować:
MathJax - przewodnik dla początkujących
Implicit equation grapher i marching cubes
Projekty wyróżnione w Chrome Experiments