@sunt-programator/eleventy-plugin-mathjax

MathJax plugin for Eleventy (11ty)

Eleventy plugin for supporting the MathJax library.

---

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

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.