add basic syntax highlighting of code blocks with highlight.js

package-lock.json

@@ -24,6 +24,7 @@
         "eslint": "8.36.0",
         "eslint-config-next": "13.2.4",
         "gpt-token-utils": "^1.2.0",
+        "highlight.js": "^11.8.0",
         "lodash": "^4.17.21",
         "nanoid": "^4.0.1",
         "next": "13.2.4",
@@ -45,6 +46,7 @@
         "buffer": "^5.7.1",
         "parcel": "^2.8.3",
         "parcel-reporter-static-files-copy": "^1.5.0",
+        "path-browserify": "^1.0.1",
         "process": "^0.11.10"
       }
     },
@@ -4575,6 +4577,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.8.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
+      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/history": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
@@ -11552,6 +11562,11 @@
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
       "integrity": "sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng=="
     },
+    "highlight.js": {
+      "version": "11.8.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
+      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg=="
+    },
     "history": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",

package.json

@@ -18,8 +18,8 @@
     "@types/react-dom": "^18.0.11",
     "buffer": "^5.7.1",
     "parcel": "^2.8.3",
-    "path-browserify": "^1.0.1",
     "parcel-reporter-static-files-copy": "^1.5.0",
+    "path-browserify": "^1.0.1",
     "process": "^0.11.10"
   },
   "dependencies": {
@@ -41,6 +41,7 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "gpt-token-utils": "^1.2.0",
+    "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.1",
     "next": "13.2.4",

src/components/MessageItem.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   ActionIcon,
   Box,
@@ -21,6 +23,9 @@ import { CreatePromptModal } from "./CreatePromptModal";
 import { LogoIcon } from "./Logo";
 import { ScrollIntoView } from "./ScrollIntoView";
 
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+
 export function MessageItem({ message }: { message: Message }) {
   const clipboard = useClipboard({ timeout: 500 });
   const wordCount = useMemo(() => {
@@ -46,12 +51,16 @@ export function MessageItem({ message }: { message: Message }) {
                 table: ({ node, ...props }) => (
                   <Table verticalSpacing="sm" highlightOnHover {...props} />
                 ),
-                code: ({ node, inline, ...props }) =>
-                  inline ? (
-                    <Code {...props} />
-                  ) : (
+                code: ({ node, inline, ...props }) => {
+                  if (inline) {
+                    return <Code {...props} />;
+                  }
+                  const codeString = React.Children.toArray(props.children).join('');
+                  const highlightedCode = hljs.highlightAuto(codeString).value;
+                  const { children: _, ...propsWithoutChildren } = props;
+                  return (
                     <Box sx={{ position: "relative" }}>
-                      <Code block {...props} />
+                      <Code block {...propsWithoutChildren} dangerouslySetInnerHTML={{ __html: highlightedCode }} />
                       <CopyButton value={String(props.children)}>
                         {({ copied, copy }) => (
                           <Tooltip
@@ -68,7 +77,8 @@ export function MessageItem({ message }: { message: Message }) {
                         )}
                       </CopyButton>
                     </Box>
-                  ),
+                  );
+                }
               }}
             />
             {message.role === "assistant" && (