MathJax für Anfänger: Einbinden, Brüche, Befehle und Beispiele

Ich habe vor kurzem festgestellt, dass MathJax die derzeit wohl beste Methode ist, mathematische Formeln auf einer Website darzustellen. Gesehen hatte ich MathJax-generierte Formeln schon oft, selbst jedoch noch nie irgendwo eingebaut. Daher musste ich, quasi als MathJax-Anfänger und Quereinsteiger zugleich herausfinden, wie das geht.

Um MathJax auf der eigenen Website zu verwenden, lädt man die MathJax-JavaScript-Bibliothek (aktuell Version 4) mit einer einzigen Zeile im <head> der Seite. Dann schreibt man Formeln in LaTeX direkt in den Text: zwischen \( und \) für eine Formel in der Zeile, zwischen \[ und \] für eine abgesetzte Formel. Einen Bruch schreibt man zum Beispiel als \frac{Zähler}{Nenner}.

Wie geht das alles aber im Detail? Hier habe ich alle Schritte komplett und der Reihe nach dokumentiert.

Grundlagen für die Verwendung von MathJax: Formel-Markup und JavaScript

Ich sage hier nochmal kurz, was ich in meinem Artikel Mathematische Formeln auf Websites schreiben: So geht’s im Detail beschrieben habe: Die Grundlage für jede ansprechende Formeldarstellung auf einer Website ist ein gutes mathematisches Markup.

Das bedeutet, man muss eine Möglichkeit haben, die Struktur der mathematischen Formel so aufzuschreiben, dass der Computer bzw. die Software, welche die Formel darstellen soll, das auch kann. Interessant sind als mögliche Markup-Sprachen für den MathJax-Input aus meiner Sicht MathML und vor allem LaTeX.

Mehr zum allgemeinen Konzept von Markup und Markup-Sprachen finden Sie in meinem Artikel Was ist Markup? Bedeutung auf Deutsch, Beispiele, 21 Fakten. Für die Anwendung bei Formeln ist wichtig, dass Markup die Informationen über die Struktur eines Textes oder Dokuments enthält, die dann verwendet werden können, um eine besonders geeignete Darstellung dieses Textes (hier der Formel) zu erreichen.

Soll ich LaTeX oder MathML für MathJax-Formeln verwenden?

Ich persönlich finde die Verwendung von LaTeX als Input für MathJax der Nutzung von MathML als MathJax-Input überlegen. Der Grund dafür ist zunächst einfach der, dass ich LaTeX vor meiner Beschäftigung mit MathJax bereits beherrscht hatte. Der Unterschied geht jedoch noch etwas weiter.

MathML ist von der Schreibweise der Formel her unübersichtlicher als LaTeX. Das liegt ganz einfach an den XML-artigen Markup-Tags (und zwar mit Anfangs- und End-Tags), die man hier verwendet. In LaTeX ist die Begrenzung von Ausdrücken meist über geschwungene Klammern möglich. Bei einzelnen hoch- oder tiefgestellten Buchstaben oder Symbolen sind gar keine einschließenden Klammern nötig.

Vom Workflow her hätte MathML für mich persönlich also den Nachteil, dass ich es erst erzeugen müsste. Dafür kann man einen speziellen (Formel-)Editor oder einen LaTeX-nach-MathML-Übersetzer verwenden. Das hätte aber für die Anwendung in MathJax keinen Sinn, da ich dort meinen LaTeX-Formelcode sowieso auch direkt als Eingabe für MathJax verwenden kann.

Auch abgesehen von meiner persönlichen Präferenz und meinem Hintergrund als Naturwissenschafter gibt es also gute Gründe, sich direkt auf eine Eingabe von LaTeX-Formelmarkup einzustellen.

Vorteile von MathJax gegenüber anderen Möglichkeiten, mathematische Formeln auf Websites einzubinden

Geschrieben wird die Formel bei der Benützung von MathJax übrigens direkt im Text der Website. Der Anfang und das Ende der Formel werden durch Tag-ähnliche Beginn und End-Zeichen gekennzeichnet, dazwischen steht das Formel-Markup.

Das ist aus mehreren Gründen ein Riesenvorteil: Erstens findet man dadurch den Formelcode sofort und ganz leicht, und zwar direkt im Kontext der Website, wo er auch gespeichert wird und ist. Der Speicherort des Codes spielt vor allem für Korrekturen und Änderungen eine große Rolle. Aber es wäre auch mühsam, den Text der Website und die Formeln getrennt voneinander speichern und organisieren zu müssen.

Zweitens wird der Prozess des Schreibens durch eine Formel nicht nennenswert unterbrochen. Sie brauchen nicht das Fenster zu wechseln, keinen zusätzlichen Editor zu verwenden oder gar erst zu installieren. Sie brauchen auch keine Grafik aus dem Code zu erzeugen, um dieses Bild dann auf der Website einzubinden. Das gleiche gilt für späteres Nacharbeiten: Korrekturen und Änderungen können ohne Umwege direkt im Text vorgenommen werden.

Mögliche Probleme bei der Verwendung von MathJax für die Darstellung mathematischer Formeln auf Websites

Ich weiß schon, dass ich das alles sehr positiv beschreibe, aber so sehe ich es auch. Trotzdem kann es auch bei der Verwendung von MathJax für die Darstellung mathematischer Formeln Probleme geben.

Ein mögliches Problem ist, so unwahrscheinlich es klingt, die Unerreichbarkeit des CDN, falls man das benutzt. Das Problem kann aber auch bei lokalen MathJax-Installationen auf der eigenen Website auftreten (was das ist, dazu komme ich gleich noch): Wenn man die JavaScript-Bibliothek nicht laden kann, ob lokal oder vom CDN, dann können auch keine Formeln dargestellt werden.

Stattdessen bekäme der Besucher das Formel-Markup zu sehen. Gut, das ist immer noch besser als nichts, aber das ist natürlich nicht der Sinn der Sache. So komme ich mir übrigens manchmal vor, wenn ich Titel oder Abstracts von neuen Veröffentlichungen auf arXiv.org sehe, wenn die Autoren dort die LaTeX-Syntax nicht entfernt haben (aber das nur als kleine Nebenbemerkung).

Ein anderes mögliches Problem ist die Blockade (bzw. das nicht-aktiviert-Sein) von JavaScript im Internet-Browser des Besuchers der Website. Dass jemand JavaScript gar nicht aktiviert hat, kann zwar sein, ist aber in der heutigen Zeit immer seltener geworden. Viel zu wichtig ist JavaScript inzwischen für die Funktion der meisten Websites geworden, die viele von uns täglich lesen.

Dass JavaScript von einem Blocker im Internet-Browser behindert wird, ist da schon häufiger. Besonders beliebt sind Werbeblocker (Ad-Blocker) oder andere Browser-Erweiterungen, die gezielt JavaScript-Skripte blockieren. Dabei kann man auch Filter anlegen, die bestimmte Muster in den Namen der Skript-Dateien erkennen und dann blockieren oder auch nicht. Eventuell kann auch in so einem Muster der Dateiname eines MathJax-Skripts "gefangen" werden.

Grundsätzlich sollte es diese Probleme aber nicht geben. Oder eben nur ganz selten. Häufiger sind drei hausgemachte Ursachen, wenn statt einer Formel der LaTeX-Code auf der Seite stehen bleibt (alle drei habe ich nachgestellt):

• Das Skript wird gar nicht geladen, etwa weil die Adresse falsch ist. Eine typische Falle: In einer alten Anleitung für Version 3 einfach die 3 durch eine 4 ersetzen. Die Adresse …/mathjax@4/es5/tex-mml-chtml.js gibt es nicht, denn den Ordner es5 hat Version 4 nicht mehr. Dann rendert MathJax gar nichts.
• Die Formel steht zwischen einfachen Dollarzeichen, also $…$. Das ist in MathJax standardmäßig kein Begrenzer, weil Dollarzeichen in normalem Text zu oft vorkommen („kostet $2.50“). Doppelte Dollarzeichen $$…$$ für abgesetzte Formeln funktionieren dagegen von Haus aus.
• Eine Klammer fehlt, etwa in \frac{1}{2. Dann zeigt MathJax je nach Version eine rote Fehlermeldung („Missing close brace“) oder lässt den Code einfach stehen.

Die MathJax JavaScript-Bibliothek auf der eigenen Website aktivieren bzw. laden lassen

Um MathJax für die Darstellung der Formeln auf der eigenen Website einzusetzen, muss man es im Internet-Browser des Website-Besuchers laden lassen, bevor die Formel dargestellt wird. Das passiert mittels etwas JavaScript im Kopf der Website. Wenn Sie eine Website ohne Plugin-Funktionalität haben oder dafür kein Plugin benutzen wollen, dann kopieren Sie die folgende Zeile zwischen die HTML-Tags

<head>
  ...
  ...
</head>

auf Ihrer Website:

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

Diese Zeile lädt MathJax in der jeweils neuesten Version 4.x vom CDN jsDelivr, und zwar das Paket für LaTeX- und MathML-Eingabe mit HTML-Ausgabe. So steht es auch in der Anleitung von MathJax selbst. Ich habe sie auf einer Testseite ausprobiert (Stand Oktober 2026 lädt sie MathJax 4.1.3).

Falls Sie MathJax nach einer älteren Anleitung eingebaut haben (auch nach diesem Artikel in seiner alten Fassung): Dort stand eine zweite Zeile mit polyfill.io. Diese Zeile gehört gelöscht. Die Domain wurde 2024 verkauft und danach benutzt, um Schadcode in Websites einzuschleusen; MathJax rät inzwischen ausdrücklich davon ab. Moderne Browser brauchen diese Hilfsbibliothek ohnehin nicht. Die alte Adresse für Version 3 (…/mathjax@3/es5/tex-mml-chtml.js) funktioniert übrigens weiterhin, liefert aber eben Version 3.

Wenn Sie ein Plugin benutzen, z.B. in WordPress, dann erledigt dieses Plugin das Vorladen von MathJax auf Ihrer Website.

Das Plugin wird im Allgemeinen vor dem Laden auch noch die Konfiguration von MathJax erledigen. Dafür gibt es dann im Plugin ein paar Einstellungen, die festlegen, was geladen wird (MathJax hat mehrere Komponenten, je nach gewünschter Funktionalität) und wie die Befehle aussehen, die man beim Schreiben um die Gleichung oder Formel herum platzieren muss.

Ich habe den Installationsprozess von MathJax für WordPress über ein Plugin bereits in einem anderen Artikel hier auf WebsiteBerater.com im Detail beschrieben. In Mathematische Gleichungen und Formeln in WordPress: So geht’s lesen Sie alles, was Sie als WordPress-Anwender tun müssen, um MathJax auf Ihrer Website zum Laufen zu bringen. Dieser Link bringt Sie übrigens direkt zum Abschnitt über die Plugin-Installation.

Einstellungen für MathJax auf der eigenen Website

Für MathJax lassen sich auf der eigenen Website einige Dinge einstellen. Das meiste davon ist ideal vorbereitet und muss nicht extra konfiguriert werden. Trotzdem kann man, wenn man möchte, z.B. die Anfangs- und End-Tags für das Formel-Markup umstellen oder Input- und Output-Optionen festlegen.

Ich persönlich freue mich inzwischen (ich gebe zu, vor 20 Jahren war ich noch nicht so) immer, wenn etwas direkt nach der Installation einfach so funktioniert und die Einstellungen von Anfang an gut gesetzt sind. In meinem Fall habe ich MathJax per WordPress Plugin installiert und bin mit den dort angebotenen Einstellungen vollends zufrieden gewesen.

Interessant war aber auch, dass die meisten Einstellungen bereits auf jene Werte gesetzt waren, die ich verwendet hätte (die Details dazu finden Sie in meinem Artikel Mathematische Gleichungen und Formeln in WordPress: So geht’s, wenn es dort um die Plugin-Einstellungen geht - der Link bringt Sie direkt dorthin).

Wichtig bei den Einstellungen ist also Folgendes:

• Woher kommt die MathJax Datei (d.h. die Datei, in der die MathJax-Javascript-Bibliothek steckt und aus der diese geladen wird)
• Wie soll MathJax auf der Website aktiviert werden (d.h. grundsätzlich vorgeladen werden oder nur bei Bedarf)?
• Welche Anfangs- und Endtags sollen verwendet werden?
• Was ist das Input-Format, was das Output-Format?

Um sich mit diesen verschiedenen Möglichkeiten der Konfiguration auseinanderzusetzen, empfehle ich Ihnen direkt die Dokumentation der Konfiguration von MathJax direkt auf der MathJax-Website, die aktuell und an die jeweils aktuellste Version angepasst ist. Als MathJax-Einsteiger kann man sich allerdings meist auf die Voreinstellungen verlassen.

Verschiedene Varianten für das Einfügen einer Formel mit MathJax: Inline oder als eigener Absatz (display)

Beim Schreiben mathematischer Formeln kommt es vor allem darauf an, ein korrektes aber auch ansprechendes Layout zu bekommen. Dabei spielt unter anderem der verfügbare Platz eine Rolle. Konkret für den Textsatz heißt das bei einer Formel z.B., ob die Formel in der Zeile mit dem Text stehen kann/soll, oder extra, größer und in eine neue Zeile geschrieben wird.

In LaTeX heißt dieser Unterschied inline- bzw. display-Stil. Die inline Formel ist dabei unter anderem im Layout etwas komprimierter und verwendet kleinere Schriftgrößen für hoch- und tiefgestellten Text als der abgesetzte display-Stil. Daher hat eine Formel im inline-Stil auch besser im Text platz als eine im display-Stil je haben könnte, auch wenn auch durch eine inline-Formel die Zeilen etwas verschoben werden.

Ich zeige Ihnen den Unterschied hier am besten an einem konkreten Beispiel. Zunächst kann ich Ihnen sagen, dass die Lösung für eine quadratische Gleichung, die uns vermutlich allen schon das ein oder andere Mal begegnet ist, die Form \( x_{1,2}=\frac{1}{2a}\left(-b\pm\sqrt{b^2-4ac}\right) \) hat, und zwar im inline-Stil.

Abgesetzt hingegen sieht diese Formel so aus: \[ x_{1,2}=\frac{1}{2a}\left(-b\pm\sqrt{b^2-4ac}\right) \] In beiden Fällen habe ich den Code einfach im Textfluss zwischen die entsprechenden Anfangs- und Endtags für inline- und display-Stil geschrieben. Man sieht den Unterschied deutlich beim Bruch, der Größe der runden Klammern und dem Wurzelzeichen.

Jetzt fragen Sie natürlich zu Recht, wie diese verschiedenen Tags aussehen, und das bin ich Ihnen tatsächlich noch schuldig. Für eine inline-Formel schreiben Sie Ihren LaTeX-Code zwischen

\( ... \)

also jeweils ein Backslash, gefolgt von runden Klammern, und für eine display-Formel verwenden Sie folgendes:

\[ ... \]

also jeweils ein Backslash, gefolgt von eckigen Klammern. Solange MathJax geladen ist, wenn Sie so etwas im Text schreiben, kann die Formel auch richtig dargestellt werden, und zwar auch im richtigen Stil.

Die wichtigsten LaTeX-Befehle für MathJax: Bruch, Wurzel, Potenz, Leerzeichen

Zwischen die Begrenzer kommt ganz normales LaTeX. Für den Anfang reichen erstaunlich wenige Befehle. Die folgende Tabelle zeigt links die Eingabe und rechts, was MathJax hier auf der Seite daraus macht:

Was	LaTeX-Eingabe	Ergebnis
Bruch	\frac{a}{b}	\( \frac{a}{b} \)
Bruch, im Text in voller Größe	\dfrac{a}{b}	\( \dfrac{a}{b} \)
Hochgestellt (Potenz)	x^2 \quad x^{10}	\( x^2 \quad x^{10} \)
Tiefgestellt (Index)	x_1 \quad x_{12}	\( x_1 \quad x_{12} \)
Wurzel, n-te Wurzel	\sqrt{x} \quad \sqrt[3]{x}	\( \sqrt{x} \quad \sqrt[3]{x} \)
Griechische Buchstaben	\alpha, \pi, \Omega	\( \alpha, \pi, \Omega \)
Summe, Integral	\sum_{i=1}^{n} i \quad \int_0^1 f(x)\,dx	\( \sum_{i=1}^{n} i \quad \int_0^1 f(x)\,dx \)
Grenzwert	\lim_{x \to 0} \frac{\sin x}{x} = 1	\( \lim_{x \to 0} \frac{\sin x}{x} = 1 \)
Klammern, die mitwachsen	\left( \frac{a}{b} \right)	\( \left( \frac{a}{b} \right) \)
Mal, Vergleiche	a \cdot b \times c \neq d \leq e \approx f	\( a \cdot b \times c \neq d \leq e \approx f \)
Leerzeichen: schmal, breit, sehr breit	a\,b \quad c \qquad d	\( a\,b \quad c \qquad d \)
Normaler Text in der Formel	\text{für alle } x	\( \text{für alle } x \)
Vektor, Matrix	\vec{v} \quad \begin{pmatrix} a & b \\ c & d \end{pmatrix}	\( \vec{v} \quad \begin{pmatrix} a & b \\ c & d \end{pmatrix} \)

Zwei Dinge fallen beim Ausprobieren schnell auf. Erstens ignoriert MathJax normale Leerzeichen in einer Formel; Abstand entsteht nur mit Befehlen wie \, oder \quad. Zweitens gehören mehrere Zeichen in einem Exponenten oder Index in geschwungene Klammern: x^10 ergibt \( x^10 \), erst x^{10} ergibt \( x^{10} \). Eine vollständige Liste aller Befehle, die MathJax versteht, finden Sie in der MathJax-Dokumentation.

Soll ich MathJax über ein CDN laden oder eine eigene Installation auf der Website hosten?

MathJax selbst empfiehlt ein Content Delivery Network (CDN) wie jsDelivr. Es gibt aber drei Gründe, MathJax stattdessen selbst zu hosten:

• Man hat die MathJax Bibliothek, die man verwendet, gerne selbst unter Kontrolle.
• Man möchte eine bestimmte Version der Bibliothek anstatt der aktuellen verwenden.
• Datenschutz: Beim Laden vom CDN schickt der Browser jedes Besuchers dessen IP-Adresse an den Betreiber des CDN.

Zu Punkt eins gibt es zu sagen, dass man sich von einem CDN eigentlich ganz bequem immer die aktuellste Version von MathJax laden kann. Dass ein CDN ausfällt, ist, wie bereits oben erwähnt, eher unwahrscheinlich. Daher sollte man mit der Verfügbarkeit tatsächlich keine Probleme haben.

Ein berechtigter Einwand gegen ein CDN ist, dass es eine mögliche Sicherheitslücke darstellt, weil man ja über den Code, der dort bereitgestellt wird, keine direkte Kontrolle hat. Um ehrlich zu sein, glaube ich aber nicht, dass die durchschnittliche Website, auf der JavaScript Code selbst gehostet wird, sicherer gegen solche Supply-Chain-Attacks ist als gut gewartete JavaScript-CDNs. Trotzdem ist wichtig, dass man sich auf diesem Weg keinen Schadcode auf die eigene Website lädt und diesen auch noch den Besuchern serviert. Dass das keine Theorie ist, zeigt die oben erwähnte Domain polyfill.io.

Eine bestimmte Version von MathJax kann man sich ebenfalls über ein CDN holen, indem man die volle Versionsnummer in die Adresse schreibt ([email protected] statt mathjax@4).

Für Websites im deutschsprachigen Raum ist der dritte Punkt der gewichtigste. Wenn MathJax vom CDN kommt, gehört dieser Datenfluss in Ihre Datenschutzerklärung; gleichen Sie das also ab, bevor Sie die Zeile einbauen. Ich habe mich hier auf WebsiteBerater.com für die eigene Kopie entschieden: MathJax liegt auf dem Server dieser Website, und eine Formel löst keine Anfrage an einen fremden Server aus. Der Preis dafür ist, dass ich Updates selbst einspielen muss. Wie das geht (im Kern: die Dateien des npm-Pakets mathjax auf den eigenen Server kopieren und die Adresse im <script> darauf ändern), beschreibt MathJax in Hosting Your Own Copy of MathJax.

Eine MathJax-Formel auf der eigenen Website darstellen: Drei konkrete Beispiele

Um zu sehen, was man in der Praxis tun muss, damit man tatsächlich eine Formel auf einer Website mit MathJax hingeschrieben bekommt, zeige ich hier drei Beispiele. Zunächst eine etwas komplexere Formel, die ich auch bereits als Beispiel in meinem Artikel Mathematische Formeln auf Websites schreiben: So geht’s benutzt habe: Eine Umschreibung eines vierdimensionalen Integrals in hypersphärische Koordinaten (falls Sie sich fragen, wozu das gut sein soll: Es ist für gewöhnlich im Alltag unerheblich).

Das Formel-Markup in LaTeX sieht folgendermaßen aus (und zwar ohne irgendwelche Tags rundherum):

\int_{-\infty}^\infty \!\! d^4q \rightarrow 
\int_0^\infty \!\! d(q^2) \frac{q^2}{2}
\int_{-1}^1 \!\! dz \sqrt{1-z^2}
\int_{-1}^1\!\! dy 
\int_0^{2 \pi} \!\! d\phi

Diese Gleichung sehen wir uns jetzt in verschiedenen Formen an, und zwar hauptsächlich, was den Input, aber auch den Output betrifft.

MathJax Formel-Beispiel 1: Inline LaTeX-Gleichung

Zunächst möchte ich Ihnen zeigen, wie diese Formel in MathJax dargestellt wird, wenn man den inline-Stil einsetzt. Der Formelcode dafür lautet

\(
\int_{-\infty}^\infty \!\! d^4q \rightarrow 
\int_0^\infty \!\! d(q^2) \frac{q^2}{2}
\int_{-1}^1 \!\! dz \sqrt{1-z^2}
\int_{-1}^1\!\! dy 
\int_0^{2 \pi} \!\! d\phi
\)

Beachten Sie dabei die einschließenden Tags, nämlich ein Backslash, gefolgt von den runden Klammern. Das Ergebnis dieses Formel-Codes, von MathJax (inline) übersetzt, sehen Sie hier im Folgenden. Dabei unterbreche ich bewusst den Textfluss nicht, sondern schreibe einfach weiter: \( \int_{-\infty}^\infty \!\! d^4q \rightarrow \int_0^\infty \!\! d(q^2) \frac{q^2}{2} \int_{-1}^1 \!\! dz \sqrt{1-z^2} \int_{-1}^1\!\! dy \int_0^{2 \pi} \!\! d\phi \). Das Ergebnis sieht tatsächlich etwas zusammengedrückt aus, passt aber besser in die Textzeilen als das display-Gegenstück, wie wir gleich sehen werden.

MathJax Formel-Beispiel 2: LaTeX-Formel im Display-Stil (abgesetzt)

Nun also noch einmal die Gleiche Formel, aber in anderen Tags, nämlich die des display-Stils in MathJax:

\[ 
\int_{-\infty}^\infty \!\! d^4q \rightarrow 
\int_0^\infty \!\! d(q^2) \frac{q^2}{2} 
\int_{-1}^1 \!\! dz \sqrt{1-z^2} 
\int_{-1}^1\!\! dy 
\int_0^{2 \pi} \!\! d\phi 
\]

Auch hier schreibe ich einfach weiter, damit Sie sehen, welchen Unterschied die beiden verschiedenen Tag-Paare auslösen. Hier kommt also die Formel, ohne extra Absatz (denn der wird durch den display-Stil automatisch eingefügt): \[ \int_{-\infty}^\infty \!\! d^4q \rightarrow \int_0^\infty \!\! d(q^2) \frac{q^2}{2} \int_{-1}^1 \!\! dz \sqrt{1-z^2} \int_{-1}^1\!\! dy \int_0^{2 \pi} \!\! d\phi \] und hier geht es mit dem Text wieder weiter. Wie Sie sehen, werden auf der angezeigten Website tatsächlich vor und nach der Formel zwei Absätze eingefügt, obwohl das im Text, wie er im Editor der Website angezeigt wird, nicht der Fall ist.

MathJax Formel-Beispiel 3: MathML Formel

Nun noch zur dritten Variante für dieses Beispiel: Der Verwendung von Formel-Markup in MathML. Dazu brauchen wir einen kleinen Umweg, denn so eine Formel schreibe ich nicht direkt in MathML. Es ist zwar möglich, einen Formeleditor zu benutzen, aber auch LaTeX-Editoren können MathML Code exportieren.

Dass dieser Umweg über MathML für MathJax nicht zielführend ist, wenn man LaTeX-Code zur Verfügung hat, ist irgendwie klar. Trotzdem gibt es diese Möglichkeit und daher soll auch das Beispiel sie klar machen.

Der MathML-Code dieser Formel sieht folgendermaßen aus:

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtable class="m-equation" displaystyle="true" style="display: block; margin-top: 1.0em; margin-bottom: 2.0em">
  <mtr>
    <mtd>
      <mspace width="6.0em"></mspace>
    </mtd>
    <mtd columnalign="left">
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mrow>
            <mo>-</mo>
            <mo>&#x0221E;</mo>
          </mrow>
          <mo>&#x0221E;</mo>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <msup>
        <mi>d</mi>
        <mn>4</mn>
      </msup>
      <mi>q</mi>
      <mo>&#x02192;</mo>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>0</mn>
          <mo>&#x0221E;</mo>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mi>d</mi>
      <mrow>
        <mo form="prefix">(</mo>
        <msup>
          <mi>q</mi>
          <mn>2</mn>
        </msup>
        <mo form="postfix">)</mo>
      </mrow>
      <mfrac linethickness="1">
        <mrow>
          <msup>
            <mi>q</mi>
            <mn>2</mn>
          </msup>
        </mrow>
        <mn>2</mn>
      </mfrac>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>-1</mn>
          <mn>1</mn>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mo>&#x02146;</mo>
      <mi>z</mi>
      <msqrt>
        <mrow>
          <mn>1</mn>
          <mo>-</mo>
          <msup>
            <mi>z</mi>
            <mn>2</mn>
          </msup>
        </mrow>
      </msqrt>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>-1</mn>
          <mn>1</mn>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mo>&#x02146;</mo>
      <mi>y</mi>
      <mstyle displaystyle="true">
        <munderover>
          <mo>&#x0222B;</mo>
          <mn>0</mn>
          <mrow>
            <mn>2</mn>
            <mi>&#x003C0;</mi>
          </mrow>
        </munderover>
      </mstyle>
      <mi>&#x0200B;</mi>
      <mi>&#x0200B;</mi>
      <mo>&#x02146;</mo>
      <mi>&#x003D5;</mi>
    </mtd>
    <mtd columnalign="right" style="width: 100%">
      <mtext id="">(1)</mtext>
      <mspace width="6.0em"></mspace>
    </mtd>
  </mtr>
</mtable>
</math>

Ließe man nun MathJax diese Formel rendern, dann erhielte man dasselbe Resultat, vorausgesetzt, MathJax wird so geladen, dass es MathML auch korrekt darstellt (und nicht nur LaTeX). Der Konjunktiv im vorangegangenen Satz kommt nicht von ungefähr: Ich habe die MathML-Unterstützung nicht aktiviert, weil ich sie nie benutze.

Für MathML brauchen Sie MathJax inzwischen aber auch gar nicht mehr. Seit Januar 2023 stellen alle gängigen Browser MathML selbst dar: Chrome und Edge ab Version 109, Firefox und Safari schon viel länger (webstatus.dev). Genau darauf setzt auch WordPress mit seinem eigenen Block „Mathematik“ (ab Version 6.9): Er wandelt Ihr LaTeX schon im Editor in MathML um. Mehr dazu in meinem Artikel über mathematische Gleichungen und Formeln in WordPress.

Diese Spezialisierung in der Konfiguration wird bei MathJax gemacht, um beim Laden der JavaScript-Bibliothek Ressourcen zu sparen. Hauptsächlich geht es dabei um die Anzahl und Größe der zu ladenden Dateien. Wenn Sie MathML als Input verwenden wollen, dann verweise ich Sie auf die entsprechende Dokumentation direkt bei MathJax.org.

Apropos Formelcode: Wie ich den Formelcode hier so übersichtlich und praktisch dargestellt habe, erfahren Sie hier: So geht’s: Code-Beispiele auf der WordPress-Website und, etwas detaillierter für das Code-Plugin meiner Wahl: Das Enlighter WordPress-Plugin: Installation, Einstellungen, Vorteile.

Weiterführende Informationen zur Verwendung von MathJax

Über MathJax gibt es natürlich noch mehr zu erzählen, aber das würde hier den Rahmen sprengen. Wenn Sie LaTeX beherrschen und/oder als Input verwenden wollen, bestens. Auch zur Konfiguration mit dieser Input-Grundeinstellung gibt es noch mehr zu wissen. Alles Wissenswerte finden Sie jedenfalls auf der Website von MathJax.org und auf den Seiten der dortigen Dokumentation.

Grundsätzlich sind Sie aber aus meiner Sicht mit der üblichen Einstellung am besten beraten, nämlich:

• Formel-Markup schreiben Sie in LaTeX.
• Sie holen sich die aktuelle Version von MathJax direkt von einem Content Delivery Network, oder Sie hosten eine eigene Kopie, wenn Ihnen der Datenschutz wichtig ist.
• Die Funktionen zum Thema MathML, die in MathJax eingebaut sind, behalten Sie zwar im Hinterkopf, aktivieren und verwenden diese aber nicht.
• Sie verwenden entweder ein Plugin auf Ihrem bevorzugten Content Management System (CMS) oder laden die JavaScript Bibliothek von MathJax direkt per Skript im <head> Ihrer Website. Brauchen Sie vor allem Geschwindigkeit, lohnt ein Blick auf die Alternative KaTeX, die sich selbst „the fastest math typesetting library for the web“ nennt.
• Die beiden Varianten des inline- und display-Stils haben Sie parat, indem Sie die beiden verschiedenen Anfangs- und End-Tags verwenden. Zwischen diesen wechseln Sie nach Belieben.
• Sollten Sie die Möglichkeit haben, inline oder display-Stil für Ihre Gleichungen vorab einzustellen, wählen Sie display für eine bessere Lesbarkeit und Übersichtlichkeit Ihres Textes.

Auch zu diesen Themen hat die gerade verlinkte Dokumentation von MathJax alle Antworten für Sie parat.

Weiterführende Informationen zur Verwendung von LaTeX für die Erstellung mathematischer Formeln

Über LaTeX wurden schon vor über 20 Jahren Bücher geschrieben. Aber um ganz ehrlich zu sein, war das damals auch noch wichtiger als heute, wo sich beinahe alles an solcher Information im WWW finden lässt. Damit Sie bei Ihrer Suche nach einer geeigneten Ressource zum Thema LaTeX nicht bei null anfangen oder auf gut Glück drauflos-lesen müssen, habe ich hier einige der hilfreichsten Websites über LaTeX für Sie zusammengestellt.

Zunächst brauchen Sie, um mit LaTeX zu arbeiten, LaTeX auf Ihrem Computer. Das ist grundsätzlich kein Problem und Sie kommen kostenlos zu einer kompletten Installation. Allerdings ist LaTeX als Textverarbeitungssystem und als vernetztes System mehrerer Programmteile darauf angewiesen, dass es gut und korrekt ins jeweilige Betriebssystem passt und integriert wird. Es gibt daher für verschiedene Betriebssysteme auch verschiedene Lösungen.

Grundsätzlich bezeichnet man eine Ausgabe von LaTeX, die möglichst alles kann und die man sich auf dem eigenen Computer installieren kann, als LaTeX-Distribution. Hier hat derzeit TeX Live die Nase vorn, auch wenn die TeX Live Website eher bescheiden daherkommt.

Auf dem Mac installiert man diese Distribution am besten über MacTeX, das einem die nötigen Werkzeuge zur Verwaltung der Distribution liefert. Auch sonst wird alles gestartet und vernetzt und eingetragen, was man tun muss, um ein funktionierendes LaTeX-System zu erhalten und schließlich so schöne Formeln schreiben zu können, wie wir es aus guten wissenschaftlichen Büchern und Zeitschriften gewöhnt sind.

Apropos Formeln: MacTeX enthält auch den sehr nützlichen Formel-Editor (für LaTeX) namens LaTeXiT, den ich selbst gerne benutze. Das Praktische in diesem Fall: Man schreibt nur den Formel-Code ohne drumherum und kann anhand der Vorschau bereits die Formel begutachten. So fallen Korrekturen leicht und alles geht schnell und einfach. Hier ist ein typischer Screenshot:

Auf Windows holen Sie sich am besten MiKTeX, mit dem ich zu meiner Zeit auf Windows-Laptops gearbeitet habe. Auch dort finden Sie einen Package Manager für dieses LaTeX-Distribution und einen integrierten Editor, in diesem Fall TeXWorks. Aber auch andere Editoren kann man einsetzen, sobald man die Distribution einmal installiert hat.

Für das reine Formel-Schreiben habe ich auf Windows den Editor KLatexFormula zu meiner Zufriedenheit getestet. Dieser Funktioniert analog zu LaTeXiT auf dem Mac und hat ebenfalls ein Code- und ein Vorschaufenster im Angebot. Auf diese Weise kann man immer sicher sein, dass der auf der Website und für MathJax vorbereitete Formel-Code auch das richtige Ergebnis liefert.

Hier habe ich ebenfalls einen Screenshot gemacht, in diesem Fall auf einem älteren Laptop mit WindowsXP:

Wenn Sie also auf eine dieser Arten erfolgreich eine LaTeX-Distribution auf Ihrem Computer installiert haben und auch verwenden können, dann brauchen Sie nur noch eins:

Weiterführende Informationen zur LaTeX Syntax (wesentlich für die Erstellung mathematischer Formeln für alle, die noch nicht mit LaTeX gearbeitet haben)

LaTeX-Syntax ist, zumindest für die Erstellung von Formeln, eigentlich recht einleuchtend. Das Hauptproblem bei der Arbeit mit LaTeX für alle, die das zum ersten Mal versuchen, ist, dass man in jedem Dokument erst einmal einen ganzen Haufen von Dingen und Befehlen schreiben und am Anfang und Ende des Dokuments positionieren muss, damit das überhaupt funktioniert.

Diese Hürde gibt es bei Formeln allerdings nicht unbedingt. Wenn Sie z.B. LaTeXiT oder KLatexFormula verwenden, dann schreiben Sie wirklich nur Formel-Markup und nichts davor und auch nichts danach. Um mit diesem Teil von LaTeX zurechtzukommen, verweise ich Sie noch auf ein paar gute Online-Ressourcen:

Alle Informationen (vermutlich mehr als Sie jemals wissen wollten) zu und rund um LaTeX finden Sie auf der Website des LaTeX-Project, latex-project.org. Was die Syntax zum Schreiben von Formeln betrifft, so finden Sie dort z.B. auch eine pdf-Dokumentations-Datei zur fortgeschrittenen LaTeX-Package AMS-Math.

Etwas einfacher ist jedoch folgende Einführung zur mathematischen Seite von LaTeX und den wichtigsten Befehlen: LaTeX-Kompendium: Für Mathematiker. Lassen Sie sich dabei aber nicht vom Titel "für Mathematiker" abschrecken - es geht dabei einfach darum, rasch die wichtigsten Befehle und Funktionen mit vielen anschaulichen Beispielen zu sehen.

Weiterführende Informationen zur Verwendung von MathML

Am Ende dieser weiterführenden Informationen bleibt nun noch MathML. Von Hand schreibt es kaum jemand, weil es im Vergleich zu LaTeX einfach zu umständlich ist. Seit alle Browser es selbst darstellen, ist es aber das Format, in dem Werkzeuge wie der WordPress-Block „Mathematik“ Formeln abspeichern. Es lohnt sich also, es lesen zu können.

Wenn Sie sich aber umfassend über MathML informieren wollen, dann kann ich Ihnen die komplette MathML-Dokumentation und -Referenz bei mozilla.org für Developer empfehlen. Dort finden Sie alles, was Sie wissen wollen, und noch viel mehr.

MathJax für mathematische Formeln auf der Website: Mein Fazit

Die Verwendung von MathJax für die Darstellung mathematischer Formeln auf Websites ist für mich persönlich ideal. Die Gründe dafür sind:

• Ich bin es gewohnt, mathematische Formeln und Gleichungen in LaTeX zu schreiben.
• Die Verwendung von MathJax liefert eine ansprechende Darstellung, die von dem verwendeten Internet-Browser unabhängig ist.
• Der Workflow ist praktisch und geradlinig: Ich schreibe die Formeln direkt in den Text der Website.
• Durch den Formel-Code innerhalb des Textes haben die Formeln den idealen Speicherort und Fehler sind einfach und ohne weitere Zwischenschritte zu korrigieren.

Insgesamt habe ich hier eine angenehme und verlässliche Art des Arbeitens mit mathematischen Formeln auf meinen (WordPress-) Websites gefunden, die ich nur weiter empfehlen kann.

Wenn Sie trotzdem die Alternativen kennen lernen wollen, und zwar egal für welche Art von Website, dann empfehle ich Ihnen meinen Artikel Mathematische Formeln auf Websites schreiben: So geht’s, ebenfalls hier auf WebsiteBerater.com.

Ihr Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich, z.B. welches Problem bei Ihnen vorlag und wie Sie es konkret lösen konnten, ob mit Hilfe dieses Artikels oder ohne. Falls Ihnen der Artikel nicht geholfen hat, kommentieren Sie bitte unbedingt ein paar Zeilen zu Ihrem konkreten Problem. Ich werde versuchen, der Sache auf den Grund zu gehen.

Oder lassen Sie einfach unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!

Mehr Informationen zu Websites (mit WordPress)

Wenn Sie an Ihrer eigenen Website schreiben, tun Sie das mit einer recht hohen Wahrscheinlichkeit in WordPress. Was Sie beim Aufbau Ihrer WordPress-Website auf keinen Fall vergessen dürfen finden Sie hier: 19 Schritte zur fertigen WordPress-Website: Alle Details.