Many of my articles include mathematical formulas with specialist characters and formatting, and as they are usually well known formulas I can usually "borrow" them from places such as Wikipedia by taking screenshots. If you cannot do this for some reason then in this article I'll look at alternatives using TeX and MathJax.

TeX: Typesetting for Mathematics

If you see a mathematical formula such as this

printed in a book then it was probably typeset using a system called TeX which was created specifically for the purpose. I'll look at TeX in more detail later, but to give you a flavour of how it works, the plus or minus sign is represented by \pm and the square root symbol is \sqrt. The TeX representation for the whole formula is:

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

There are many backslash-prefixed representations of mathematical symbols in the TeX specification which, when parsed, are converted to the appropriate character. Any other content is displayed as-is, for example the x = -b at the beginning of the formula.

There are a number of specialized TeX editors available, mostly free, which you may like to look into if you get into TeX in a big way. Wikipedia provides comparison of TeX editors.

You'll probably also want to check out the TeX Users Group which has many resources including references and tutorials.

MathML and MathJax

Browsers cannot handle TeX so the W3C created MathML for representing mathematical notation. It's XML based so consists of a set of < and > delimited tags with the names prefixed by the letter m.

Unfortunately browser support is poor (in particular Edge does not support it at all) so it isn't a universal solution.

A better option is to create your mathematical notation in TeX and use a JavaScript library called MathJax which will convert and display TeX within the browser. You can include MathJax in your pages and have it carry out the conversion in your user's browser, or alternatively take screenshots and include them in your page. My opinion is that the latter is the better option because MathJax is fairly heavyweight in terms of download size, and also there is a slight but noticeable time lag when using MathJax which users might find jarring.

The Project

This project consists of a single HTML page with a number of formulas in TeX which are converted and displayed by MathJax. The purpose of the page is to give an introduction to TeX and to demonstrate MathJax in action. You can also use the page for editing and testing your own TeX which you can copy and paste into your site or use to grab screenshots.

You can grab the project file from the ZIP or GitHub repository linked to below.

Source Code Links

ZIP File
GitHub

TeX Examples

TeX isn't particularly complex and quickly gaining a working knowledge of how it works is well within the capabilities of the sort of people who read articles like this. Learning the basics and a handy reference of the large number of symbols should be all you need.

In this section I will explore a number of examples which should cover most requirements, and which can be expanded on by simply looking up the relevant backslashed TeX codes. Each is included in the HTML file, along with the MathJax rendering. The screenshots are from the file open in a browser.

A simple one to start with. The TeX specific parts of the code are:

• Everything after the G is embedded in { and }


• The subscripts are created using _1 and _2


• The division is denoted using \over


• The squared symbol is created with ^2

Nothing new here, I just included it to give context to the next equation.

A couple of new pieces of notation here:

• \pm denotes the plus-or-minus symbol


• \sqrt is used for the square root symbol

Also note how { and } are used to specify what is incorporated within \over and within \sqrt.

Again nothing new, but this example does emphasise that often most of the formula is left as-is with just a minimum of TeX-specific notation.

A more complex example using notation we've already seen. As there is only one term after the square roots we don't need to use curly brackets.

A few Greek letters flying around here. For upper case we use, for example, \Delta and for lower case we use \phi. The dot multiplication symbol is \cdot.

A much more complex example with a few interesting features.

• the \; forces a space. Without it sin and x are squashed up together


• The large sum symbol is created with \sum


• n=0 is added with the underscore subscript notation


• The infinity symbol is added (not very intuitively) with ^ and \infinity


• The final power, 2n+1, needs to go in curly brackets

This looks a bit horrendous but only because there is a lot of repetition.

• The large opening and closing brackets are created with \left and \right.


• The opening and closing floor symbols (like a double-height L and its mirror image, denoting rounding down to the nearest integer) are created with \bigg \lfloor and \bigg \rfloor.

Nothing really new but note the embedded curly brackets.

Creating Your Own TeX

Hopefully you now have a feel for how TeX works, and can copy and adapt bits of my code for your own needs. Probably the easiest way to do this is to edit the TeX in this article's HTML page and refresh the page until you get what you want. Having now implemented no less that nine formulae in TeX I am aware that a bit of trial and error is needed, but it's easy to pick up a feel for how TeX works and to develop the knack of using it.

Rendering TeX Using MathJax

Once you have a formula in TeX you can use the MathJax library to render it within the browser. This is exactly what the HTML page that goes with this article does, and it simply a matter of adding the JavaScript file and embedding the TeX between appropriate delimiters. The basic usage described below is enough to get you up and running and may be all you'll ever need, but if you want to dig deeper check out the MathJax documentation.

This is how to include MathJax from its CDN.

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

There are also plugins for content management systems including Wordpress and Drupal.

There are two types of TeX delimiter, $$ . . . $$ (or \[ . . . \] which is equivalent) and \( . . . \). The first of these renders so-called "displayed mathematics" suitable for use on its own line. The second is so-called "in-line mathematics" using a more compact formatting suitable for inclusion with other text.

This is the quadratic formula with "displayed mathematics" delimiters.

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

All of the formulae in the HTML page use the $$ syntax but you just need to change the delimiters for inline content. I'd suggest that you don't use inline for anything but the simplest single-line mathematics. Anything using \over, \bigg etc. is squashed up in an awkward way in the inline format so looks much better in glorious isolation.

This is the same formula with $$ . . . $$ and \( . . . \) delimiters. The second one looks OK here but would look a bit awkward amongst normal text.

If you right-click on one of the MathJax generated formulas you'll get a context menu.

This includes options to view and copy the TeX and MathML.