From dce78239551d7c74951f164ac168b2ba52cff3f5 Mon Sep 17 00:00:00 2001
From: Shinwoo PARK <shinwoo.park@psw.kr>
Date: Wed, 12 Mar 2025 13:25:17 +0900
Subject: [PATCH] fix: fix fucking react-syntax-highlighter

---
 package.json                  |  2 +-
 src/components/LoadedCode.tsx | 20 ++++++++++++++++++--
 yarn.lock                     |  4 ++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ae9d99a..62e8562 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-syntax-highlighter": "^15.6.1",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.3.0",
diff --git a/src/components/LoadedCode.tsx b/src/components/LoadedCode.tsx
index 914563b..a083b9b 100644
--- a/src/components/LoadedCode.tsx
+++ b/src/components/LoadedCode.tsx
@@ -1,7 +1,16 @@
 import { Button } from "@pswui/Button";
 import { useToast } from "@pswui/Toast";
-import { forwardRef, useEffect, useMemo, useState } from "react";
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  type Component,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  PrismLight,
+  type SyntaxHighlighterProps,
+} from "react-syntax-highlighter";
 import { duotoneSpace } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
 import js from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
@@ -11,6 +20,13 @@ import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 import ts from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
 import { twMerge } from "tailwind-merge";
 
+const SyntaxHighlighter =
+  PrismLight as unknown as typeof Component<SyntaxHighlighterProps> & {
+    registerLanguage<T>(name: string, func: T): void;
+    alias(name: string, alias: string | string[]): void;
+    alias(aliases: Record<string, string | string[]>): void;
+  };
+
 SyntaxHighlighter.registerLanguage("javascript", js);
 SyntaxHighlighter.registerLanguage("typescript", ts);
 SyntaxHighlighter.registerLanguage("tsx", tsx);
diff --git a/yarn.lock b/yarn.lock
index 643cfa2..b5e8839 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5484,7 +5484,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-syntax-highlighter@npm:^15.5.0":
+"react-syntax-highlighter@npm:^15.6.1":
   version: 15.6.1
   resolution: "react-syntax-highlighter@npm:15.6.1"
   dependencies:
@@ -6342,7 +6342,7 @@ __metadata:
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^6.23.1"
-    react-syntax-highlighter: "npm:^15.5.0"
+    react-syntax-highlighter: "npm:^15.6.1"
     rehype-slug: "npm:^6.0.0"
     remark-gfm: "npm:^4.0.0"
     tailwind-merge: "npm:^2.3.0"