blog-static/layouts/shortcodes/katex_component_js.html

35 lines
912 B
HTML

<script defer 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>