Skip to content

Webpack loader to transform TeX and MathML files to SVGs via MathJax

License

Notifications You must be signed in to change notification settings

nickgirardo/mathjax-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mathjax-loader

Use MathJax to import TeX, MathML, and AsciiMath files as SVGs.

Usage

To get started, install mathjax-loader

npm install --save-dev mathjax-loader

mathjax-loader outputs as SVG files, it is therefore recommended to combine it with another loader such as @svgr/webpack.

An example setup might look something like this:

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
              test: /\.tex$/,
              use: [
                '@svgr/webpack',
                {
                  loader: 'mathjax-loader',
                  options: { lang: 'TeX' },
                },
              ],
            },
            {
              test: /\.mml$/,
              use: [
                '@svgr/webpack',
                {
                  loader: 'mathjax-loader',
                  options: { lang: 'MathML' },
                },
              ],
            },
            {
              test: /\.asciimath$/,
              use: [
                '@svgr/webpack',
                {
                  loader: 'mathjax-loader',
                  options: { lang: 'AsciiMath' },
                },
              ],
            },
        ],
    },
};

Which should be able to load the following files:

euler.tex

e^{i\theta{}} = \cos{\theta{}} + i\sin{\theta{}}

pythagoras.mml

<math>
  <mrow>
    <msup>
      <mi>&nbsp; a </mi>
      <mn>2</mn>
    </msup>
    <mo> + </mo>
    <msup>
      <mi> b </mi>
      <mn>2</mn>
    </msup>
    <mo> = </mo>
    <msup>
      <mi> c </mi>
      <mn>2</mn>
    </msup>
  </mrow>
</math>

trig.asciimath

sin^2 theta + cos^2 theta = 1

With this they can be included into a react document. Note that @svgr/webpack is critical for this.

example.jsx

import Euler from 'euler.tex';
import Pythagoras from 'pythagoras.mml';
import Trig from 'trig.asciimath';

export default Example = () => (
  <>
    <div><Euler /></div>
    <div><Pythagoras /></div>
    <div><Trig /></div>
  </>
);

Options

Name Values Default Description
lang "TeX", "MathML", "AsciiMath" TeX Language of the input file
packages Array<string> ['base', 'ams'] TeX only: which packages to use
allPackages boolean false TeX only: should all packages be used
exitOnError boolean false TeX only: exit if error in typesetting

lang

This loader can handle TeX, MathML, and AsciiMath files. The lang option sets which language should be used. Case insensitive.

packages

This option is only used for TeX files. This option sets which packages should be included. Not all TeX packages are available. Check here for list of MathJax supported packages.

The packages base and ams are included by default. It is highly recommended to include base.

allPackages

This option is only used for TeX files. If this option is set, all of the available TeX packages are used.

If this option is set to true, the packages option is ignored.

exitOnError

This option is only used for TeX files. Generally, MathJax will still output valid files if TeX errors are present. If you would instead not want files with TeX errors to compile, set this option to true.

Note that some packages may catch errors and handle them themselves. For instance, using an undefined control sequence will cause a TeX error, but only if noundefined is not included. If noundefined is included it will catch the undefined control sequence and output it as a raw string in red.

About

Webpack loader to transform TeX and MathML files to SVGs via MathJax

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published