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;