MathJax plugin for Eleventy (11ty)

---

Repository Stats:

---

Code Quality Stats:

---

️ 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,
};

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.