rendering math equations

[mvolkmann]

Can someone point me to an example of rendering math equations in Eleventy? I'm open to using a library like Katex or MathJAX. As far as I can tell, I just need to install and configure a markdown-it plugin like markdown-it-katex or markdown-it-mathjax. But after several hours of trying, I can't get either to work and can't find documentation on doing this in Eleventy.

[pkra]

https://www.11ty.dev/docs/languages/markdown/#add-your-own-plugins documents how to add markdown-it plugins. If that doesn't work, maybe try sharing some sample config code.

[mvolkmann]

I think I have followed those instructions, but it doesn't render properly. See my configuration here: https://github.com/mvolkmann/blog/blob/8086cefe4cc255a375502fefe46608b2544efc6d/.eleventy.js#L18 and my attempt to render a math equation here: https://github.com/mvolkmann/blog/blob/master/src/precalculus/01-complex-numbers.md.

[Ryuno-Ki]

I've used ASCIImath with MathJax in https://jaenis.ch/blog/2020/recursive-functions-in-javascript-explained/

For this, I instructed eleventy to include the following JavaScript files in the header:

• asciimath-loader.js
• startup.js

The former one is authored by me:

(window.MathJax = {
  loader: {
    load: [
      'input/asciimath',
      'output/chtml',
      'ui/menu'
    ],
    asciimath: {
      delimiters: {
        ['$', '$']
      }
    }
  }
})()

This way, I can use $F_{n-1}$ and have it rendered in MathJax.

See https://docs.mathjax.org/en/latest/input/asciimath.html#loading-the-asciimath-component for documentation.

[mvolkmann]

Thanks @Ryuno-Ki ! I'm a little hesitant to use this approach because it uses version 2 of MathJax instead of version 3.

[Ryuno-Ki]

Weird, since I use MathJax 3.0.5 here. But okay :-)

[mvolkmann]

@Ryuno-Ki I based on that on the following found at https://docs.mathjax.org/en/latest/input/asciimath.html#loading-the-asciimath-component:

"The AsciiMath input jax has not yet been fully ported to version 3. Instead, the AsciiMath component uses the version 2 AsciiMath input jax together with some of the legacy version 2 code patched into the version 3 framework. This is less efficient, and somewhat larger, than a pure version-3 solution would be, and it can complicate the configuration process. A full version-3 port of AsciiMath is planned for a future release."

Do you think this is wrong and that it is actually using version 3 now?

[pkra]

@mvolkmann your setup seems ok in general. However, the equations in, e.g., https://mvolkmann.github.io/blog/topics/#/blog/precalculus/01-complex-numbers/ primarily fail because the main content is loaded via iframe and MathJax is not loaded in that iframe (only the main document). A second problem stems from the content itself -- markdown-it-mathjax primarily uses $...$ for inline expressions, check its documentation for more options.

[mvolkmann]

@pkra Thank you SO MUCH for tracking this down for me! I have it working now.