new frontend

frontend_new/src/lib/markdown.ts

@@ -0,0 +1,35 @@
+import { marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import hljs from "highlight.js/lib/common";
+
+marked.use(
+    markedHighlight({
+        langPrefix: "hljs language-",
+        highlight(code, lang) {
+            if (lang && hljs.getLanguage(lang)) {
+                return hljs.highlight(code, { language: lang }).value;
+            }
+            return hljs.highlightAuto(code).value;
+        },
+    }),
+);
+
+/**
+ * Preprocesses markdown with extended image size syntax:
+ *   ![alt](url =WIDTHxHEIGHT)
+ */
+export function preprocessMarkdown(content: string): string {
+    if (!content) return content;
+    return content.replace(/!\[([^\]]*)\]\(([^\s)"]+)(?:\s+"([^"]*)")?\s+=(\d*%?)[xX](\d*%?)\)/gi, (_, alt, url, title, w, h) => {
+        const safeAlt = alt.replace(/"/g, """);
+        let attrs = `src="${url}" alt="${safeAlt}"`;
+        if (title) attrs += ` title="${title.replace(/"/g, """)}"`;
+        if (w) attrs += ` width="${w}"`;
+        if (h) attrs += ` height="${h}"`;
+        return `<img ${attrs}>`;
+    });
+}
+
+export function renderMarkdown(content: string): string {
+    return marked.parse(preprocessMarkdown(content || ""), { async: false }) as string;
+}