Search code examples
mathjax

How brilliant.org renders its mathematical formulas?


In Brilliant.org, when we look at the source of the pages, we see that they've rendered their mathematical formulas on the server. For example:

Page: https://brilliant.org/practice/distributive-property-misconceptions/

Source: view-source:https://brilliant.org/practice/distributive-property-misconceptions/

But as much as I know, when we use MathJax to render formulas, we should deliver them in original format, and it will render then client-side. And if we give MathJax the rendered formula, it throws many errors re-rendering them.

So, how brilliant.org has managed to render formulas on server-side?


Solution

  • Brilliant.org uses Katex library to render math formula. Katex offers server-side and client-side rendering. As I know, Brilliant renders on server side which is more efficient than rendering on the client-side.

    There are several ready WYSWYG editors integrates Katex library. One of them is https://quilljs.com/. When you enter formula, it renders into the HTML editor.

    https://katex.org/docs/cli.html