From ff3cd97a3b0472f2ebfb467f42e50db276d9b0ca Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 23 May 2024 17:41:25 +0100
Subject: [PATCH] Fixed the syntax highlighting for JSON and TypeScript with
 the new Prisma renderer

---
 apps/webapp/app/components/code/CodeBlock.tsx | 13 +++++++++++--
 apps/webapp/remix.config.js                   |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index ff0956a35..144c9ad33 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -1,14 +1,23 @@
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import type { Language, PrismTheme } from "prism-react-renderer";
-import { Highlight } from "prism-react-renderer";
+import { Highlight, Prism } from "prism-react-renderer";
 import { forwardRef, useCallback, useState } from "react";
 import { cn } from "~/utils/cn";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
 import { Paragraph } from "../primitives/Paragraph";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
 
 //This is a fork of https://github.com/mantinedev/mantine/blob/master/src/mantine-prism/src/Prism/Prism.tsx
 //it didn't support highlighting lines by dimming the rest of the code, or animations on the highlighting
 
+async function setup() {
+  (typeof global !== "undefined" ? global : window).Prism = Prism;
+  //@ts-ignore
+  await import("prismjs/components/prism-json");
+  //@ts-ignore
+  await import("prismjs/components/prism-typescript");
+}
+setup();
+
 type CodeBlockProps = {
   /** Code which will be highlighted */
   code: string;
diff --git a/apps/webapp/remix.config.js b/apps/webapp/remix.config.js
index 7ddae5e0e..ea4bf3037 100644
--- a/apps/webapp/remix.config.js
+++ b/apps/webapp/remix.config.js
@@ -20,6 +20,8 @@ module.exports = {
     "highlight.run",
     "random-words",
     "superjson",
+    "prismjs/components/prism-json",
+    "prismjs/components/prism-typescript",
   ],
   browserNodeBuiltinsPolyfill: { modules: { path: true, os: true, crypto: true } },
   watchPaths: async () => {