⚡️ Quick start

Install the plugin by using the following command:

npm install --save-dev @sunt-programator/eleventy-plugin-mathjax

Or use this command in case you are using the Yarn package manager:

yarn add --dev @sunt-programator/eleventy-plugin-mathjax

Next, add this plugin into your Eleventy configuration file (e.g. eleventy.config.js):

const mathjaxPlugin = require("@sunt-programator/eleventy-plugin-mathjax");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(mathjaxPlugin);
};

🕘 Usage

For a block math, use the $$...$$ notation:

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

This will render to:

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

For an inline math, use the \\(...\\) notation:

This is an inline math: \\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\\).

This will render to:

This is an inline math: $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$.

🗿 Options

This plugins supports overriding the global options by passing to the addPlugin function an object as a second argument:

// Copy the fonts from node_modules to the output site directory
eleventyConfig.addPassthroughCopy({
  "node_modules/mathjax-full/ts/output/chtml/fonts/tex-woff-v2/": "/fonts/tex-woff-v2/",
});

// Use the fonts to render the glyphs in CommonHTML mode
eleventyConfig.addPlugin(mathjaxPlugin, {
  chtml: {
    fontURL: "/fonts/tex-woff-v2",
  },
});

The global options used by this plugin look like this:

const globalOptions = {
  inputFormat: "tex",
  outputFormat: "chtml",
  asciimath: { delimiters: [["\\(", "\\)"]] },
  mml: {},
  tex: {
    packages: AllPackages,
  },
  svg: {},
  chtml: {},
  liteAdaptor: {},
  useAssistiveMml: true,
};

| Option | Description | --- | --- | | inputFormat | The math format of the input. Accepts tex, asciimath or mml. Default: tex. | | outputFormat | The math format of the produced output. Acceps chtml or svg. Default: chtml. | | asciimath | The AsciiMath configuration options. Valid if the inputFormat is set to asciimath. | | tex | The TeX configuration options. Valid if the inputFormat is set to tex. | | mml | The MathML configuration options. Valid if the inputFormat is set to mml. | | svg | The SVG configuration options. Valid if the outputFormat is set to svg. | | chtml | The CommonHTML configuration options. Valid if the outputFormat is set to chtml. | | liteAdaptor | The Lite Adaptor configuration options. | | useAssistiveMml | The flag indicating whether to use the assistive MathML. |

💡 Inspiration

This plugin used two repos as an inspiration:

1. MathJax Node Demos - Integration with MathJax
2. eleventy-plugin-mathjax by Tsung-Ju Chiang - Plugin implementation
3. Angular - Community Standards files

📰 License

This plugin is MIT licensed.