44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import Prism, { highlight } from 'prismjs'
|
|
import { type PropsWithChildren } from 'react'
|
|
|
|
import { RichText } from '@/lib/notion/types'
|
|
import richTextAsPlainText from '@/lib/notion/utils/richTextToPlainText'
|
|
|
|
export interface Props {
|
|
language: string
|
|
codeRichText: RichText
|
|
}
|
|
|
|
/**
|
|
* This is only used for the RSS feed
|
|
*/
|
|
export function SyncCodeSnippet({
|
|
language,
|
|
codeRichText,
|
|
}: PropsWithChildren<Props>) {
|
|
const highlightedCodeHtml = highlight(
|
|
richTextAsPlainText(codeRichText),
|
|
Prism.languages[language],
|
|
language,
|
|
)
|
|
|
|
return (
|
|
<pre className="rounded border border-neutral-500 bg-neutral-800 p-4">
|
|
<code
|
|
className={`language-${language}`}
|
|
dangerouslySetInnerHTML={{ __html: highlightedCodeHtml }}
|
|
/>
|
|
</pre>
|
|
)
|
|
}
|
|
|
|
export default async function CodeSnippet(props: PropsWithChildren<Props>) {
|
|
await import(`prismjs/components/prism-${props.language}.min.js`)
|
|
// @ts-expect-error CSS not JS
|
|
await import('prismjs/themes/prism-tomorrow.min.css')
|
|
// @ts-expect-error CSS not JS
|
|
await import('prismjs/themes/prism.min.css')
|
|
|
|
return <SyncCodeSnippet {...props} />
|
|
}
|