Integrating Formulas into Website

If you want to publish mathematical or chemical formulas on the Internet on a website, you are usually faced with a small problem.

Simple solution

In the simplest case you can use the Word formula editor, take a screenshot of the formula and insert the formula as an image. However, this procedure is only suitable if you only need a small formula once a year; otherwise it becomes very cumbersome very quickly. Pictures also have the disadvantage that they are (so far) not well machine-readable and so the formula content of search engine robots would be badly interpretable. A markup language like MathML is better suited for this.

Include Formula with MathML

Include MathJax script

Since it is not guaranteed that MathML is supported by all browsers, you first have to include the following library in the header area of your website or in the website template.

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

This library or script from Mathjax ensures that the formulas are displayed correctly. This code also ensures that the latest version of the library is always loaded.

In DA-HelpCreator you go to Settings (F4) either via the toolbar or via Export => Settings and insert the code at the appropriate place.

Image for HTML template settings in DA-HelpCreator

Creating a Formula with MathML

It is not recommended to learn MathML yourself and then type in the formulas in this special syntax, because this is completely impracticable and effort and benefit are out of proportion to each other. Instead you should use a suitable formula editor. For MathML there is a very good formula editor online from Wiris.com, which can be found under the following link:

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

MathML-Editor of Wiris.com

Click on the desired formula in the toolbars.

Then copy the MathML code from the text field on the right.

Insert MathML code in Webeite

Now you can paste the copied code at the desired place in the text of the website. You can also paste the code into HTML tags like <center> to center the formula, for example.

If you want to insert the MathML code for the formula with the DA-HelpCreator, there are two ways, depending on whether you use the Markdown editor or the HTML editor.

In the Markdown editor, the copied MathML code is simply pasted into the appropriate place using a copy paste.

Screenshot Inserting a MathML formula using the Markdown Editor
Inserting a MathML formula using the Markdown Editor

When using the HTML editor, you have to switch to the Code tab and then copy paste the MathML code to the desired location.

Screenshot Inserting a MathML formula using the HTML Editor
Inserting a MathML formula using the HTML Editor

Important note: Please don’t be surprised if the formula is not displayed in full beauty in the editor view or in the preview view. This is because the preview does not render the formula correctly yet. To see how the formula is displayed in the browser, go to Website Export in the toolbar and then to Preview Website.

Create preview web page in DA-HelpCreator

Result / Preview website

A possible result could look like this in the preview and on the website:

Result of formula representation in the webpage

Leave a Reply

Your email address will not be published. Required fields are marked *