Formeln in Webseite integrieren

Möchte man mathematische oder chemische Formeln im Internet auf einer Webseite veröffentlichen, steht man meist erstmal vor einem kleinen Problem.

Einfach Lösung

Im einfachsten Fall kann man den Word Formeleditor benutzen, einen Screenshot von der Formel machen und die Formel als Bild einfügen. Diese Vorgehensweise eignet sich aber nur, wenn man nur mal eine kleine Formel im Jahr braucht; ansonsten wird es sehr schnell umständlich. Bilder haben auch noch den Nachteil, dass sie (bisher) nicht gut maschinenlesbar sind und so wäre der Formelinhalt von Suchmaschinen-Robots schlecht interpretierbar. Dafür eignet sich besser eine Markup-Language, wie MathML.

Formel einbinden mit MathML

MathJax-Script einbinden

Da nicht sichergestellt ist, dass MathML von allen Browsern unterstützt wird, muss man als erstes die folgende Bibliothek im Header-Bereich seiner Webseite bzw. im Webseiten-Template einbinden.

<script src=’https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML’></script>

Diese Bibliothek bzw. Script von Mathjax stellt sicher, dass die Formeln richtig dargestellt werden. Mit diesem Code wird auch sichergestellt, dass immer die letzte Version der Bibliothek geladen wird.

In DA-HelpCreator geht man dazu auf Einstellungen (F4) entweder über die Toolbar oder über Export => Einstellungen und fügt den Code an entsprechender Stelle ein.

Bild für Einstellungen zum HTML-Template im DA-HelpCreator

Formel mit MathML erstellen

Sich selbst MathML anzueignen und dann die Formeln in dieser speziellen Syntax einzutippen ist nicht zu empfehlen, da dies völlig unpraktikabel ist und Aufwand und Nutzen in keinem Verhältnis zueinander stehen. Stattdessen sollte man einen passenden Formel-Editor benutzen. Für MathML gibt es einen sehr guten Formel-Editor online von Wiris.com, welcher unter folgenden Link erreichbar ist:

http://www.wiris.com/editor/demo/de/developers

MathML-Editor von Wiris.com

Über die Symbolleisten klickt man sich die gewünschte Formel zusammen.

Danach kopiert man sich aus dem Textfeld rechts den MathML-Code.

MathML-Code in Webeite einfügen

Nun kann man den kopierten Code an der gewünschten Stelle im Text der Webseite einfügen. Den Code kann man auch in HTML-Tags, wie <center>  einfügen, um die Formel zum Beispiel mittig auszurichten.

Möchte man den MathML-Code für die Formel mit dem DA-HelpCreator einfügen, kann das über zwei Wege erfolgen, abhängig davon ob man den Markdown-Editor oder dem HTML-Editor verwendet.

Beim Markdown-Editor wird der kopierte MathML-Code einfach per Copy-Paste an der entsprechenden Stelle eingefügt.

DA-HelpCreator MathML Formel einfügen mittels Markdown-Editor
MathML-Formel über den Markdown-Editor einfügen

Bei Verwendung des HTML-Editors muss man auf den Reiter Code wechseln und dann an der gewünschten Stelle den MathML-Code per Copy-Paste platzieren.

DA-HelpCreator MathML Formel einfügen mittels HTML-Editor
MathML-Formel über den HTML-Editor einfügen

Wichtiger Hinweis: Bitte nicht wundern, wenn die Formel nicht in voller Schönheit in der Editor-Ansicht oder in der Vorschau-Ansicht angezeigt wird. Das liegt daran, dass die Vorschau die Formel noch nicht richtig rendert. Um zu sehen, wie die Formel im Browser beim Betrachter angezeigt wird, geht man auf Export-Webseite in der Toolbar und dann auf Vorschau Webseite.Vorschau Webseite erzeugen im DA-HelpCreator

Ergebnis / Vorschau Webseite

Ein mögliches Ergebnis könnte dann in der Vorschau und auf der Webseite so aussehen:

Ergebnis Formeldarstellung in der Webseite

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert