How to Render AsciiMath and LaTeX in HTML Pages?

by

Displaying complex mathematical equations, such as integrals, summations, and matrices, directly in HTML pages is possible with the help of JavaScript libraries like KaTeX or MathJax.

KaTeX is a JavaScript library specifically designed to render mathematical expressions in web browsers. It’s lightweight, fast, and provides high-quality rendering of LaTeX math. This makes it an ideal choice for platforms that need LaTeX-like functionality but with better performance compared to MathJax.

In this article, we will explore how to render both AsciiMath and LaTeX in HTML pages using KaTeX along with the asciimath2tex library, which allows conversion of AsciiMath to LaTeX.

Steps to Render AsciiMath and LaTeX in HTML

1. Load the Required JavaScript Libraries

To start, you need to include the necessary libraries in your HTML file:

<script src="js/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="js/katex.min.css">
<script defer src="js/katex.min.js"></script>
<script src="js/asciimath2tex.js"></script>
  • jquery-3.5.0.min.js: This allows us to easily manipulate HTML elements.
  • katex.min.css and katex.min.js: These are the KaTeX files responsible for rendering LaTeX math.
  • asciimath2tex.js: This library converts AsciiMath expressions into LaTeX format.

2. Prepare the Render Function

Next, we define a JavaScript function to parse and render AsciiMath and LaTeX content within HTML elements:

var ascii = new AsciiMathParser();
function render(id) {
    let el = $("#" + id);
    if (el.length == 1) {
        var str = el.html();

        // Render AsciiMath enclosed in backticks (`...`)
        str = str.replace(/`(.*?)`/g, (match, p1) => 
            katex.renderToString(ascii.parse(p1), { throwOnError: false })
        ); 

        // Render LaTeX math enclosed in \( ... \)
        str = str.replace(/\\\((.*?)\\\)/g, (match, p1) => 
            katex.renderToString(p1, { throwOnError: false })
        );

        el.html(str);
    } else {
        console.log(`No element with ID ${id}, failed to render.`);
    }
}
  • AsciiMath Rendering: The function searches for content enclosed in backticks () and converts it from AsciiMath to LaTeX using the asciimath2tex library.
  • LaTeX Rendering: The function also detects LaTeX math enclosed in \(...\) and renders it using KaTeX.

3. Execute the Render Function on Page Load

Finally, ensure the render function is executed when the page finishes loading:

$(document).ready(function () {
    render("ascii");
});

In this example, we call the render function on the HTML element with the ID "ascii", which will replace any AsciiMath or LaTeX content inside it with the corresponding rendered output.

Conclusion

By combining KaTeX and asciimath2tex, you can render both AsciiMath and LaTeX expressions within HTML pages efficiently. This approach provides the best of both worlds—AsciiMath’s simpler syntax and LaTeX’s advanced formatting—while leveraging KaTeX for fast and accurate rendering.

Leave a Comment