@kobekeye/mdf 1.0.0 → 1.1.2

package/.github/workflows/publish.yml

@@ -0,0 +1,29 @@
+name: Publish to npm
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    
+    permissions:
+      contents: read
+      id-token: write 
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish package
+        run: npm publish --provenance --access public

package/README.md

@@ -1,9 +1,12 @@
 # mdf
+<img width="370" height="527" alt="mdfintro1" src="https://github.com/user-attachments/assets/30436af4-2f05-4678-ad80-64daa47a5f7c" />
+<img width="372" height="527" alt="mdfintro2" src="https://github.com/user-attachments/assets/79bab5be-2ea6-430c-8075-42870caa41bc" />
 
-Convert Markdown to beautiful PDFs — free, open-source, and zero-config.
 
-## Features
 
+Convert Markdown to beautiful PDFs — free, open-source, and zero-config.
+Welcome to mdf! Please note that this project is currently in the MVP (Minimum Viable Product) stage. Any feedback, suggestions, or contributions are highly appreciated!
+## Features
 - **Syntax highlighting** — fenced code blocks with language detection (via highlight.js)
 - **Math formulas** — inline and block LaTeX via KaTeX (`$...$` and `$$...$$`)
 - **Table of contents** — insert `[TOC]` anywhere in your document
@@ -14,24 +17,47 @@ Convert Markdown to beautiful PDFs — free, open-source, and zero-config.
 - **CJK support** — uses Inter + Noto Sans TC via Google Fonts (requires internet on first run)
 
 ## Installation
-
+### Windows
+If one hasn't install nodejs, click [here](https://nodejs.org) to install. After installing nodejs, type
 ```bash
-npm install -g mdf
+npm install -g @kobekeye/mdf
 ```
-
-Or run without installing:
-
+### Linux / macOS
+It is highly recommended to use [nvm](https://github.com/nvm-sh/nvm) to manage permissions. Using sudo with global npm installs is not recommended.
+#### 1. Install nvm
 ```bash
-npx mdf input.md
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+```
+#### 2. Install nodejs
+```bash
+nvm install --lts
+```
+#### 3. Install mdf
+```bash
+npm install -g @kobekeye/mdf
 ```
-
 ## Usage
-
 ```bash
 mdf input.md              # outputs input.pdf
 mdf input.md output.pdf   # custom output name
 ```
-
+To watch the output pdf file, use 
+```bash
+mdf input.md -w             # outputs input.pdf and watches for changes
+mdf input.md output.pdf -w  # custom output name and watches for changes
+```
+Or, if you want to try without installation, 
+```bash
+npx @kobekeye/mdf input.md               # outputs input.pdf
+npx @kobekeye/mdf input.md output.pdf    # custom output name
+npx @kobekeye/mdf input.md -w            # outputs input.pdf and watches for changes
+npx @kobekeye/mdf input.md output.pdf -w # custom output name and watches for changes
+```
+## Update
+```bash
+npm update -g @kobekeye/mdf
+```
+If you only use `npx` to run mdf, you don't need to update.
 ## Syntax Guide
 
 ### Table of Contents
@@ -71,7 +97,7 @@ Operation completed.
 :::
 ```
 
-### Manual Page Break
+### Manual Page Break!
 
 ```markdown
 ==page==

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kobekeye/mdf",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "Convert Markdown to beautiful PDFs — free, open-source, and zero-config.",
-  "main": "index.js",
+  "main": "src/index.js",
   "bin": {
-    "mdf": "./index.js"
+    "mdf": "src/index.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/{index.js → src/cli.js}

@@ -4,26 +4,39 @@ const path = require('path');
 const puppeteer = require('puppeteer');
 const { renderToHtml } = require('./renderer');
 
+let tempFiles = [];
+
+// gracefully handle Ctrl+C: clean up temp files before exit
+// must be registered before puppeteer.launch(), which installs its own SIGINT wrapper
+process.on('SIGINT', () => {
+    for (const tempFile of tempFiles) {
+        try { fs.unlinkSync(tempFile); } catch (_) { }
+    }
+    process.exit(0);
+});
+
 // parse command line arguments
 const args = process.argv.slice(2);
 
 if (args.length === 0) {
     console.log(`
-usage: node index.js <input.md> [output.pdf]
+usage: mdf <input.md> [output.pdf]
 
   input.md    required, the Markdown file to convert
   output.pdf  optional, the output PDF file name
               (if omitted, it will automatically use the same name, e.g. input.pdf)
 
 examples:
-  node index.js README.md
-  node index.js doc.md custom-name.pdf
+  mdf README.md
+  mdf doc.md custom-name.pdf
     `);
     process.exit(0);
 }
 
-const inputFile = args[0];
-const outputFile = args[1] || inputFile.replace(/\.md$/i, '.pdf');
+const watchMode = args.includes('--watch') || args.includes('-w');
+const filteredArgs = args.filter(a => a !== '--watch' && a !== '-w');
+const inputFile = filteredArgs[0];
+const outputFile = filteredArgs[1] || inputFile.replace(/\.md$/i, '.pdf');
 
 // check if input file exists
 if (!fs.existsSync(inputFile)) {
@@ -31,7 +44,7 @@ if (!fs.existsSync(inputFile)) {
     process.exit(1);
 }
 
-async function convertToPdf() {
+async function convertToPdf(browser) {
     console.log(`converting: ${inputFile} → ${outputFile}`);
 
     const fullHtml = renderToHtml(inputFile);
@@ -41,10 +54,9 @@ async function convertToPdf() {
     const tempHtmlPath = path.join(inputDir, `.mdf-temp-${Date.now()}.html`);
     fs.writeFileSync(tempHtmlPath, fullHtml, 'utf-8');
 
+    tempFiles.push(tempHtmlPath);
     try {
-        const browser = await puppeteer.launch();
         const page = await browser.newPage();
-
         // use file:// URL to load, let relative path of images parse correctly
         await page.goto(`file://${tempHtmlPath}`, { waitUntil: 'networkidle0' });
         // wait for all fonts (including Google Fonts) to load completely, avoid CJK characters use synthetic bold
@@ -64,7 +76,7 @@ async function convertToPdf() {
             </div>`,
         });
 
-        await browser.close();
+        await page.close();
         console.log(`\x1b[32mDone! Output to: ${path.resolve(outputFile)}\x1b[0m`);
     } finally {
         // clean up temp HTML file
@@ -72,7 +84,38 @@ async function convertToPdf() {
     }
 }
 
-convertToPdf().catch((err) => {
-    console.error(`\x1b[31mError: ${err.message}\x1b[0m`);
-    process.exit(1);
-});
+async function main() {
+    const browser = await puppeteer.launch();
+
+    try {
+        await convertToPdf(browser);
+
+        if (watchMode) {
+            console.log(`\x1b[36mWatching for changes: ${inputFile}...\x1b[0m`);
+
+            let debounceTimer;
+            fs.watch(inputFile, (eventType) => {
+                if (eventType === 'change') {
+                    clearTimeout(debounceTimer);
+                    debounceTimer = setTimeout(async () => {
+                        console.log(`\x1b[33mFile changed, re-converting...\x1b[0m`);
+                        try {
+                            await convertToPdf(browser);
+                        } catch (err) {
+                            console.error(`\x1b[31mError: ${err.message}\x1b[0m`);
+                        }
+                    }, 300);
+                }
+            });
+
+        } else {
+            await browser.close();
+        }
+    } catch (err) {
+        await browser.close();
+        console.error(`\x1b[31mError: ${err.message}\x1b[0m`);
+        process.exit(1);
+    }
+}
+
+main();

package/{renderer.js → src/renderer.js}

@@ -7,67 +7,76 @@ const hljs = require('highlight.js');
 const anchor = require('markdown-it-anchor');
 const taskLists = require('markdown-it-task-lists');
 const container = require('markdown-it-container');
+// const md = new MarkdownIt({
+//     html: true,
+//     highlight: function (str, lang) {
+//         if (lang && hljs.getLanguage(lang)) {
+//             try {
+//                 return '<pre class="hljs"><code>' +
+//                     hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+//                     '</code></pre>';
+//             } catch (_) { }
+//         }
+//         return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+//     }
+// });
 const md = new MarkdownIt({
     html: true,
-    highlight: function (str, lang) {
+    highlight: (str, lang) => {
+        const wrap = (content) => `<pre class="hljs"><code>${content}</code></pre>`;
         if (lang && hljs.getLanguage(lang)) {
             try {
-                return '<pre class="hljs"><code>' +
-                    hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
-                    '</code></pre>';
+                return wrap(hljs.highlight(str, { language: lang, ignoreIllegals: true }).value);
             } catch (_) { }
         }
-        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+        return wrap(md.utils.escapeHtml(str));
     }
-});
-md.use(texmath, {
-    engine: katex,
-    delimiters: 'dollars',
-});
-md.use(anchor, {
-    permalink: false,
-    slugify: (s) => encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, '-')),
-});
-md.use(taskLists, { enabled: true });
-// --- Callout container blocks: :::info, :::warning, :::danger, :::success ---
+})
+    .use(texmath, {
+        engine: katex,
+        delimiters: 'dollars',
+        // maybe can add some katexoptions later on.
+    })
+    .use(anchor, {
+        permalink: false,
+        // e.g. hello world 你好 -> hello-world-%E4%BD%A0%E5%A5%BD(你好)
+        slugify: (s) => encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, '-')),
+    })
+    .use(taskLists, { enabled: true });
+// --- Container blocks: :::info, :::warning, :::danger, :::success, :::spoiler ---
 // Color aliases: :::blue = :::info, :::orange = :::warning, etc.
-const CALLOUT_TYPES = [
-    { names: ['info', 'blue'], cssClass: 'info' },
-    { names: ['warning', 'orange'], cssClass: 'warning' },
-    { names: ['danger', 'red'], cssClass: 'danger' },
-    { names: ['success', 'green'], cssClass: 'success' },
+const CONTAINERS = [
+    { names: ['info', 'blue'], type: 'callout', cssClass: 'info' },
+    { names: ['warning', 'orange'], type: 'callout', cssClass: 'warning' },
+    { names: ['danger', 'red'], type: 'callout', cssClass: 'danger' },
+    { names: ['success', 'green'], type: 'callout', cssClass: 'success' },
+    { names: ['spoiler'], type: 'spoiler' } // different type
 ];
-for (const { names, cssClass } of CALLOUT_TYPES) {
+
+for (const { names, type, cssClass } of CONTAINERS) {
     for (const name of names) {
         md.use(container, name, {
-            render(tokens, idx) {
+            render: function (tokens, idx) {
                 const token = tokens[idx];
                 if (token.nesting === 1) {
-                    // opening tag – extract optional title after :::type
                     const titleMatch = token.info.trim().match(new RegExp(`^${name}\\s+(.*)$`));
                     const title = titleMatch ? titleMatch[1].trim() : '';
-                    const titleHtml = title
-                        ? `<p class="callout-title">${md.utils.escapeHtml(title)}</p>\n`
-                        : '';
-                    return `<div class="callout callout-${cssClass}">\n${titleHtml}`;
+
+                    // decide the HTML structure based on type
+                    if (type === 'spoiler') {
+                        const summary = title || 'Spoiler';
+                        return `<details class="callout-spoiler">\n<summary>${md.utils.escapeHtml(summary)}</summary>\n`;
+                    } else { // 'callout'
+                        const titleHtml = title ? `<p class="callout-title">${md.utils.escapeHtml(title)}</p>\n` : '';
+                        return `<div class="callout callout-${cssClass}">\n${titleHtml}`;
+                    }
                 }
-                return '</div>\n';
+                // ending tag
+                return type === 'spoiler' ? '</details>\n' : '</div>\n';
             },
         });
     }
 }
-// --- Spoiler (collapsible) container: :::spoiler ---
-md.use(container, 'spoiler', {
-    render(tokens, idx) {
-        const token = tokens[idx];
-        if (token.nesting === 1) {
-            const titleMatch = token.info.trim().match(/^spoiler\s+(.*)$/);
-            const summary = titleMatch ? titleMatch[1].trim() : 'Spoiler';
-            return `<details class="callout-spoiler">\n<summary>${md.utils.escapeHtml(summary)}</summary>\n`;
-        }
-        return '</details>\n';
-    },
-});
 // Unique HTML comment used as TOC marker (survives markdown-it rendering)
 const TOC_MARKER = '<!--TOC_PLACEHOLDER-->';
 // Regex to match [TOC] on its own line in raw Markdown
@@ -140,9 +149,10 @@ function processTOC(html) {
     return html.replace(TOC_MARKER, toc);
 }
 // CSS file paths
-const themePath = path.join(__dirname, 'themes', 'default.css');
-const hljsCssPath = path.join(__dirname, 'node_modules', 'highlight.js', 'styles', 'github-dark.css');
-const texmathCssPath = path.join(__dirname, 'node_modules', 'markdown-it-texmath', 'css', 'texmath.css');
+const root = path.join(__dirname, '..');
+const themePath = path.join(root, 'themes', 'default.css');
+const hljsCssPath = path.join(root, 'node_modules', 'highlight.js', 'styles', 'github-dark.css');
+const texmathCssPath = path.join(root, 'node_modules', 'markdown-it-texmath', 'css', 'texmath.css');
 // KaTeX CSS is referenced as a local file:// URL so its bundled fonts resolve correctly
 const katexCssUrl = `file://${path.join(__dirname, 'node_modules', 'katex', 'dist', 'katex.min.css')}`;
 // CSS cache: read once, avoid I/O on every render

package/themes/default.css

@@ -80,7 +80,7 @@ strong {
 
 em {
     font-style: italic;
-    color: #333;
+    color: inherit;
 }
 
 /* code */