diff options
Diffstat (limited to 'frontend/app/components')
| -rw-r--r-- | frontend/app/components/Gaming/CodeBlock.tsx | 26 |
1 files changed, 22 insertions, 4 deletions
diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx index 49ef01e..2107f94 100644 --- a/frontend/app/components/Gaming/CodeBlock.tsx +++ b/frontend/app/components/Gaming/CodeBlock.tsx @@ -8,12 +8,30 @@ type Props = { language: BundledLanguage; }; +function Plaintext({ code }: { code: string }) { + const lines = code.split("\n"); + return ( + <pre> + <code> + {lines.map((line, i) => ( + <span key={i} className="line"> + {line} + {i < lines.length - 1 ? "\n" : ""} + </span> + ))} + </code> + </pre> + ); +} + export default function CodeBlock({ code, language }: Props) { const [nodes, setNodes] = useState<JSX.Element | null>(null); const [showCopied, setShowCopied] = useState(false); useLayoutEffect(() => { - highlight(code, language).then(setNodes); + highlight(code, language) + .then(setNodes) + .catch(() => setNodes(null)); }, [code, language]); const handleCopy = () => { @@ -37,9 +55,9 @@ export default function CodeBlock({ code, language }: Props) { )} </button> )} - <pre className="h-full w-full p-2 pr-12 bg-white rounded-lg border border-gray-300 whitespace-pre-wrap break-words"> - {nodes === null ? <code>{code}</code> : nodes} - </pre> + <div className="shiki h-full w-full p-2 pr-12 bg-white rounded-lg border border-gray-300 whitespace-pre-wrap break-words"> + {nodes ?? <Plaintext code={code} />} + </div> </div> ); } |