From c11fcbae922a77b22dc51fc5d988a5646ed78935 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 18 Aug 2024 14:03:36 +0900
Subject: feat(frontend): syntax highlight for code block in watch page

---
 frontend/app/components/Gaming/CodeBlock.tsx                | 13 +++++++++++--
 .../app/components/GolfWatchApps/GolfWatchAppGaming.tsx     |  4 ++--
 2 files changed, 13 insertions(+), 4 deletions(-)

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index 20cd425..b193774 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -1,11 +1,20 @@
+import Prism, { highlight, languages } from "prismjs";
+import "prismjs/components/prism-swift";
+import "prismjs/themes/prism.min.css";
+
+Prism.manual = true;
+
 type Props = {
 	code: string;
+	language: string;
 };
 
-export default function CodeBlock({ code }: Props) {
+export default function CodeBlock({ code, language }: Props) {
+	const highlighted = highlight(code, languages[language]!, language);
+
 	return (
 		<pre className="bg-white resize-none h-full w-full rounded-lg border border-gray-300 p-2">
-			<code>{code}</code>
+			<code dangerouslySetInnerHTML={{ __html: highlighted }} />
 		</pre>
 	);
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index b2598fc..2bc5d55 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -88,7 +88,7 @@ export default function GolfWatchAppGaming({
 				bgB="bg-purple-400"
 			/>
 			<div className="grow grid grid-cols-3 p-4 gap-4">
-				<CodeBlock code={playerInfoA.code ?? ""} />
+				<CodeBlock code={playerInfoA.code ?? ""} language="swift" />
 				<div className="flex flex-col gap-4 justify-between">
 					<div className="grid grid-cols-2 gap-4">
 						<SubmitResult result={playerInfoA.submitResult} />
@@ -101,7 +101,7 @@ export default function GolfWatchAppGaming({
 						<BorderedContainer>{problemDescription}</BorderedContainer>
 					</div>
 				</div>
-				<CodeBlock code={playerInfoB.code ?? ""} />
+				<CodeBlock code={playerInfoB.code ?? ""} language="swift" />
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2