wasm-html-to-image 1.0.21 → 1.0.23

package/dist/markdown.js

@@ -0,0 +1,302 @@
+import { marked, Marked } from "marked";
+import { mathExtension } from "./markdown-math-syntax.js";
+import { DEFAULT_PAGE, DEFAULT_TYPE, fillRunningText, parseFrontMatter, resolveTemplate, titleHtml, } from "./markdown-template.js";
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import c from "highlight.js/lib/languages/c";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import css from "highlight.js/lib/languages/css";
+import diff from "highlight.js/lib/languages/diff";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import go from "highlight.js/lib/languages/go";
+import ini from "highlight.js/lib/languages/ini";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import kotlin from "highlight.js/lib/languages/kotlin";
+import markdownLang from "highlight.js/lib/languages/markdown";
+import php from "highlight.js/lib/languages/php";
+import python from "highlight.js/lib/languages/python";
+import ruby from "highlight.js/lib/languages/ruby";
+import rust from "highlight.js/lib/languages/rust";
+import scss from "highlight.js/lib/languages/scss";
+import shell from "highlight.js/lib/languages/shell";
+import sql from "highlight.js/lib/languages/sql";
+import swift from "highlight.js/lib/languages/swift";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+// A private instance: registering languages must not leak into an app's own highlight.js.
+const highlighter = hljs.newInstance();
+for (const [name, def] of Object.entries({
+    bash, c, cpp, csharp, css, diff, dockerfile, go, ini, java, javascript, json, kotlin,
+    markdown: markdownLang, php, python, ruby, rust, scss, shell, sql, swift, typescript, xml, yaml,
+})) {
+    highlighter.registerLanguage(name, def);
+}
+highlighter.registerAliases(["js", "jsx", "mjs", "cjs"], { languageName: "javascript" });
+highlighter.registerAliases(["ts", "tsx"], { languageName: "typescript" });
+highlighter.registerAliases(["sh", "zsh"], { languageName: "bash" });
+highlighter.registerAliases(["html", "svg", "vue"], { languageName: "xml" });
+highlighter.registerAliases(["yml"], { languageName: "yaml" });
+highlighter.registerAliases(["py"], { languageName: "python" });
+highlighter.registerAliases(["rs"], { languageName: "rust" });
+highlighter.registerAliases(["rb"], { languageName: "ruby" });
+highlighter.registerAliases(["md"], { languageName: "markdown" });
+highlighter.registerAliases(["c++", "h", "hpp"], { languageName: "cpp" });
+highlighter.registerAliases(["cs"], { languageName: "csharp" });
+highlighter.registerAliases(["kt"], { languageName: "kotlin" });
+highlighter.registerAliases(["toml"], { languageName: "ini" });
+/** Options for {@link markdownToHtml}. */
+// The template API lives beside the converter: `import { listTemplates, type MarkdownTemplate } from ".../markdown"`.
+export { listTemplates, TEMPLATES } from "./markdown-template.js";
+/** A URL-fragment-safe id for a heading: letters (any script), digits, `-` and `_`, spaces as `-`. */
+function slugify(text) {
+    const slug = text
+        .trim()
+        .toLowerCase()
+        .replace(/<[^>]*>/g, "")
+        .replace(/[^\p{L}\p{N}\s_-]/gu, "")
+        .replace(/\s+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return slug || "section";
+}
+const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const PALETTES = {
+    light: {
+        fg: "#1f2328",
+        muted: "#59636e",
+        bg: "#ffffff",
+        border: "#d1d9e0",
+        codeBg: "#f6f8fa",
+        link: "#0969da",
+        quote: "#59636e",
+        keyword: "#cf222e",
+        string: "#0a3069",
+        comment: "#6e7781",
+        number: "#0550ae",
+        title: "#8250df",
+        tag: "#116329",
+        add: "#dafbe1",
+        del: "#ffebe9",
+    },
+    dark: {
+        fg: "#e6edf3",
+        muted: "#9198a1",
+        bg: "#0d1117",
+        border: "#3d444d",
+        codeBg: "#151b23",
+        link: "#4493f8",
+        quote: "#9198a1",
+        keyword: "#ff7b72",
+        string: "#a5d6ff",
+        comment: "#8b949e",
+        number: "#79c0ff",
+        title: "#d2a8ff",
+        tag: "#7ee787",
+        add: "#12261e",
+        del: "#3c1618",
+    },
+};
+/** The built-in GitHub-like stylesheet. Plain selectors only: it has to render in the engine as well. */
+export function markdownStylesheet(theme = "light", padding = 32, maxWidth, paged = false, type = DEFAULT_TYPE, accent, page) {
+    const c = { ...PALETTES[theme], ...(accent ? { link: accent } : {}) };
+    const head = type.headingFont ?? type.font;
+    const headColor = type.accentHeadings && accent ? accent : c.fg;
+    const pageRule = page
+        ? `@page { ${page.size ? `size: ${page.size}; ` : ""}margin: ${page.margin}; }\n`
+        : paged
+            ? `@page { margin: ${padding}px; }\n`
+            : "";
+    return `${pageRule}:root { --accent: ${accent ?? c.link}; }
+html, body { margin: 0; padding: 0; background: ${c.bg}; }
+body { color: ${c.fg}; font-family: ${type.font}; font-size: ${type.size}px; line-height: ${type.lineHeight};${type.justify ? " text-align: justify;" : ""} }
+.markdown-body { padding: ${paged ? 0 : padding}px;${maxWidth ? ` max-width: ${maxWidth}px; margin: 0 auto;` : ""} }
+.markdown-body > *:first-child { margin-top: 0; }
+.markdown-body > *:last-child { margin-bottom: 0; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-family: ${head}; font-weight: ${type.headingWeight}; line-height: 1.25; text-align: left; color: ${headColor}; }
+.markdown-body h1 { font-size: 2em;${type.h1Rule ? ` padding-bottom: 0.3em; border-bottom: 1px solid ${c.border};` : ""}${type.chapterBreak ? " break-before: page;" : ""} }
+.markdown-body h2 { font-size: 1.5em;${type.h2Rule ? ` padding-bottom: 0.3em; border-bottom: 1px solid ${c.border};` : ""} }
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1em; }
+.markdown-body h5 { font-size: 0.875em; }
+.markdown-body h6 { font-size: 0.85em; color: ${c.muted}; }
+.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body table { margin-top: 0; margin-bottom: 16px; }
+.markdown-body ul, .markdown-body ol { padding-left: 2em; }
+.markdown-body li + li { margin-top: 0.25em; }
+.markdown-body li > ul, .markdown-body li > ol { margin-top: 0.25em; margin-bottom: 0; }
+.markdown-body a { color: ${c.link}; text-decoration: none; }
+.markdown-body strong { font-weight: 600; }
+.markdown-body blockquote { padding: 0 1em; color: ${c.quote}; border-left: 4px solid ${c.border}; }
+.markdown-body blockquote > *:last-child { margin-bottom: 0; }
+.markdown-body code { padding: 0.2em 0.4em; font-family: ${type.mono}; font-size: 85%; background: ${c.codeBg}; border-radius: ${type.radius}px; }
+.markdown-body pre { padding: 16px; overflow: hidden; font-size: 85%; line-height: 1.45; background: ${c.codeBg}; border-radius: ${type.radius}px; text-align: left; }
+.markdown-body pre code { padding: 0; font-size: 100%; background: transparent; white-space: pre; }
+.markdown-body hr { height: 0; margin: 24px 0; border: 0; border-top: 4px solid ${c.border}; }
+.markdown-body img { max-width: 100%; }
+.markdown-body table { border-collapse: collapse; }
+.markdown-body th, .markdown-body td { padding: 6px 13px; border: 1px solid ${c.border}; }
+.markdown-body th { font-weight: 600; }
+.markdown-body tr:nth-child(2n) { background: ${c.codeBg}; }
+.markdown-body input[type="checkbox"] { margin: 0 0.4em 0 -1.4em; }
+.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-type, .hljs-meta { color: ${c.keyword}; }
+.hljs-string, .hljs-regexp, .hljs-symbol { color: ${c.string}; }
+.hljs-comment, .hljs-quote { color: ${c.comment}; }
+.hljs-number, .hljs-literal, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-built_in, .hljs-selector-id, .hljs-selector-class, .hljs-params { color: ${c.number}; }
+.hljs-title { color: ${c.title}; }
+.hljs-name, .hljs-tag, .hljs-selector-tag, .hljs-bullet { color: ${c.tag}; }
+.hljs-section { color: ${c.number}; font-weight: 600; }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 600; }
+.hljs-addition { color: ${c.tag}; background: ${c.add}; }
+.hljs-deletion { color: ${c.keyword}; background: ${c.del}; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { break-after: avoid; }
+.markdown-body .toc { margin: 0 0 24px; break-after: page; }
+.markdown-body .toc-title { margin: 0 0 12px; font-size: 1.5em; font-weight: 600; line-height: 1.25; }
+.markdown-body .toc-item { display: flex; align-items: baseline; padding: 2px 0; color: ${c.fg}; text-decoration: none; }
+.markdown-body .toc-l1 { font-weight: 600; margin-top: 6px; }
+.markdown-body .toc-l2 { padding-left: 1.25em; }
+.markdown-body .toc-l3 { padding-left: 2.5em; }
+.markdown-body .toc-l4, .markdown-body .toc-l5, .markdown-body .toc-l6 { padding-left: 3.75em; }
+.markdown-body .toc-leader { flex: 1; min-width: 12px; margin: 0 6px; border-bottom: 1px dotted ${c.muted}; }
+.markdown-body .toc-page { min-width: 2.5em; text-align: right; color: ${c.muted}; }
+.markdown-body pre, .markdown-body table, .markdown-body blockquote, .markdown-body img, .markdown-body tr { break-inside: avoid; }
+`;
+}
+/** The cover: a fixed structure the template's CSS dresses. Its title is not an h1, so it stays out of the outline. */
+function coverHtml(settings) {
+    const parts = [
+        settings.logo ? `<img class="cover-logo" src="${escapeHtml(settings.logo)}" alt="">` : "",
+        `<p class="cover-title">${titleHtml(settings.title ?? "")}</p>`,
+        settings.subtitle ? `<p class="cover-subtitle">${escapeHtml(settings.subtitle)}</p>` : "",
+        settings.author || settings.date
+            ? `<p class="cover-meta">${settings.author ? `<span class="cover-author">${escapeHtml(settings.author)}</span>` : ""}${settings.date ? `<span class="cover-date">${escapeHtml(settings.date)}</span>` : ""}</p>`
+            : "",
+    ];
+    return `<header class="cover">${parts.join("")}</header>
+`;
+}
+/** Structure of the cover and the first page; templates tune it with their own `css`. */
+const COVER_CSS = `.cover { margin: 40mm 0 0; break-after: page; }
+.cover-logo { display: block; max-height: 22mm; max-width: 60mm; margin-bottom: 14mm; }
+.cover-title { margin: 0; font-size: 2.6em; font-weight: 700; line-height: 1.25; }
+.cover-subtitle { margin: 0.6em 0 0; font-size: 1.25em; color: #6b7280; }
+.cover-meta { margin: 3em 0 0; color: #6b7280; }
+.cover-meta span + span { margin-left: 1.5em; }
+`;
+/**
+ * The table-of-contents block: a nav with one row per heading. A row is a block link (the whole row
+ * is clickable in the PDF) holding the heading, a dotted leader and the page number. The number is
+ * an element with data-toc-page, which the PDF renderer fills in once the pages are planned; it has
+ * a fixed width so a longer number does not rewrap the row and move the pages.
+ */
+function tocHtml(entries, options) {
+    const depth = Math.min(6, Math.max(1, options.depth ?? 3));
+    const title = options.title ?? "Contents";
+    const rows = entries
+        .filter((e) => e.level <= depth)
+        .map((e) => `<a class="toc-item toc-l${e.level}" href="#${e.id}"><span class="toc-text">${e.html}</span><span class="toc-leader"></span><span class="toc-page" data-toc-page="${e.id}">0</span></a>`)
+        .join("");
+    if (!rows)
+        return "";
+    return `<nav class="toc">${title ? `<p class="toc-title">${escapeHtml(title)}</p>` : ""}${rows}</nav>
+`;
+}
+/**
+ * Convert Markdown (GitHub flavoured, via `marked`) to a complete HTML document with a built-in
+ * GitHub-like stylesheet, ready to pass to `render({ value })`.
+ */
+export function markdownToHtml(markdown, options = {}) {
+    return markdownToDocument(markdown, options).html;
+}
+/**
+ * Convert Markdown (GitHub flavoured, via `marked`) to a page and the render options that go with it
+ * (a template's running header and footer, the PDF's title). {@link markdownToHtml} is the HTML alone.
+ */
+export function markdownToDocument(markdown, options = {}) {
+    let source = markdown;
+    let front = {};
+    if (options.frontMatter !== false) {
+        const m = /^?---[ \t]*\r?\n([^]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(source);
+        if (m) {
+            source = source.slice(m[0].length);
+            front = parseFrontMatter(m[1]);
+        }
+    }
+    // Template defaults < front matter < options.
+    const named = (typeof options.template === "string" ? options.template : undefined) ?? front.template;
+    const template = resolveTemplate(typeof options.template === "object" ? options.template : named);
+    const settings = {
+        ...template.defaults,
+        ...front,
+        ...options.settings,
+        ...(options.title !== undefined ? { title: options.title } : {}),
+        ...(options.toc !== undefined ? { toc: options.toc !== false } : {}),
+    };
+    // `settings` reports what applied: the template that was used, whichever of the option and the front matter named it.
+    if (typeof options.template === "object")
+        delete settings.template;
+    else if (named !== undefined)
+        settings.template = named;
+    const renderer = new marked.Renderer();
+    // Every heading gets an id (a link target, and what the table of contents points at).
+    const entries = [];
+    const usedIds = new Map();
+    renderer.heading = function ({ tokens, depth, text }) {
+        const base = slugify(text);
+        const seen = usedIds.get(base) ?? 0;
+        usedIds.set(base, seen + 1);
+        const id = seen === 0 ? base : `${base}-${seen + 1}`;
+        const inner = this.parser.parseInline(tokens);
+        entries.push({ level: depth, id, html: inner });
+        return `<h${depth} id="${id}">${inner}</h${depth}>\n`;
+    };
+    if (options.highlight !== false) {
+        renderer.code = ({ text, lang }) => {
+            const name = (lang ?? "").trim().split(/\s+/)[0];
+            const body = name && highlighter.getLanguage(name)
+                ? highlighter.highlight(text, { language: name, ignoreIllegals: true }).value
+                : escapeHtml(text);
+            return `<pre><code${name ? ` class="language-${escapeHtml(name)}"` : ""}>${body}\n</code></pre>\n`;
+        };
+    }
+    const parser = options.math ? new Marked(mathExtension(options.math)) : marked;
+    const text = parser.parse(source, { async: false, gfm: true, renderer });
+    const tocOption = options.toc ?? (front.toc !== undefined || template.defaults?.toc !== undefined ? settings.toc : !!options.paged);
+    const toc = tocOption === true && typeof options.toc === "object" ? options.toc : tocOption;
+    const tocBlock = toc && entries.length ? tocHtml(entries, toc === true ? {} : toc) : "";
+    const cover = settings.cover && settings.title ? coverHtml(settings) : "";
+    const body = cover + tocBlock + text;
+    const type = { ...DEFAULT_TYPE, ...template.type, ...(settings.font ? { font: settings.font } : {}) };
+    const page = { ...DEFAULT_PAGE, ...template.page };
+    const hasTemplate = options.template !== undefined || front.template !== undefined;
+    // A plain document keeps the exact page it always had; a template adds its own @page (size and margins).
+    const pageSetting = hasTemplate && options.paged !== false
+        ? { size: settings.page_size ?? page.size, margin: page.margin }
+        : settings.page_size && options.paged
+            ? { size: settings.page_size, margin: `${options.padding ?? 32}px` }
+            : undefined;
+    const sheet = options.stylesheet ??
+        markdownStylesheet(options.theme, options.padding, options.maxWidth, options.paged, type, settings.accent, pageSetting);
+    const titleText = settings.title;
+    const title = titleText ? `<title>${escapeHtml(titleText)}</title>` : "";
+    const lang = settings.lang ? ` lang="${escapeHtml(settings.lang)}"` : "";
+    const dir = settings.dir ? ` dir="${escapeHtml(settings.dir)}"` : "";
+    const html = `<!doctype html><html${lang}${dir}><head><meta charset="utf-8">${title}<style>${sheet}${COVER_CSS}${template.css ?? ""}${options.math?.css ?? ""}${options.css ?? ""}</style></head><body><article class="markdown-body">${body}</article></body></html>`;
+    const running = (t) => (t ? fillRunningText(t, settings) : undefined);
+    const stamp = settings.stamp ? `<span style="float:right">${escapeHtml(settings.stamp)}</span>` : "";
+    const header = hasTemplate ? running(page.header) : settings.stamp ? `<div style="font:11px sans-serif;color:#6b7280;padding-top:8mm;text-align:right">${stamp.replace(/<[^>]+>/g, "")}</div>` : undefined;
+    return {
+        html,
+        settings,
+        renderOptions: {
+            // The text area takes the page's background from the CSS; the margins need the page itself painted.
+            ...(options.paged && options.theme === "dark" && options.stylesheet === undefined ? { pdfBackground: PALETTES.dark.bg } : {}),
+            ...(header ? { pdfHeader: header } : {}),
+            ...(hasTemplate && page.footer ? { pdfFooter: running(page.footer) } : {}),
+            ...(settings.title ? { pdfTitle: settings.title.replace(/<br\s*\/?>/gi, " ") } : {}),
+            ...(settings.author ? { pdfAuthor: settings.author } : {}),
+        },
+    };
+}