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 is presumably best for pages with few equations.

Using MathJax directly

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

\[ hi \]

To do this, add the following scripts to the custom header in Bookstack:

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

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<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>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<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>