feat(rehype): Change highlight to pretty-code

package.json

@@ -30,7 +30,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-highlight": "^7.0.0",
+    "rehype-pretty-code": "^0.13.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-gfm": "^4.0.0",

src/features/shared/helpers/markdown.ts

@@ -1,13 +1,14 @@
-import rehypeHighlight from 'rehype-highlight';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import remarkGfm from 'remark-gfm';
+import rehypePrettyCode from 'rehype-pretty-code';
 import { Handlers } from 'remark-html/lib';
 
+// https://github.com/syntax-tree/mdast-util-to-hast?tab=readme-ov-file#example-supporting-custom-nodes
 const rehypeHandlers: Handlers = {
   // https://github.com/syntax-tree/mdast#nodes
   link(state, node) {
@@ -46,7 +47,7 @@ const rehypeHandlers: Handlers = {
 };
 
 const markdownToHtml = async (mdText: string) => {
-  const htmlText = unified()
+  const htmlText = await unified()
     .use(remarkParse)
     .use(remarkGfm)
     .use(remarkRehype, {
@@ -55,9 +56,12 @@ const markdownToHtml = async (mdText: string) => {
     })
     .use(rehypeSlug)
     .use(rehypeAutolinkHeadings)
-    .use(rehypeHighlight)
+    .use(rehypePrettyCode, {
+      theme: 'material-theme-palenight',
+      keepBackground: false,
+    })
     .use(rehypeStringify, { allowDangerousHtml: true })
-    .processSync(mdText);
+    .process(mdText);
 
   return htmlText.toString();
 };