Render Equations HTML

insert scripts into the <head> tag

MathJax library

MathJax is a JavaScript module that makes it possible to display mathematical symbols and equations on websites. It offers a solution for TeX and MathML notation-based mathematical content presentation, enabling users to see intricate mathematical expressions and formulas without the necessity of specialised fonts or plugins.

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>

jQuery library (for refreshing dynamic equations)

If you need to perform changes or render equations after the page has been loaded, you will need to use jQuery, and include the below tag into the head of your page.

jQuery is a popular JavaScript library that simplifies the process of interacting with HTML documents, manipulating their content, handling events, and performing animations.

For replacing equations it includes methods for making asynchronous HTTP requests, known as Ajax (Asynchronous JavaScript and XML). This allows you to retrieve data from a server without reloading the entire page, enabling dynamic content updates.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

To find the latest version (and link) of jQuery go to https://jquery.com/download/.

writing equations

Tex, LaTeX

TeX and LaTeX are both typesetting systems used for formatting and typesetting documents, particularly those containing mathematical content.

Users of TeX must have a thorough understanding of its commands and programming-like structure due to its low-level and more complex syntax.

Contrarily, LaTeX offers a higher-level grammar that makes it easier to prepare documents and protects users from numerous low-level details.

The reading and writing of LaTeX commands is more simple and straightforward.

https://en.wikipedia.org/wiki/TeX

https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols

https://www.overleaf.com/learn/latex/Learn_LaTeX_in_30_minutes

(a) inline

Incorporating the mathematical expression directly within the text of a sentence, rather than as a standalone equation displayed separately.

\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)

Your equation needs to be surrounded with a backslash open bracket at the start and close bracket backslash, like so.

\( your equation )/

(b) as block

The mathematical expression will be larger and centred. No text can be displayed around it, either side.

$$ X \sim N\left(\mu, \sigma^2\right), \mu \in \mathbb{R}, \sigma^2 \geq 0 $$

Your equation needs to be surrounded with two dollar signs, like so.

$$ your equation $$

refreshing equations

JavaScript

If a equation needs to be rendered after the page has finished loading, an extra element of javascript needs to be added.

<script>

    $(function() {
       var $a = $('#dynamic-pan');
       $a.html('$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$$');
       MathJax.Hub.Queue(['Typeset', MathJax.Hub, $a[0]]);
    });
            
</script>

Where the equation will be inserted inside the <div> with the id dynamic-pan.

And the equation itself is specified inside single quotes on the middle line.