use-KaTeX

既知の問題

原因はわからん

dependencies

code:script.js

import {install} from '../KaTeX-CDN/script.js';

import {useState, useRef, useEffect} from '../preact@10.5.13/hooks.js';

export const useKaTeX = (_formula) => {

const ref = useRef(null);

useEffect(() => {

(async () => {

await install();

try {

katex.render(formula, ref.current);

setError(undefined);

} catch (e) {

if (e instanceof katex.ParseError) {

setError(e.message);

}

}

})();

return {ref, formula, error, setFormula};

};

test code

https://gyazo.com/0eb6ae4b5ed9ba4190ff7cd10567f23a

code:js

import('/api/code/programming-notes/use-KaTeX/test1.js');

code:test1.js

import {html} from '../htm@3.0.4%2Fpreact/script.js';

import {useKaTeX} from './script.js';

import register from '../preact-custom-element@4.2.1/script.js';

const App = ({formula}) => {

const {ref, error, setFormula} = useKaTeX(formula);

return html`

<style>

:host {display: block;max-width: 20vw;}

.error {color:#fd7373;}

</style>

<div class="${error ? 'error' : ''}">

${error ?? ''}<span class="katex-display" ref="${ref}" />

</div>

<input type="text" onInput="${({target}) => setFormula(target.value)}" />

`;

};

document.getElementById('editor')

.insertAdjacentHTML('beforeend', '<userscript-katex-test formula="E=mc^2"></userscript-katex-test>');