Mathematical formulas in online documentation

If your authoring tool does not have an integrated formula or equation editor, you can still seamlessly integrate mathematical formulas into an online documentation: You can create the formula with an external formula or equation editor, display the MathML code of the formula there, and then copy and paste the MathML code as an HTML snippet into your text.

Note: Another option is to save a formula as an SVG image, and then include this SVG image in the online documentation. However, this has the disadvantage that in this case, you have to save each formula twice to be able to edit the formula again later if necessary: once as SVG export and once in the source format.

Example

The following formula has been included as MathML code in this document.

 

x = - b ± b 2 - 4 ⁢ a ⁢ c 2 ⁢ a

Implementation

Insert the following HTML snippet into your text. It contains a DIV element for formatting, plus the MathML code generated by the formula editor. Replace the MathML code in the example with the code generated by your formula editor for your formula.


<div style="font-size:26px; align:left">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
      </mrow>
      <mo>±</mo>
      <msqrt>
        <mrow>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>-</mo>
          <mrow>
            <mn>4</mn>
            <mo>⁢</mo>
            <mi>a</mi>
            <mo>⁢</mo>
            <mi>c</mi>
          </mrow>
        </mrow>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>⁢</mo>
      <mi>a</mi>
    </mrow>
  </mfrac>
</mrow>
</math>
</div>

Option: JavaScript libraries such as MathJax or KaTeX

Tip: If a browser supported by your product does not display MathML correctly, or if your formulas are already available in on of the formats TeX or ASCIImath, you should take a look at the JavaScript libraries MathJax and KaTeX. These libraries ensure correct display even in older browsers and offer a wealth of configuration and display options.