- macro name (letters only)
- number of arguments (0-9, or blank)
- is the first argument optional?
- default value of optional argument (optional)
- macro definition, with command arguments in braces {#1} {#2} . . .

Run a macro like any other command: \macroName {arg1} {arg2} {arg3} . . .
If the first argument is optional, \macroName [arg1] {arg2} {arg3} . . .
or \macroName {arg2} {arg3} . . .

Edit the code as desired and click display. The MathJax image is displayed as-is. The SVG code is extracted from the former, then converted to .svg and .png images which may be saved as files.

The display style selector changes the delimiters and \displaystyle command of TeX code, and the display and displaystyle properties of MathML. See about TeX below for more details. Select the blank option to leave code unchanged.

Minify strips all whitespace outside MathML elements, and anything before the <math> tag.

The “Surround” links are for convenience, to surround blocks of text with braces, or to start with a set of delimiters.

The easiest and best way to display mathematical equations on the web is to write them in TeX and convert them to scalable vector graphics (SVG) with MathJax. MathML is another option; but like XML, MathML is not intended to be hand-coded, and an authoring application like LibreOffice Math is reqiured. TeX and its descendants such as LaTeX are widely used in the academic and scientific communities. It is not harder to learn TeX than it is to use a graphical math editor; and having learned TeX, one can easily write and make alterations to equations on-the-fly.

Here is a very brief tutorial to illustrate how TeX works. For more detailed information, please see:

First, TeX equations on a web page must be surrounded by math delimiters. Display delimiters \\[ \\] produce full-size, centered, block-style equations, suitable for a scientific publication typeset in LaTeX. Inline delimiters \\( \\) will shrink tall equations. For full-size equations that may be positioned on a web page using standard html formatting and css, use inline delimiters with the \displaystyle command.

(Dollar sign delimiters \$\$ . . . \$\$ and \$ . . . \$ may also be used, but MathJax uses the LaTeX delimiters above by default to prevent confusion with dollar signs in plain text.)

Plain text; note that all math variables are italic: \\( \textrm{for each } n \\)
\( \textrm{for each } n \) \\( \textsf{for each } n \\)
\( \textsf{for each } n \)

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. It requires no setup on the part of the user; one simply includes MathJax and some mathematics in a web page.

To load MathJax from a content distribution network, put this into the head of the document:

This will load the latest 3.x.x version of MathJax from the distribution server, configure it to recognize mathematics in both TeX and MathML notation, and ask it to generate its output using SVG to display the mathematics. See other options on the
Getting Started with MathJax Components page.

To host MathJax locally, use tex-mml-svg.js (1.8 MB with v3.2.0) from the MathJax es5 folder at
GitHub
(with MathJax version 3, one combined component file is the only file needed). The script loader then becomes:

Configuration options are available for the different input and output methods. For example, to enable single dollar sign delimiters for TeX, and to scale the SVG output, use the following:

Once you have MathJax loaded and configured, just put TeX or MathML code into your page like this
\( \sum_{i=1}^{\infty} \frac{1}{2^i} \)
and MathJax will display it as scalable vector graphics.

“Note that versions of IE prior to 11 are no longer supported in MathJax version 3”
(http://docs.mathjax.org/en/latest/output/browser.html).
MathJax 2 local installation is a little involved; most of the “unpacked” folder (24.1 MB) is required from the download at
GitHub.
To use remote hosting as described in the v2.7
documentation:

An alternative to including MathJax on a page is to use SVG, either inline code or external image files; or .png images. These may be created offline, or server-side, by MathJax itself. SVG code will be much larger than the equivalent TeX or MathML code; but for a few equations, the size of the MathJax download will be much greater. .png images will be the smallest of all, but they are not scalable as SVG is.