LaTex auf Websites mit Drupal verwenden

LaTex auf Websites mit Drupal verwenden

Wer LaTex kennt, wird sich jetzt vielleicht fragen, was dieses für das Erstellen von Textsatz seit den 80er Jahren entwickelte Softwarepaket mit einer Website zu tun hat. Dafür kann es gute Gründe geben.

So kann man mit LaTex relativ einfach mathematische Formeln erstellen. Mit HTML vor HTML5 ein nahezu unmögliches Unterfangen, weshalb Formeln auf den meisten Webseiten als Grafiken eingefügt werden. Aber auch das in HTML5 verfügbare MathML ist nicht gerade intuitiv. Da im akademischen Bereich häufig Kenntnisse in LaTex vorhanden sind, ist es natürlich attraktiv, wenn man für seine Website dieses auch direkt verwenden kann. Für Drupal gibt hierfür das Modul MathJax, das die hervorragende gleichnamige MathJax-Library einbindet.

Die Installation ist einfach. Die Library laden wir von der MathJax Github-Seite herunter. Anschließend entpacken wir das Paket und laden alles in einen Ordner "mathjax" im Library-Verzeichnis (in der Regel ist dies site/all/libraries) der Drupal-Installation. Als nächstes installieren wir das Drupal MathJax-Modul und aktiviert es. Das Modul bringt nur eine Berechtigung mit: "Administer MathJax". Diese gewähren wir dem oder den Administratoren der Website.

Jetzt ist es an der Zeit, zu schauen ob MathJax funktioniert. Dazu gehen wir auf die Seite admin/config/content/mathjax. Wenn wir alles richtig installiert haben, erscheint dort eine Beispielformel wie im folgenden Screenshot.

MathJax-Test zeigt: es wurde erfolgreich installiert

Damit wir auch wirklich LaTex-Formeln eingeben können, bleibt noch ein letzter Schritt zu tun. Der vom Modul bereit gestellt Inhaltsfilter muss mindestens einem Textformat zugewiesen werden. FullHTML ist da eine gute Wahl. Nach dem Aktivieren des Filters schieben wir diesen an das Ende der Filterliste. Das sieht dann so oder so ähnlich aus:

MathJax-Filter für Textformat FullHTML aktiviert

Jetzt können wir LaTex-Formeln in unseren Inhalten einsetzen. Hier ein paar Beispiele:

Anzeige alleinstehend, zentriert

Hier steht die Formel allein innerhalb einer Zeile und wird zentriert in der Mitte des Inhaltes angezeigt. Die Lesbarkeit ist sehr gut, da genügend Abstand zum Text gegeben ist.

$$f(x)=x^2-x$$

$$\displaystyle\frac{\Delta y}{\Delta x}=\frac{f(x+\Delta x)-f(x)}{\Delta x}$$

$$A=\{1,2,3,4,5\}, B=\{3,5,7\}, C=\{8,9\}, M=\{1,2,3,4,5,6,7,8,9\}$$

Inline-Anzeige 

Hier wird die Formel in einen umgebenen Fließtext eingebettet. Diese Form ist u.a. für die Formulierung von Aufgaben geeignet. Die Lesbarkeit ist etwas schlechter, vor allem bei mehrzeiligem Text.

Ermitteln Sie die erste Ableitung der Funktion <math>f(x)=x^2-x</math>, indem Sie den Differenzenquotienten <math>\displaystyle\frac{\Delta y}{\Delta x}= \frac{f(x+\Delta x)-f(x)}{\Delta x}</math> bilden und nach geeigneter Umformung den Grenzübergang <math>\Delta x\Abbildung0</math> vollziehen.

Die Ausgabe der Website sieht dann so aus:

Gerenderte Website mit LaTex-Formel und MathJax

Anpassungen des MathJax-Moduls

Bei der Arbeit mit dem Modul zeigten sich zwei Probleme. Das erste: die Konstruktion des HTML-Outputs von Mathjax mit Hilfe von <div> führte dazu, dass das Layout der Website auf manchen Seiten zerstört wurde. Die Abhilfe ist einfach. In der Datei mathjax.module (im Verzeichnis sites/all/moduls/mathjax) ändern wir die Zeile 143 von

return '<div class="tex2jax">' . $text . '</div>';

zu

return '<span class="tex2jax">' . $text . '</span>';

Jetzt wird der MathJax-Teil mit <span> konstruiert und kollidiert nicht mehr mit anderen <div>-Konstruktion der Seite.

Das zweite Problem zeigte sich erst nach einiger Zeit bei der täglichen Arbeit. Die Verwendung von Dollarzeichen für die Markierung von LaTex-Formeln führte zu fehlerhaften Darstellungen, wenn in den Texten Dollarzeichen für andere Zwecke verwendet wurden. Zum Glück läßt sich in der Konfiguration des MathJax-Moduls einstellen, welche Tags für die Markierung verwendet werden sollen. Dazu stellen wir auf der Seite admin/config/content/mathjax unter "Configuration Type" auf "Benutzerdefiniert" um und tragen im Feld "Custom configuration" diesen Code-Schnippsel ein:

MathJax.Hub.Config({
  extensions: ['tex2jax.js'],
  jax: ['input/TeX','output/HTML-CSS'],
  tex2jax: {
    inlineMath: [ ['<math>','</math>']],
    processEscapes: true,
    processClass: 'tex2jax',
    ignoreClass: 'html'
  },
  showProcessingMessages: false,
  messageStyle: 'none'
});
 

Dieser sorgt dafür, dass wir für Inline-LaTex-Code künftig die Tags <math> und </math> verwenden können. So klappt's dann auch mit den Dollarzeichen. ;-)