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 isdoesn't presumablywork bestwell 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 pagestextual withcontent fewlike equations.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: "$$", display: true},
          {left: "$", right: "$", display: false},
          {left: "\(", right: "\)", display: false},
          {left: "\[", right: "\]", display: true}
        ]
      });
    }
  }
  document.addEventListener("DOMContentLoaded", katexRenderFilter);
</script>