Merge branch 'phperkaigi-2025-ws-to-polling' into phperkaigi-2025

1 files changed, 24 insertions, 7 deletions

diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index b7d45c0..0a9a2e5 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -1,8 +1,5 @@
-import Prism, { highlight, languages } from "prismjs";
-import "prismjs/components/prism-swift";
-import "prismjs/themes/prism.min.css";
-
-Prism.manual = true;
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
 
 type Props = {
 	code: string;
@@ -10,11 +7,31 @@ type Props = {
 };
 
 export default function CodeBlock({ code, language }: Props) {
-	const highlighted = highlight(code, languages[language]!, language);
+	const [highlightedCode, setHighlightedCode] = useState<string | null>(null);
+
+	useEffect(() => {
+		let isMounted = true;
+
+		(async () => {
+			const highlighted = await codeToHtml(code, {
+				lang: language,
+				theme: "github-light",
+			});
+			if (isMounted) {
+				setHighlightedCode(highlighted);
+			}
+		})();
+
+		return () => {
+			isMounted = false;
+		};
+	}, [code, language]);
 
 	return (
 		<pre className="h-full w-full p-2 bg-gray-50 rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
-			<code dangerouslySetInnerHTML={{ __html: highlighted }} />
+			{highlightedCode === null ? null : (
+				<code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+			)}
 		</pre>
 	);
 }