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 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'frontend/app/components/Gaming/CodeBlock.tsx')

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>
 	);
 }
-- 
cgit v1.2.3-70-g09d2