Chemische und mathematische Formeln im Webbrowser anzeigen mit MathJax

Problem: Die Darstellung von Formeln im Webbrowser ist häufig nur mit großem Aufwand und unbefriedigenden Ergebnissen möglich.
Lösung: Mit Hilfe der JavaScript basierten Bibliothek MathJax kann man durch Einfügen der folgenden Zeile in den Header der HTML-Datei und anschließendes Einbetten des LaTeX-Quelltexts wie in den folgenden Beispielen beschrieben, auf einfachem Weg selbst komplizierte Formeln darstellen:

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Lösungsformel für die allgemeine quadratische Gleichung (a-b-c-Formel)
\[ \begin{aligned} x_{1/2} = \frac{ -b \pm \sqrt{ b^{2} -4\,a\,c } }{ 2a } \end{aligned} \]
<div>
\[
\begin{aligned}
x_{1/2} = \frac{ -b \pm \sqrt{ b^{2} -4\,a\,c } }{ 2a }
\end{aligned} 
\]
</div>
Knallgasreaktion
\[ \begin{aligned} 2 H_{2} + O_{2} \ \xrightarrow{\Delta T} \ 2 H_{2}O \end{aligned} \]
<div>
\[
\begin{aligned}
2 H_{2} + O_{2} \ \xrightarrow{\Delta T} \ 2 H_{2}O
\end{aligned} 
\]
</div>
Redoxreaktion
\[ \begin{array}{ll} Ox.: & Zn & \rightleftharpoons Zn^{2+} + 2 e^{-} \\ Red.: & 2 MnO_{2} + 2 e^{-} + 2 H_{3}O^{+} & \rightleftharpoons Mn_{2}O_{3} + 3 H_{2}O \\ & \hline \\ & Zn + 2 MnO_{2} + 2 H_{3}O^{+} & \rightleftharpoons Zn^{2+} + Mn_{2}O_{3} + 3 H_{2}O \end{array} \]
<div>
\[
\begin{array}{ll}
Ox.:  & Zn                                 & \rightleftharpoons Zn^{2+} + 2 e^{-} \\
Red.: & 2 MnO_{2} + 2 e^{-} + 2 H_{3}O^{+} & \rightleftharpoons Mn_{2}O_{3} + 3 H_{2}O \\
&     \hline \\
&     Zn + 2 MnO_{2} + 2 H_{3}O^{+}        & \rightleftharpoons Zn^{2+} + Mn_{2}O_{3} + 3 H_{2}O
\end{array} 
\]
</div>

Tipp: In MOODLE kann man LaTeX-Formeln einfach im eingebauten Editor im ganz normalen Texteingabemodus (also nicht etwa im HTML-Eingabemodus) einbetten in der Form:
$$ 2 H_{2} + O_{2} \ \xrightarrow{\Delta T} \ 2 H_{2}O $$