MathML Tutorial


MathML Tutorial

MathML stands for Mathematical Markup Language and is an XML based application. It is used to describe mathematical and scientific notations. It's 1 and 2 version were created and developed by The Math Working Group which is one of the oldest W3C Working Groups during 1996-2004. MathML version 3 was created during Math Working Group's second activity period (2006-2016)and is an ISO standard.

This tutorial will cover MathML basics and its commands available in version 3. We are using MathJax library to render MathML syntax so that it can run on all major browsers. MathJax is a javascript based platform to draw mathematical expressions and symbols in web applications.

Audience

This tutorial is designed for all those individuals who are looking for a starting point of learning MathML commands using MathJax and we cover topics suited for a beginner and an advanced user.

Prerequisites

Before proceeding with this tutorial it is advisable for you to understand the basics concepts of HTML and CSS. But the tutorial is self contained and you will be able to learn on various concepts of MathML even if you are a beginner. You just need to have a basic understanding of working with a simple text editor and command line.

Environment

We've used MathJax 2.6 using the MathJax Content Distribution Network (CDN) by putting following code snippet in head section of our demo html pages:

<script type="text/javascript"
   src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
   tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] },
   "HTML-CSS": {
      linebreaks: { automatic: true }
   },
   SVG: { 
      linebreaks: { automatic: true } 
   }
   MathML: {
      extensions: ["mml3.js"]
   }
});
</script>

See MathML Online

For most of the examples given in this tutorial you will see,the output. Just right click over the expression. Select following options from context menu: Show Math As > MathML Code to see the source code.

Syntax

<math xmlns="http://www.w3.org/1998/Math/MathML">
   <mfrac linethickness="1pt">
      <mrow>
         <mi>a</mi>
         <mo>+</mo>
         <mn>1</mn>
      </mrow>
      <mi>b</mi>
   </mfrac>
</math>

Output

a + 1 b


Advertisements