39 lines
878 B
TypeScript
39 lines
878 B
TypeScript
'use client'
|
|
|
|
import { type FC, type PropsWithChildren, useEffect, useRef } from 'react'
|
|
|
|
import 'prismjs/themes/prism-okaidia.min.css'
|
|
|
|
export interface Props {
|
|
language: string
|
|
}
|
|
|
|
const SuspendedCodeSnippet: FC<PropsWithChildren<Props>> = ({
|
|
children,
|
|
language,
|
|
}) => {
|
|
const codeRef = useRef<HTMLElement>(null)
|
|
|
|
useEffect(() => {
|
|
const highlight = async () => {
|
|
const highlightElement = (await import('prismjs')).highlightElement
|
|
// @ts-expect-error
|
|
await import('prismjs/components/prism-javascript.min.js')
|
|
// @ts-expect-error
|
|
await import('prismjs/components/prism-typescript.min.js')
|
|
highlightElement(codeRef.current!)
|
|
}
|
|
highlight()
|
|
}, [])
|
|
|
|
return (
|
|
<pre>
|
|
<code className={`language-${language}`} ref={codeRef}>
|
|
{children}
|
|
</code>
|
|
</pre>
|
|
)
|
|
}
|
|
|
|
export default SuspendedCodeSnippet
|