docs: share handle slower code blocks

This commit is contained in:
Jay V 2025-06-27 20:21:28 -04:00
parent 6a7983a4ea
commit 7b394b91e2

View file

@ -18,16 +18,19 @@ function CodeBlock(props: CodeBlockProps) {
const [local, rest] = splitProps(props, ["code", "lang", "onRendered"]) const [local, rest] = splitProps(props, ["code", "lang", "onRendered"])
let containerRef!: HTMLDivElement let containerRef!: HTMLDivElement
const [html] = createResource(() => [local.code, local.lang], async ([code, lang]) => { const [html] = createResource(
return (await codeToHtml(code || "", { () => [local.code, local.lang],
lang: lang || "text", async ([code, lang]) => {
themes: { return (await codeToHtml(code || "", {
light: "github-light", lang: lang || "text",
dark: "github-dark", themes: {
}, light: "github-light",
transformers: [transformerNotationDiff()], dark: "github-dark",
})) as string },
}) transformers: [transformerNotationDiff()],
})) as string
},
)
onCleanup(() => { onCleanup(() => {
if (containerRef) containerRef.innerHTML = "" if (containerRef) containerRef.innerHTML = ""
@ -41,7 +44,13 @@ function CodeBlock(props: CodeBlockProps) {
} }
}) })
return <div ref={containerRef} class={styles.codeblock} {...rest}></div> return (
<>
{html() ? (
<div ref={containerRef} class={styles.codeblock} {...rest}></div>
) : null}
</>
)
} }
export default CodeBlock export default CodeBlock