You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
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>
|
|
}
|