feat: Codeblock syntax highlighting with HLJS

package.json

@@ -52,6 +52,7 @@
     "cassandra-driver": "^4.7.2",
     "express": "^4.21.2",
     "lucide-svelte": "^0.474.0",
+    "markdown-it-highlightjs": "^4.2.0",
     "mode-watcher": "^0.5.1",
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",

src/app.css

@@ -1,3 +1,5 @@
+@import '../node_modules/highlight.js/styles/github-dark.min.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/lib/components/message.svelte

@@ -14,7 +14,7 @@
   </div>
   <div class="w-full">
     <p class="inline-size-full break-words font-bold">{user}</p>
-    <Prose class="inline-size-full text-wrap break-words font-sans">{@html renderMarkdown(escapeHTML(message))}</Prose>
+    <Prose class="inline-size-full text-wrap break-words font-sans">{@html renderMarkdown(message)}</Prose>
   </div>
 </div>
 

src/lib/functions/renderMarkdown.ts

@@ -1,4 +1,5 @@
 import markdownit from 'markdown-it';
+import highlightjs from 'markdown-it-highlightjs';
 
 export default function renderMarkdown(input: string): string {
   const md = markdownit({
@@ -6,7 +7,10 @@ export default function renderMarkdown(input: string): string {
     linkify: true,
     typographer: true,
     breaks: true,
-  }).disable(['image', 'table']);
+  });
+
+  md.disable(['image', 'table']);
+  md.use(highlightjs);
 
   return md.render(input);
 }

tailwind.config.ts

@@ -53,11 +53,24 @@ const config: Config = {
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
+        'background-color': '#22272E',
         sm: 'calc(var(--radius) - 4px)',
       },
       fontFamily: {
         sans: [...fontFamily.sans],
       },
+      typography: () => ({
+        DEFAULT: {
+          css: {
+            pre: {
+              'background-color': '#22272E',
+              code: {
+                'background-color': '#22272E',
+              },
+            },
+          },
+        },
+      }),
     },
   },
   plugins: [typography],