Add KaTeX rendering to Markdown. (#20571)

This PR adds mathematical rendering with KaTeX.

The first step is to add a Goldmark extension that detects the latex
(and tex) mathematics delimiters.

The second step to make this extension only run if math support is
enabled.

The second step is to then add KaTeX CSS and JS to the head which will
load after the dom is rendered.

Fix #3445

Signed-off-by: Andrew Thornton <art27@cantab.net>

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

3 files changed, 46 insertions, 0 deletions

diff --git a/web_src/js/markup/content.js b/web_src/js/markup/content.js
index ef5067fd66..319c229385 100644
--- a/web_src/js/markup/content.js
+++ b/web_src/js/markup/content.js
@@ -1,10 +1,12 @@
 import {renderMermaid} from './mermaid.js';
+import {renderMath} from './math.js';
 import {renderCodeCopy} from './codecopy.js';
 import {initMarkupTasklist} from './tasklist.js';
 
 // code that runs for all markup content
 export function initMarkupContent() {
   renderMermaid();
+  renderMath();
   renderCodeCopy();
 }
 
diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js
new file mode 100644
index 0000000000..5790a327a5
--- /dev/null
+++ b/web_src/js/markup/math.js
@@ -0,0 +1,37 @@
+function displayError(el, err) {
+  const target = targetElement(el);
+  target.remove('is-loading');
+  const errorNode = document.createElement('div');
+  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
+  errorNode.textContent = err.str || err.message || String(err);
+  target.before(errorNode);
+}
+
+function targetElement(el) {
+  // The target element is either the current element if it has the `is-loading` class or the pre that contains it
+  return el.classList.contains('is-loading') ? el : el.closest('pre');
+}
+
+export async function renderMath() {
+  const els = document.querySelectorAll('.markup code.language-math');
+  if (!els.length) return;
+
+  const [{default: katex}] = await Promise.all([
+    import(/* webpackChunkName: "katex" */'katex'),
+    import(/* webpackChunkName: "katex" */'katex/dist/katex.css'),
+  ]);
+
+  for (const el of els) {
+    const source = el.textContent;
+    const options = {display: el.classList.contains('display')};
+
+    try {
+      const markup = katex.renderToString(source, options);
+      const tempEl = document.createElement(options.display ? 'p' : 'span');
+      tempEl.innerHTML = markup;
+      targetElement(el).replaceWith(tempEl);
+    } catch (error) {
+      displayError(el, error);
+    }
+  }
+}
diff --git a/web_src/less/animations.less b/web_src/less/animations.less
index 92a3052a1f..ea31d53bfe 100644
--- a/web_src/less/animations.less
+++ b/web_src/less/animations.less
@@ -33,6 +33,13 @@
   height: var(--height-loading);
 }
 
+code.language-math.is-loading::after {
+  padding: 0;
+  border-width: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 @keyframes fadein {
   0% {
     opacity: 0;