problemi/client/components/Markdown.tsx

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: string) {
    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 }: { source: string }) => {
    const elementRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        renderMarkdownAsync(source).then(data => {
            if (elementRef.current) {
                elementRef.current.innerHTML = data.toString()
            }
        })
    }, [source])

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