Latex testing

Here we test different ways of adding equations to Bookstack pages.

Draw.io integration

This is an equation added using draw.io integration:

To do this, add an image using the WYSIWYG editor. Then, once in draw.io, enable mathematical typesetting under the Extras menu. Type some LaTeX code in a text box, resize accordingly and then save.

This doesn't work well with dark mode. In fact, draw.io in general probably doesn't. On the other hand, one shouldn't use dark mode too much for textual content like this.

Using KaTeX directly

This is an equation that is written in $\LaTeX$ directly in the Markdown source code and then rendered using KaTeX:

\[ \sqrt{3x+1} + (1+x)^2 \]

To do this, add the following scripts to the custom header in Bookstack, courtesy of eceforge@github.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
  integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
  crossorigin="anonymous"
>

<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
  integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
  crossorigin="anonymous"
></script>

<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"
  integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
  crossorigin="anonymous"
></script>

<script>
  var katexRenderFilter = function katexRenderFilter () {
    var content = document.body.getElementsByClassName("page-content");
    if (content.length > 0) {
      renderMathInElement(content[0], {
        delimiters: [
          {left: "",right:"", right: "",right:"", display: true},
          {left: "$", right: "$", display: false},
          {left: "",right:"", right: "",right:"", display: false},
          {left: "",right:"", right: "",right:"", display: true}
        ]
      });
    }
  }
  document.addEventListener("DOMContentLoaded", katexRenderFilter);
</script>