migrate to shiki for syntax highlighting

package.json

@@ -10,9 +10,8 @@
 		"prepare": "husky"
 	},
 	"dependencies": {
-		"bright": "^0.8.5",
 		"clsx": "^2.1.1",
-		"next": "14.2.6",
+		"next": "14.2.7",
 		"next-sitemap": "^4.2.3",
 		"next-themes": "^0.3.0",
 		"react": "18.3.1",
@@ -24,13 +23,14 @@
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
 		"@types/bun": "^1.1.8",
-		"@types/node": "20.11.25",
-		"@types/react": "18.2.64",
-		"@types/react-dom": "18.2.21",
+		"@types/node": "22.5.2",
+		"@types/react": "18.3.5",
+		"@types/react-dom": "18.3.0",
 		"autoprefixer": "10.4.20",
 		"husky": "^9.1.5",
 		"lint-staged": "^15.2.9",
-		"postcss": "8.4.41",
+		"postcss": "8.4.42",
+		"shiki": "^1.15.2",
 		"tailwindcss": "3.4.10",
 		"typescript": "5.5.4"
 	},

src/app/globals.css

@@ -5,3 +5,10 @@
 body {
   overscroll-behavior-y: none;
 }
+
+html .shiki {
+  background: #d4d4d411 !important;
+  @apply sm:!p-4 !p-6;
+  @apply !text-sm sm:!text-base;
+  @apply !text-wrap
+}

src/components/RequestDisplayElement.tsx

@@ -1,28 +1,29 @@
 import { cn } from "@/utils/cn"
-import { Code } from "bright"
+import { codeToHtml } from "shiki"
 
 interface RequestDisplayElementProps {
 	className?: string
 	slug: string
 }
 
-const RequestDisplayElement = ({
+const RequestDisplayElement = async ({
 	className,
 	slug,
-}: RequestDisplayElementProps): JSX.Element => {
+}: RequestDisplayElementProps): Promise<JSX.Element> => {
+	const code = await codeToHtml(getRequest(slug), {
+		lang: "typescript",
+		theme: "solarized-dark",
+	})
+
 	return (
 		<div className={cn("flex flex-col w-full max-w-screen-lg", className)}>
-			<h4 className="-mb-2 text-lg font-bold md:text-xl lg:text-2xl opacity-70">
+			<h4 className="mb-2 text-lg font-bold md:text-xl lg:text-2xl opacity-70">
 				Request:
 			</h4>
-			<Code
-				lang="javascript"
-				title="request.js"
-				lineNumbers
-				theme={"github-dark-dimmed"}
-				className="max-h-screen !overflow-y-auto"
-				codeClassName="!select-text selection:!bg-[#ffffff44] text-sm"
-				code={getRequest(slug)}
+			<div
+				className="rounded-xl border border-[#333] overflow-x-auto"
+				/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */
+				dangerouslySetInnerHTML={{ __html: code }}
 			/>
 		</div>
 	)

src/components/ResponseDisplayElement.tsx

@@ -1,28 +1,29 @@
 import { cn } from "@/utils/cn"
-import { Code } from "bright"
+import { codeToHtml } from "shiki/bundle-web.mjs"
 
 interface ResponseDisplayElementProps {
 	className?: string
 	children: string
 }
 
-const ResponseDisplayElement = ({
+const ResponseDisplayElement = async ({
 	className,
 	children,
-}: ResponseDisplayElementProps): JSX.Element => {
+}: ResponseDisplayElementProps): Promise<JSX.Element> => {
+	const code = await codeToHtml(children, {
+		lang: "json",
+		theme: "solarized-dark",
+	})
+
 	return (
 		<div className={cn("flex flex-col w-full max-w-screen-lg", className)}>
-			<h4 className="-mb-2 text-lg font-bold md:text-xl lg:text-2xl opacity-70">
+			<h4 className="mb-2 text-lg font-bold md:text-xl lg:text-2xl opacity-70">
 				Result:
 			</h4>
-			<Code
-				lang="json"
-				title="response.json"
-				lineNumbers
-				theme={"github-dark-dimmed"}
-				className="max-h-screen !overflow-y-auto"
-				codeClassName="!select-text selection:!bg-[#ffffff44] text-sm"
-				code={children}
+			<div
+				className="rounded-xl border border-[#333] overflow-x-auto"
+				/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */
+				dangerouslySetInnerHTML={{ __html: code }}
 			/>
 		</div>
 	)