Introduction to MathJax: Enhancing Mathematical Content on the Web

Published in

Django Unleashed

3 min readJul 17, 2024

MathJax is a powerful JavaScript library that allows you to display mathematical notations in web browsers, making it easier to present complex equations and formulas in a readable format. Whether you’re creating educational content, academic papers, or technical documentation, MathJax ensures that your mathematical expressions are rendered beautifully and consistently across different devices and browsers. This blog will introduce you to MathJax, its use cases, and how to implement it in a web project.

Why Use MathJax?

MathJax is widely used for its ability to render mathematical content in various formats, including LaTeX, MathML, and ASCIIMathML. Here are some key benefits of using MathJax:

Cross-browser compatibility: MathJax works seamlessly across all modern browsers, ensuring that your mathematical content looks great everywhere.
Ease of use: MathJax is easy to integrate into existing projects with minimal configuration.
Multiple input formats: MathJax supports LaTeX, MathML, and ASCIIMathML, providing flexibility in how you write your mathematical content.
Accessibility: MathJax improves accessibility by providing alternative text for screen readers and other assistive technologies.

Integrating MathJax into a HTML/Web

Let’s walk through the process of integrating MathJax into a HTML file. We’ll use the following HTML template to demonstrate how to set up MathJax.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Article CMS{% endblock %}</title>
    <!-- Load MathJax -->
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
            MathML: {extensions: ["content-mathml.js"]},
            asciimath2jax: {delimiters: [['`','`']]},
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        });
    </script>
</head>
<body>
    $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

    $$ e^{i\pi} + 1 = 0 $$

    $$ (a + b)^n = \sum_{k=0}^{n} \binom{n}{k} a^{n-k} b^k $$

    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
          <mi>x</mi>
          <mo>=</mo>
          <mfrac>
            <mrow>
              <mo>&#x2212;</mo>
              <mi>b</mi>
              <mo>&#x00B1;</mo>
              <msqrt>
                <msup>
                  <mi>b</mi>
                  <mn>2</mn>
                </msup>
                <mo>&#x2212;</mo>
                <mn>4</mn>
                <mo>&#x2062;</mo>
                <mi>a</mi>
                <mo>&#x2062;</mo>
                <mi>c</mi>
              </msqrt>
            </mrow>
            <mrow>
              <mn>2</mn>
              <mo>&#x2062;</mo>
              <mi>a</mi>
            </mrow>
          </mfrac>
        </mrow>
      </math>

    x = (-b +- sqrt(b^2 - 4ac))/(2a)
    \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
          <mo>&#x222B;</mo>
          <msub>
            <mrow>
              <mi>a</mi>
              <mo>&#x2062;</mo>
              <mi>b</mi>
            </mrow>
            <mi>f</mi>
          </msub>
          <mo>&#x2062;</mo>
          <mi>d</mi>
          <mi>x</mi>
        </mrow>
    </math>
</body>
</html>

Understanding the Components

Loading MathJax:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

2. MathJax Configuration:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
        MathML: {extensions: ["content-mathml.js"]},
        asciimath2jax: {delimiters: [['`','`']]},
    });
</script>

This script configures MathJax to recognize different types of mathematical notations:

tex2jax: Specifies the delimiters for LaTeX inline and display math.
MathML: Loads the content-mathml.js extension for rendering MathML.
asciimath2jax: Specifies the delimiters for ASCIIMathML.

3. Typesetting on DOMContentLoaded:

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    });
</script>

This script ensures that MathJax processes and renders the mathematical content once the DOM is fully loaded.

Example Mathematical Content

Here are some examples of mathematical content using different markup formats:

LaTeX:

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
$$ e^{i\pi} + 1 = 0 $$
$$ (a + b)^n = \sum_{k=0}^{n} \binom{n}{k} a^{n-k} b^k $$

MathML:

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mo>&#x2212;</mo>
          <mi>b</mi>
          <mo>&#x00B1;</mo>
          <msqrt>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>&#x2212;</mo>
            <mn>4</mn>
            <mo>&#x2062;</mo>
            <mi>a</mi>
            <mo>&#x2062;</mo>
            <mi>c</mi>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mo>&#x2062;</mo>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </mrow>
</math>

ASCIIMathML:

x = (-b +- sqrt(b^2 - 4ac))/(2a)

Use Cases for MathJax

MathJax is used in various domains, including:

Education: Online courses, textbooks, and tutorials often include complex mathematical content that needs to be displayed clearly.
Research: Academic papers and journals frequently contain mathematical equations that require precise formatting.
Technical Documentation: Documentation for scientific software and tools often includes mathematical formulas that need to be rendered accurately.

Conclusion

MathJax is a versatile and powerful tool for displaying mathematical content on the web. Its support for multiple input formats and cross-browser compatibility make it an excellent choice for anyone needing to render mathematical expressions online. By following the steps outlined in this blog, you can easily integrate MathJax into your project and start presenting beautiful mathematical content.