This article explains how to embed MathML-formatted formulas into HTML pages using MathJax. MathML is an XML-based language for describing mathematical expressions, and can be rendered in browsers via MathJax.
Setting Up MathJax
First, add the MathJax script to the <head> section of your HTML. Here’s an example code for setting up MathJax:
<head>
<meta charset="utf-8">
<script>window.MathJax = { MathML: { extensions: ["mml3.js", "content-mathml.js"]}};</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>This code loads MathJax and configures it to render MathML-formatted formulas in the browser.
Embedding MathML Formulas
Next, you can add the MathML formulas you want to embed to your HTML content. Here’s an example of a simple MathML formula:
<math display="block">
<apply>
<int/>
<bvar>
<ci>x</ci>
</bvar>
<apply>
<root/>
<apply>
<power/>
<ci>x</ci>
<cn>-1</cn>
</apply>
</apply>
</apply>
</math>In the above example, a MathML-formatted formula is written inside the <math> element. When MathJax is enabled, this MathML formula is automatically rendered in the browser and displays mathematical expressions.
Displaying Results
Save this HTML code in an editor and try opening it in a web browser such as Google Chrome. The MathML formulas will be nicely rendered by MathJax and displayed in a readable format.
Using this method, you can easily embed MathML-formatted formulas into HTML pages. When creating documents containing mathematical content, you can present formulas in a format that’s easy for readers to understand.
MathJax official website: https://www.mathjax.org/