Function CodeBlockCode

src/components/ui/code-block.tsx:33–100

({
	code,
	language = 'tsx',
	className,
	...props
}: CodeBlockCodeProps)

} & React.HTMLProps<HTMLDivElement>

function CodeBlockCode({
	code,
	language = 'tsx',
	className,
	...props
}: CodeBlockCodeProps) {
	const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
	const [theme, setTheme] = useState<'dark' | 'light'>('dark')

	useEffect(() => {
		if (typeof document === 'undefined') return

		const updateTheme = () => {
			const isDark = document.documentElement.classList.contains('dark')
			setTheme(isDark ? 'dark' : 'light')
		}

		// Initial theme
		updateTheme()

		// Watch for theme changes
		const observer = new MutationObserver(updateTheme)
		observer.observe(document.documentElement, {
			attributes: true,
			attributeFilter: ['class'],
		})

		return () => observer.disconnect()
	}, [])

	useEffect(() => {
		async function highlight() {
			if (!code) {
				setHighlightedHtml('<pre><code></code></pre>')
				return
			}

			// Dynamically import shiki only on client-side to avoid SSR bundling all language grammars
			const { codeToHtml } = await import('shiki')
			const html = await codeToHtml(code, {
				lang: language,
				theme: theme === 'light' ? 'github-light' : 'vesper',
			})
			setHighlightedHtml(html)
		}
		highlight()
	}, [code, language, theme])

	const classNames = cn(
		'w-full text-[13px] [&>pre]:px-4 [&>pre]:py-4 dark:[&>pre]:bg-accent! focus:outline-none focus-visible:outline-none [&>pre]:text-wrap',
		className,
	)

	// SSR fallback: render plain code if not hydrated yet
	return highlightedHtml ? (
		<div
			className={classNames}
			dangerouslySetInnerHTML={{ __html: highlightedHtml }}