"use client";
import { useEffect, useState } from "react";
import { ensureLanguageRegistered, isLanguageRegistered, SyntaxHighlighter, vs, vscDarkPlus } from "@/lib/syntax-highlight";
import { useTheme } from "@/hooks/useTheme";
interface Props {
code: string;
lang: string;
}
function PlainCode({ code }: { code: string }) {
return (
{code}
);
}
export function SyntaxHighlightedCode({ code, lang }: Props) {
const { isDark } = useTheme();
const [ready, setReady] = useState(() => isLanguageRegistered(lang));
useEffect(() => {
let cancelled = false;
setReady(isLanguageRegistered(lang));
const promise = ensureLanguageRegistered(lang);
if (promise) {
promise.then(() => { if (!cancelled) setReady(true); });
}
return () => { cancelled = true; };
}, [lang]);
if (!ready) {
return ;
}
return (
{code}
);
}