MathJax-demos-web

A repository with examples using MathJax version 3 in web pages.

See the MathJax Node Demos for examples of how to use MathJax in node applications. See the MathJax documentation for complete details of how to use MathJax in web browsers and node.

Samples of MathJax v3

The examples below show how to use and configure MathJax components in your web pages. The links take you to the documentation for the individual example or to the live demo itself. The last few examples show how to create your own custom components, custom tex extensions, or customized single-file webpacked versions of MathJax.

Processing the Whole Page

Processing User Input

Interaction

Version 2 Compatibility

MathML and Assistive Extensions

Customization

Speech Output Demo

convert-with-speech (View Demo) A lab to explore all possible speech options in MathJax.

MathJax Component Files

MathJax version 3 has the ability to create MathJax "components" that can be dynamically loaded by MathJax as needed (much as could be done in version 2). This allows portions of MathJax to be bundled together into components that include most or all of what you need to run MathJax, but still allows less-used pieces to be loaded on demand later when needed. This is similar to v2's combined configuration files and TeX extensions.

The main goal of these components is to use them for the delivery of MathJax from the CDNs that host MathJax. This allows you to customize the MathJax components that you use without having to have (as single files on the CDN) every possible combination of parts that anyone would need packaged together. We will provide a number of all-in-one packages that include an input and output jax together with the data for a font to be used, but also will provide separate components for the individual input and output jax, fonts, TeX extensions, and so on, so that you can mix-and-match them as needed.

MathJax components can be used in the browser as well as on the server in node applications, so browser and server-side applications can use the same code base and configurations. Components can be combined together into larger packages, either with other MathJax components, or with your own code, via webpack, for example.

Moreover, the tools for building components are available so that you can create your own custom components that you can serve from your own website if you have special needs not addressed by the CDN. For example, authors writing TeX extensions for MathJax can create their own components that can be loaded into MathJax from a different server even if the core MathJax is loaded from a CDN.

Although components are a convenient way of working with MathJax, those writing node scripts that use MathJax need not use the components as we have packaged them at all; they can continue to import MathJax into their projects directly, as in previous beta versions.

Configuring Components

The component system described above can be configured using a global variable MathJax that you set before loading the main MathJax component that you are planning to use. The MathJax variable specifies configuration blocks for the various components in much the same was as was done in version 2 (this is illustrated in the examples below, and described in more detail in a separate section below). MathJax will modify this global variable to include the methods and data that it creates during the startup process for your use in your applications.

To configure MathJax, use

<script>
MathJax = {
  [options]
};
</script>

before the script tag that loads the MathJax component file you plan to use, where options are a list of options that control various parts of MathJax. The options are grouped into blocks based on the component of MathJax that they affect. For example, the TeX input jax options are in a blocks called 'tex', and the SVG output jax options are in a block called 'svg'. An example configuration could be

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    packages: ['base', 'newcommand', 'configMacros']
  },
  svg: {
    fontCache: 'global'
  }
};
</script>

The options are listed in detail in the Configuring MathJax section of the MathJax Documentation.

Converting from Version 2

The structure of the MathJax configuration, and many of the names of the options, have changed from version 2 to version 3. For example, there is no longer a MathJax.Hub.Config() call, but instead, you use a global MathJax variable to set the configuration (this was possible in version 2, but most people used the older Mathjax.Hub.Config() approach).

In order to help you move from version 2 to version 3, there is a configuration converter that will take your old version 2 configuration and give you the corresponding version 3 configuration.

Note that not all options from version 2 are available. Some have not yet been implemented (like line breaking), while others no loner apply (like the options controlling previews).

Obtaining the Components

The component files for these demos are available from several CDN servers, which you can access without having to install or download any files. Just use a link such as

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

to load the latest version (3.x.x) of the tex-chtml combined component file from the jsdelivr CDN. See the documentation for more details on how to use MathJax in web pages.

Local copies of the MathJax component files can be obtained from the MathJax Component Repository. See its README file for complete information about how to obtain the files.

jafrmartins/MathJax-demos-web