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.