notely/frontend_new/src/lib/markdown.ts

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;
}