md2x 0.2.0 → 0.2.2

package/README.md

@@ -1,6 +1,8 @@
 # md2x
 
-Markdown → PDF/DOCX converter (local, no server). Supports Mermaid/Graphviz/Vega/HTML/SVG rendering, math, and code highlighting.
+Markdown → PDF/DOCX converter (local, no server). Supports Mermaid/Graphviz/Infographic/Vega/HTML/SVG rendering, math, and code highlighting.
+
+[![npm version](https://img.shields.io/npm/v/md2x.svg?style=flat-square)](https://www.npmjs.com/package/md2x)
 
 ## Usage
 
@@ -26,18 +28,22 @@ Use a theme:
 npx md2x input.md -o output.pdf --theme academic
 ```
 
-## Dev (this repo)
+Help:
 
 ```bash
-npm run node:dev -- ./demo/test.md
+npx md2x -h
 ```
 
 ## Puppeteer / Chrome install
 
 This package depends on `puppeteer`. On first install, Puppeteer downloads a compatible "Chrome for Testing" build (cached under your user directory). Set `PUPPETEER_SKIP_DOWNLOAD=1` to skip download and use a system Chrome via `PUPPETEER_EXECUTABLE_PATH`.
 
-## Publish (maintainers)
+## Open Source License
 
-```bash
-npm publish
-```
+This project is open source under ISC license. Welcome to Star, report issues, suggest features, and contribute code.
+
+**Project URL:** https://github.com/LarchLiu/md2x
+
+## Acknowledgements
+
+- [markdown-viewer-extension](https://github.com/xicilion/markdown-viewer-extension) - Developed based on this project

package/dist/index.mjs

@@ -82282,6 +82282,10 @@ var init_remark_gemoji = __esm({
 });
 
 // ../src/plugins/remark-super-sub.ts
+var remark_super_sub_exports = {};
+__export(remark_super_sub_exports, {
+  default: () => remark_super_sub_default
+});
 function parseScriptSyntax(text9) {
   const result = [];
   let remaining = text9;
@@ -126670,6 +126674,35 @@ function resolveRendererHtmlPath() {
   const moduleDir = path3.dirname(fileURLToPath2(import.meta.url));
   return path3.join(moduleDir, "renderer", "puppeteer-render.html");
 }
+function getPaperSizeInches(format) {
+  switch (format) {
+    case "Letter":
+      return { widthIn: 8.5, heightIn: 11 };
+    case "Legal":
+      return { widthIn: 8.5, heightIn: 14 };
+    case "A3":
+      return { widthIn: 11.69, heightIn: 16.54 };
+    case "A5":
+      return { widthIn: 5.83, heightIn: 8.27 };
+    case "A4":
+    default:
+      return { widthIn: 8.27, heightIn: 11.69 };
+  }
+}
+function parseCssLengthToInches(value) {
+  const v = String(value ?? "").trim();
+  if (!v) return null;
+  const m = v.match(/^(-?\d+(?:\.\d+)?)(px|in|mm|cm)$/i);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  if (!Number.isFinite(n)) return null;
+  const unit = m[2].toLowerCase();
+  if (unit === "in") return n;
+  if (unit === "cm") return n / 2.54;
+  if (unit === "mm") return n / 25.4;
+  if (unit === "px") return n / 96;
+  return null;
+}
 async function createBrowserRenderer() {
   try {
     puppeteer = await import("puppeteer");
@@ -126835,18 +126868,51 @@ Original error: ${message}${tail}`);
         } else {
           await pdfPage.setContent(fullHtml, { waitUntil: "networkidle0" });
         }
+        const format = options.format || "A4";
+        const landscape = options.landscape || false;
+        const pdfScale = options.scale || 1;
+        const { widthIn, heightIn } = getPaperSizeInches(format);
+        const pageHeightIn = landscape ? widthIn : heightIn;
+        const marginTopIn = parseCssLengthToInches(options.margin?.top || "20mm") ?? parseCssLengthToInches("20mm");
+        const marginBottomIn = parseCssLengthToInches(options.margin?.bottom || "20mm") ?? parseCssLengthToInches("20mm");
+        const printableHeightCssPx = (pageHeightIn - marginTopIn - marginBottomIn) * 96 / pdfScale;
+        await pdfPage.evaluate((printableHeightPx) => {
+          const container = document.getElementById("markdown-content");
+          if (!container) return;
+          const cs = window.getComputedStyle(container);
+          const padTop = parseFloat(cs.paddingTop || "0") || 0;
+          const padBottom = parseFloat(cs.paddingBottom || "0") || 0;
+          const available = Math.max(0, printableHeightPx - padTop - padBottom);
+          const imgs = container.querySelectorAll(".md2x-diagram img.md2x-diagram, img.md2x-diagram");
+          imgs.forEach((img) => {
+            const el = img;
+            const rect = el.getBoundingClientRect();
+            const currentHeight = rect.height || el.naturalHeight || 0;
+            if (!currentHeight) return;
+            if (currentHeight <= available + 0.5) return;
+            el.style.maxHeight = `${available}px`;
+            el.style.height = "auto";
+            el.style.width = "auto";
+            el.style.maxWidth = "100%";
+            el.style.objectFit = "contain";
+          });
+        }, printableHeightCssPx);
         await pdfPage.evaluate(() => {
           const container = document.getElementById("markdown-content");
           if (!container) return;
+          const availableWidth = container.clientWidth;
+          if (!availableWidth) return;
           const wideDivs = container.querySelectorAll(':scope > div[style*="width"]');
           wideDivs.forEach((div) => {
             const el = div;
-            const widthMatch = el.style.width?.match(/^(\d+)px$/);
-            if (widthMatch) {
-              el.style.width = "100%";
-              el.style.maxWidth = "100%";
-              el.style.boxSizing = "border-box";
-            }
+            const widthMatch = el.style.width?.match(/^(\d+(?:\.\d+)?)px$/);
+            if (!widthMatch) return;
+            const fixedWidth = parseFloat(widthMatch[1]);
+            if (!Number.isFinite(fixedWidth) || fixedWidth <= 0) return;
+            const scale = Math.min(1, availableWidth / fixedWidth);
+            if (scale >= 0.999) return;
+            el.style.transformOrigin = "top left";
+            el.style.transform = `scale(${scale})`;
           });
         });
         const pdfBuffer = await pdfPage.pdf({
@@ -127520,6 +127586,7 @@ body {
 /* The actual scale value will be set dynamically via JavaScript */
 #markdown-content > div[style*="width"] {
   transform-origin: top left;
+  break-inside: avoid;
   page-break-inside: avoid;
 }
 
@@ -127581,7 +127648,10 @@ code {
 
 pre {
   padding: 16px;
-  overflow: auto;
+  /* PDFs can't scroll horizontally; wrap long lines instead of clipping. */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   font-size: 85%;
   line-height: 1.45;
   background-color: #f6f8fa;
@@ -127596,6 +127666,10 @@ pre code {
   font-size: 100%;
   background-color: transparent;
   border: 0;
+  /* Inherit wrapping behavior from <pre> for PDFs */
+  white-space: inherit;
+  overflow-wrap: inherit;
+  word-break: inherit;
 }
 
 /* Blockquotes */
@@ -127644,6 +127718,32 @@ img {
   box-sizing: content-box;
 }
 
+/* Diagrams (rendered images) */
+.md2x-diagram {
+  text-align: center;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+.md2x-diagram img,
+img.md2x-diagram {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+#markdown-content svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
 /* Block-level images: marked by rehypeBlockImages plugin */
 img.block-image {
   display: block;
@@ -127953,6 +128053,7 @@ var init_node_exporter = __esm({
         const remarkParse2 = (await Promise.resolve().then(() => (init_remark_parse(), remark_parse_exports))).default;
         const remarkGfm2 = (await Promise.resolve().then(() => (init_remark_gfm(), remark_gfm_exports))).default;
         const remarkMath2 = (await Promise.resolve().then(() => (init_remark_math(), remark_math_exports))).default;
+        const remarkSuperSub2 = (await Promise.resolve().then(() => (init_remark_super_sub(), remark_super_sub_exports))).default;
         const remarkRehype2 = (await Promise.resolve().then(() => (init_remark_rehype(), remark_rehype_exports))).default;
         const rehypeKatex2 = (await Promise.resolve().then(() => (init_rehype_katex(), rehype_katex_exports))).default;
         const rehypeHighlight2 = (await Promise.resolve().then(() => (init_rehype_highlight(), rehype_highlight_exports))).default;
@@ -127991,7 +128092,7 @@ var init_node_exporter = __esm({
             });
           };
         }
-        const processor = unified2().use(remarkParse2).use(remarkGfm2).use(remarkMath2).use(remarkRehype2, { allowDangerousHtml: true }).use(rehypeKatex2).use(rehypeHighlight2).use(rehypeBlockImages).use(rehypeStringify2, { allowDangerousHtml: true });
+        const processor = unified2().use(remarkParse2).use(remarkGfm2, { singleTilde: false }).use(remarkMath2).use(remarkSuperSub2).use(remarkRehype2, { allowDangerousHtml: true }).use(rehypeKatex2).use(rehypeHighlight2).use(rehypeBlockImages).use(rehypeStringify2, { allowDangerousHtml: true });
         const file = await processor.process(markdown2);
         let html7 = String(file);
         html7 = await this.processDiagrams(html7, browserRenderer, basePath, themeConfig);
@@ -128018,7 +128119,7 @@ var init_node_exporter = __esm({
           try {
             const result = await browserRenderer.render(renderType, decodedCode, basePath, themeConfig);
             if (result && result.base64) {
-              const imgTag = `<img src="data:image/${result.format};base64,${result.base64}" alt="${lang} diagram" style="max-width: 100%;" />`;
+              const imgTag = `<div class="md2x-diagram"><img class="md2x-diagram" src="data:image/${result.format};base64,${result.base64}" alt="${lang} diagram" style="max-width: 100%;" /></div>`;
               html7 = html7.replace(fullMatch, imgTag);
             }
           } catch (e) {

package/dist/md2x.mjs

@@ -82283,6 +82283,10 @@ var init_remark_gemoji = __esm({
 });
 
 // ../src/plugins/remark-super-sub.ts
+var remark_super_sub_exports = {};
+__export(remark_super_sub_exports, {
+  default: () => remark_super_sub_default
+});
 function parseScriptSyntax(text9) {
   const result = [];
   let remaining = text9;
@@ -126671,6 +126675,35 @@ function resolveRendererHtmlPath() {
   const moduleDir = path3.dirname(fileURLToPath2(import.meta.url));
   return path3.join(moduleDir, "renderer", "puppeteer-render.html");
 }
+function getPaperSizeInches(format) {
+  switch (format) {
+    case "Letter":
+      return { widthIn: 8.5, heightIn: 11 };
+    case "Legal":
+      return { widthIn: 8.5, heightIn: 14 };
+    case "A3":
+      return { widthIn: 11.69, heightIn: 16.54 };
+    case "A5":
+      return { widthIn: 5.83, heightIn: 8.27 };
+    case "A4":
+    default:
+      return { widthIn: 8.27, heightIn: 11.69 };
+  }
+}
+function parseCssLengthToInches(value) {
+  const v = String(value ?? "").trim();
+  if (!v) return null;
+  const m = v.match(/^(-?\d+(?:\.\d+)?)(px|in|mm|cm)$/i);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  if (!Number.isFinite(n)) return null;
+  const unit = m[2].toLowerCase();
+  if (unit === "in") return n;
+  if (unit === "cm") return n / 2.54;
+  if (unit === "mm") return n / 25.4;
+  if (unit === "px") return n / 96;
+  return null;
+}
 async function createBrowserRenderer() {
   try {
     puppeteer = await import("puppeteer");
@@ -126836,18 +126869,51 @@ Original error: ${message}${tail}`);
         } else {
           await pdfPage.setContent(fullHtml, { waitUntil: "networkidle0" });
         }
+        const format = options.format || "A4";
+        const landscape = options.landscape || false;
+        const pdfScale = options.scale || 1;
+        const { widthIn, heightIn } = getPaperSizeInches(format);
+        const pageHeightIn = landscape ? widthIn : heightIn;
+        const marginTopIn = parseCssLengthToInches(options.margin?.top || "20mm") ?? parseCssLengthToInches("20mm");
+        const marginBottomIn = parseCssLengthToInches(options.margin?.bottom || "20mm") ?? parseCssLengthToInches("20mm");
+        const printableHeightCssPx = (pageHeightIn - marginTopIn - marginBottomIn) * 96 / pdfScale;
+        await pdfPage.evaluate((printableHeightPx) => {
+          const container = document.getElementById("markdown-content");
+          if (!container) return;
+          const cs = window.getComputedStyle(container);
+          const padTop = parseFloat(cs.paddingTop || "0") || 0;
+          const padBottom = parseFloat(cs.paddingBottom || "0") || 0;
+          const available = Math.max(0, printableHeightPx - padTop - padBottom);
+          const imgs = container.querySelectorAll(".md2x-diagram img.md2x-diagram, img.md2x-diagram");
+          imgs.forEach((img) => {
+            const el = img;
+            const rect = el.getBoundingClientRect();
+            const currentHeight = rect.height || el.naturalHeight || 0;
+            if (!currentHeight) return;
+            if (currentHeight <= available + 0.5) return;
+            el.style.maxHeight = `${available}px`;
+            el.style.height = "auto";
+            el.style.width = "auto";
+            el.style.maxWidth = "100%";
+            el.style.objectFit = "contain";
+          });
+        }, printableHeightCssPx);
         await pdfPage.evaluate(() => {
           const container = document.getElementById("markdown-content");
           if (!container) return;
+          const availableWidth = container.clientWidth;
+          if (!availableWidth) return;
           const wideDivs = container.querySelectorAll(':scope > div[style*="width"]');
           wideDivs.forEach((div) => {
             const el = div;
-            const widthMatch = el.style.width?.match(/^(\d+)px$/);
-            if (widthMatch) {
-              el.style.width = "100%";
-              el.style.maxWidth = "100%";
-              el.style.boxSizing = "border-box";
-            }
+            const widthMatch = el.style.width?.match(/^(\d+(?:\.\d+)?)px$/);
+            if (!widthMatch) return;
+            const fixedWidth = parseFloat(widthMatch[1]);
+            if (!Number.isFinite(fixedWidth) || fixedWidth <= 0) return;
+            const scale = Math.min(1, availableWidth / fixedWidth);
+            if (scale >= 0.999) return;
+            el.style.transformOrigin = "top left";
+            el.style.transform = `scale(${scale})`;
           });
         });
         const pdfBuffer = await pdfPage.pdf({
@@ -127521,6 +127587,7 @@ body {
 /* The actual scale value will be set dynamically via JavaScript */
 #markdown-content > div[style*="width"] {
   transform-origin: top left;
+  break-inside: avoid;
   page-break-inside: avoid;
 }
 
@@ -127582,7 +127649,10 @@ code {
 
 pre {
   padding: 16px;
-  overflow: auto;
+  /* PDFs can't scroll horizontally; wrap long lines instead of clipping. */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   font-size: 85%;
   line-height: 1.45;
   background-color: #f6f8fa;
@@ -127597,6 +127667,10 @@ pre code {
   font-size: 100%;
   background-color: transparent;
   border: 0;
+  /* Inherit wrapping behavior from <pre> for PDFs */
+  white-space: inherit;
+  overflow-wrap: inherit;
+  word-break: inherit;
 }
 
 /* Blockquotes */
@@ -127645,6 +127719,32 @@ img {
   box-sizing: content-box;
 }
 
+/* Diagrams (rendered images) */
+.md2x-diagram {
+  text-align: center;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+.md2x-diagram img,
+img.md2x-diagram {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+#markdown-content svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
 /* Block-level images: marked by rehypeBlockImages plugin */
 img.block-image {
   display: block;
@@ -127954,6 +128054,7 @@ var init_node_exporter = __esm({
         const remarkParse2 = (await Promise.resolve().then(() => (init_remark_parse(), remark_parse_exports))).default;
         const remarkGfm2 = (await Promise.resolve().then(() => (init_remark_gfm(), remark_gfm_exports))).default;
         const remarkMath2 = (await Promise.resolve().then(() => (init_remark_math(), remark_math_exports))).default;
+        const remarkSuperSub2 = (await Promise.resolve().then(() => (init_remark_super_sub(), remark_super_sub_exports))).default;
         const remarkRehype2 = (await Promise.resolve().then(() => (init_remark_rehype(), remark_rehype_exports))).default;
         const rehypeKatex2 = (await Promise.resolve().then(() => (init_rehype_katex(), rehype_katex_exports))).default;
         const rehypeHighlight2 = (await Promise.resolve().then(() => (init_rehype_highlight(), rehype_highlight_exports))).default;
@@ -127992,7 +128093,7 @@ var init_node_exporter = __esm({
             });
           };
         }
-        const processor = unified2().use(remarkParse2).use(remarkGfm2).use(remarkMath2).use(remarkRehype2, { allowDangerousHtml: true }).use(rehypeKatex2).use(rehypeHighlight2).use(rehypeBlockImages).use(rehypeStringify2, { allowDangerousHtml: true });
+        const processor = unified2().use(remarkParse2).use(remarkGfm2, { singleTilde: false }).use(remarkMath2).use(remarkSuperSub2).use(remarkRehype2, { allowDangerousHtml: true }).use(rehypeKatex2).use(rehypeHighlight2).use(rehypeBlockImages).use(rehypeStringify2, { allowDangerousHtml: true });
         const file = await processor.process(markdown2);
         let html7 = String(file);
         html7 = await this.processDiagrams(html7, browserRenderer, basePath, themeConfig);
@@ -128019,7 +128120,7 @@ var init_node_exporter = __esm({
           try {
             const result = await browserRenderer.render(renderType, decodedCode, basePath, themeConfig);
             if (result && result.base64) {
-              const imgTag = `<img src="data:image/${result.format};base64,${result.base64}" alt="${lang} diagram" style="max-width: 100%;" />`;
+              const imgTag = `<div class="md2x-diagram"><img class="md2x-diagram" src="data:image/${result.format};base64,${result.base64}" alt="${lang} diagram" style="max-width: 100%;" /></div>`;
               html7 = html7.replace(fullMatch, imgTag);
             }
           } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2x",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Markdown → PDF/DOCX converter (local, no server). Supports Mermaid/Graphviz/Vega/HTML/SVG rendering, math, and code highlighting.",
   "type": "module",
   "private": false,
@@ -26,14 +26,21 @@
     "postinstall": "puppeteer browsers install chrome",
     "prepublishOnly": "node build.mjs"
   },
+  "keywords": [
+    "markdown",
+    "converter",
+    "docx",
+    "pdf"
+  ],
+  "author": "Arch Liu <larch.liu@gmail.com>",
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/xicilion/markdown-viewer-extension.git"
+    "url": "git+https://github.com/LarchLiu/md2x.git"
   },
-  "homepage": "https://github.com/xicilion/markdown-viewer-extension",
+  "homepage": "https://github.com/LarchLiu/md2x",
   "bugs": {
-    "url": "https://github.com/xicilion/markdown-viewer-extension/issues"
+    "url": "https://github.com/LarchLiu/md2x/issues"
   },
   "publishConfig": {
     "access": "public"