feat(highlight): add syntax highlighting

- Add syntax highlighting with [highlight.js](https://highlightjs.org/)

Signed-off-by: minicx <minicx@disroot.org>

ui/components/CodeBlock.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import hljs from 'highlight.js';
+
+const CodeBlock = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && className?.includes('lang-')) {
+      hljs.highlightElement(ref.current);
+      // hljs won't reprocess the element unless this attribute is removed
+      ref.current.removeAttribute('data-highlighted');
+    }
+  }, [children, className]);
+  return (
+    <code className={className} ref={ref}>
+      {children}
+    </code>
+  );
+};
+
+export default CodeBlock;

ui/components/MessageBox.tsx

@@ -19,6 +19,7 @@ import MessageSources from './MessageSources';
 import SearchImages from './SearchImages';
 import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
+import CodeBlock from './CodeBlock';
 
 const MessageBox = ({
   message,
@@ -110,6 +111,11 @@ const MessageBox = ({
                   'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
                   'max-w-none break-words text-black dark:text-white',
                 )}
+                options={{
+                  overrides: {
+                    code: CodeBlock,
+                  },
+                }}
               >
                 {parsedMessage}
               </Markdown>