Use marked markdown parser

web-app/src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { Marked } from "marked";
-import hljs from "highlight.js";
 import { markedHighlight } from "marked-highlight";
+import hljs from "highlight.js";
 
 export const sortOptions = [
   { value: "creation-time", text: "Creation time" },
@@ -12,15 +12,7 @@ export const sortOptions = [
 export const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/svg+xml", "image/webp"];
 
 const createMarkdownParser = () => {
-  const marked = new Marked(
+  const marked = new Marked();
-    markedHighlight({
-      langPrefix: "hljs language-",
-      highlight(code, lang) {
-        const language = hljs.getLanguage(lang) ? lang : "plaintext";
-        return hljs.highlight(code, { language }).value;
-      }
-    })
-  );
 
   marked.use({
     async: true,
@@ -28,6 +20,17 @@ const createMarkdownParser = () => {
     gfm: true
   });
 
+  marked.use(
+    markedHighlight({
+      async: true,
+      langPrefix: "language-",
+      highlight(code, lang) {
+        const language = hljs.getLanguage(lang) ? lang : "plaintext";
+        return hljs.highlight(code, { language }).value;
+      }
+    })
+  );
+
   return marked;
 };
 
@@ -39,6 +42,8 @@ export const md = async (markdownContent: string) => {
   return html;
 };
 
+// test
+
 export const handleImagePaste = async (event: ClipboardEvent, API_BASE_PREFIX: string) => {
   const clipboardItems = Array.from(event.clipboardData?.items || []);
   const file = clipboardItems.find((item) => item.type.startsWith("image/"));

web-app/template-styles/common-styles.css

@@ -165,6 +165,7 @@ pre {
   border: var(--border-primary);
   padding: var(--space-s);
   overflow-x: auto;
+  flex-shrink: 0;
 }
 
 code {