feat(frontend): syntax highlight for code block in watch page

4 files changed, 31 insertions, 4 deletions

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>
 	);
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b706788..ad96c48 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
 				"isbot": "^5.1.13",
 				"jwt-decode": "^4.0.0",
 				"openapi-fetch": "^0.10.2",
+				"prismjs": "^1.29.0",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
 				"react-use-websocket": "^4.8.1",
@@ -27,6 +28,7 @@
 			"devDependencies": {
 				"@biomejs/biome": "^1.8.3",
 				"@remix-run/dev": "^2.10.3",
+				"@types/prismjs": "^1.26.4",
 				"@types/react": "^18.3.3",
 				"@types/react-dom": "^18.3.0",
 				"@typescript-eslint/eslint-plugin": "^6.7.4",
@@ -2288,6 +2290,12 @@
 				"undici-types": "~5.26.4"
 			}
 		},
+		"node_modules/@types/prismjs": {
+			"version": "1.26.4",
+			"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.4.tgz",
+			"integrity": "sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==",
+			"dev": true
+		},
 		"node_modules/@types/prop-types": {
 			"version": "15.7.12",
 			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -8959,6 +8967,14 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/prismjs": {
+			"version": "1.29.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/proc-log": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b8b9e93..5022494 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
 		"isbot": "^5.1.13",
 		"jwt-decode": "^4.0.0",
 		"openapi-fetch": "^0.10.2",
+		"prismjs": "^1.29.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-use-websocket": "^4.8.1",
@@ -35,6 +36,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
 		"@remix-run/dev": "^2.10.3",
+		"@types/prismjs": "^1.26.4",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@typescript-eslint/eslint-plugin": "^6.7.4",