problemi/client/components/Markdown.jsx

import { useEffect, useRef } from 'preact/hooks'

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkMath from 'remark-math'
import remarkRehype from 'remark-rehype'
import rehypeKatex from 'rehype-katex'
import rehypeStringify from 'rehype-stringify'

async function renderMarkdownAsync(source) {
    return await unified()
        .use(remarkParse)
        .use(remarkMath)
        .use(remarkRehype)
        .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
        .use(rehypeStringify)
        .process(source)
}

// function renderMarkdownSync(source) {
//     console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)

//     return unified()
//         .use(remarkParse)
//         .use(remarkMath)
//         .use(remarkRehype)
//         .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
//         .use(rehypeStringify)
//         .processSync(source)
// }

export const Markdown = ({ source }) => {
    const elementRef = useRef()

    useEffect(async () => {
        if (elementRef.current) {
            elementRef.current.innerHTML = await renderMarkdownAsync(source)
        }
    }, [source])

    return <div class="markdown" ref={elementRef}></div>
}