Grimoire

Metalsmith Math

Published:
This is part of the ar­ti­cles col­lec­tion.

MathJax

Implemented here via the metalsmith-mathjax plu­gin.

  • Typically con­sid­ered slower to load than KaTeX
  • Adding mathjax: true to the meta­data will pre­ren­der math to svg
  • Prerendering is fast but in­creases the page size sig­nif­i­cantly

KaTeX

Implemented here via CDN scripts.

  • Loads faster than MathJax
  • Consists of a sub­set of TeX (typically enough to use)
  • Implemented here by adding katex: true to the meta­data
  • However, this in­cludes a mul­ti­tude of fonts
  • Overall size is not much re­duced for sites with less equa­tions

Stats

For the same doc­u­ment, the de­tails are:

Engine | | (kB) |Page Size |J (kB) | (kB)S Load | Font Load | T | (kB) | (ms) | (ms)otal | Time
DOM
MathJax~200 | None
None | 200 | 753 |
327
KaTeX | ~ | | auto-10 | ka­tex.m ren­der (3.8)in.js (54.7) | 121.3 | | | |189.8 | 535
403

Conclusions

  • Lots of equa­tions, use KaTeX
  • Else use MathJaX