blog-static/layouts/shortcodes/katex_component_js.html
Danila Fedorin 0b3755c69a Use a shim instead of the real katex-expression because it hardcodes too much.
We don't need a second bundle of KaTeX, or all of the fonts a second time, served
from a CDN we don't control.

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
2023-12-30 19:38:37 -08:00

35 lines
906 B
HTML

<script src="{{ .Site.Params.katexJsUrl }}" crossorigin="anonymous"></script>
<script defer>
class KatexExpressionShim extends HTMLElement {
static observedAttributes = ["expression", "katex-options"];
targetSpan;
constructor() {
super();
}
doRender() {
if (!this.targetSpan) return;
const options = this.hasAttribute("katex-options") ?
this.getAttribute("katex-options") : {};
katex.render(
this.getAttribute("expression"),
this.targetSpan,
JSON.parse(options)
);
}
connectedCallback() {
this.targetSpan = document.createElement('span');
this.appendChild(this.targetSpan);
this.doRender();
}
attributeChangedCallback(name, oldValue, newValue) {
this.doRender();
}
}
customElements.define("katex-expression", KatexExpressionShim);
</script>