@liustack/mdpress 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leon Liu (liustack)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# mdpress
+
+A CLI toolkit for AI agents to convert Markdown into WeChat MP-ready HTML with inline styles, base64 images, and tag sanitization.
+
+中文说明请见：[README.zh-CN.md](README.zh-CN.md)
+
+## Features
+
+- WeChat MP editor compatible HTML output
+- All styles inlined (no external CSS or `<style>` tags)
+- Local images compressed via sharp and embedded as base64 (≤ 2MB)
+- Syntax highlighting with Xcode Light theme (inline colors)
+- Mermaid diagram rendering to PNG (via Playwright, optional)
+- External links converted to footnotes with References section
+- Tag sanitization (whitelist-based, `div` → `section`, dangerous tags removed)
+- GFM support (tables, strikethrough, task lists with ☑/☐)
+- Apple-inspired minimalist default style
+
+## Installation
+
+```bash
+npm install -g @liustack/mdpress
+```
+
+Or run with `npx`:
+
+```bash
+npx @liustack/mdpress [options]
+```
+
+Or install as an **Agent Skill** — tell any AI coding tool that supports agent skills (Claude Code, Codex, OpenCode, Cursor, Antigravity, etc.):
+
+```
+Install the skill from https://github.com/liustack/mdpress
+```
+
+Or use the `skills` CLI directly:
+
+```bash
+npx skills add https://github.com/liustack/mdpress --skill mdpress
+```
+
+## Usage
+
+```bash
+# Convert Markdown to WeChat-ready HTML
+mdpress -i article.md -o output.html
+```
+
+Output is JSON:
+
+```json
+{
+  "input": "/path/to/article.md",
+  "output": "/path/to/output.html",
+  "size": 12345
+}
+```
+
+## What It Does
+
+mdpress runs your Markdown through a unified (remark + rehype) pipeline that applies 6 transformations in order:
+
+1. **Sanitize tags** — whitelist-based tag filtering, `div` → `section`, checkbox → Unicode ☑/☐, remove `id` and event handlers
+2. **Mermaid diagrams** — mermaid code blocks rendered to PNG via Playwright with Apple-style theme (optional, requires `mermaid` + `playwright`)
+3. **Base64 images** — local images compressed with sharp (PNG/GIF/SVG/JPEG) and embedded as data URIs (≤ 2MB limit)
+4. **Code highlighting** — syntax highlighting via highlight.js with whitespace protection (`\n` → `<br>`, spaces → NBSP)
+5. **Footnote links** — external links replaced with text + `<sup>[N]</sup>`, References section appended; `mp.weixin.qq.com` links preserved
+6. **Inline styles** — Apple-inspired minimalist styles injected per tag, hljs classes converted to inline colors (Xcode Light theme), all `className` removed
+
+The result is a self-contained HTML file that can be directly pasted into the WeChat Official Account editor.
+
+## Options
+
+- `-i, --input <path>` — Input Markdown file path (required)
+- `-o, --output <path>` — Output HTML file path (required)
+
+## AI Agent Skill
+
+- [mdpress/SKILL.md](skills/mdpress/SKILL.md)
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,82 @@
+# mdpress
+
+面向 AI Agent 的 Markdown 转换 CLI，可将 Markdown 文件输出为微信公众号编辑器兼容的 HTML，包含内联样式、base64 图片和标签清洗。
+
+## 特性
+
+- 输出微信公众号编辑器兼容的 HTML
+- 所有样式内联（无外部 CSS 或 `<style>` 标签）
+- 本地图片经 sharp 压缩后嵌入为 base64（单张 ≤ 2MB）
+- Xcode Light 主题语法高亮（内联色值）
+- Mermaid 流程图渲染为 PNG（通过 Playwright，可选）
+- 外部链接自动转为脚注，文末附 References
+- 基于白名单的标签清洗（`div` → `section`，危险标签移除）
+- 支持 GFM（表格、删除线、任务列表 ☑/☐）
+- Apple 极简风格默认样式
+
+## 安装
+
+```bash
+npm install -g @liustack/mdpress
+```
+
+或使用 `npx`：
+
+```bash
+npx @liustack/mdpress [options]
+```
+
+也可以作为 **Agent Skill** 安装 — 在任何支持 Agent Skill 的 AI 编程工具（Claude Code、Codex、OpenCode、Cursor、Antigravity 等）中输入：
+
+```
+帮我安装这个 skill：https://github.com/liustack/mdpress
+```
+
+或使用 `skills` CLI 直接安装：
+
+```bash
+npx skills add https://github.com/liustack/mdpress --skill mdpress
+```
+
+## 用法
+
+```bash
+# 将 Markdown 转换为公众号可用的 HTML
+mdpress -i article.md -o output.html
+```
+
+输出为 JSON 格式：
+
+```json
+{
+  "input": "/path/to/article.md",
+  "output": "/path/to/output.html",
+  "size": 12345
+}
+```
+
+## 处理流程
+
+mdpress 使用 unified（remark + rehype）管线，依次执行 6 个转换：
+
+1. **标签清洗** — 基于白名单过滤标签，`div` → `section`，checkbox → Unicode ☑/☐，移除 `id` 和事件处理器
+2. **Mermaid 渲染** — mermaid 代码块通过 Playwright 渲染为 PNG（Apple 风格主题，可选，需安装 `mermaid` + `playwright`）
+3. **图片 base64** — 本地图片经 sharp 压缩（PNG/GIF/SVG/JPEG），嵌入为 data URI（≤ 2MB）
+4. **代码高亮** — 基于 highlight.js 的语法高亮，配合空白保护（`\n` → `<br>`，空格 → NBSP）
+5. **链接脚注** — 外部链接替换为文本 + `<sup>[N]</sup>`，文末追加 References 区域；保留 `mp.weixin.qq.com` 链接
+6. **样式内联** — Apple 极简风格按标签注入默认样式，hljs 类名转为内联色值（Xcode Light 主题），移除所有 `className`
+
+输出的 HTML 可直接粘贴到微信公众号编辑器中使用。
+
+## 参数
+
+- `-i, --input <path>` — 输入 Markdown 文件路径（必填）
+- `-o, --output <path>` — 输出 HTML 文件路径（必填）
+
+## AI Agent Skill
+
+- [mdpress/SKILL.md](skills/mdpress/SKILL.md)
+
+## License
+
+MIT

package/dist/main.js

@@ -0,0 +1,889 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import * as fs from "fs";
+import * as path from "path";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeRaw from "rehype-raw";
+import rehypeStringify from "rehype-stringify";
+import { visit, SKIP } from "unist-util-visit";
+import sharp from "sharp";
+import rehypeHighlight from "rehype-highlight";
+const ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  // Block
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "blockquote",
+  "pre",
+  "code",
+  "ul",
+  "ol",
+  "li",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "section",
+  "figure",
+  "figcaption",
+  "hr",
+  "br",
+  "img",
+  // Inline
+  "a",
+  "strong",
+  "em",
+  "b",
+  "i",
+  "del",
+  "s",
+  "span",
+  "sup",
+  "sub",
+  "mark",
+  // SVG
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "ellipse",
+  "g",
+  "defs",
+  "clipPath",
+  "use",
+  "text",
+  "tspan",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "mask",
+  "pattern",
+  "symbol",
+  "title",
+  "desc",
+  "foreignObject"
+]);
+const REMOVE_WITH_CHILDREN = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "link",
+  "iframe",
+  "frame",
+  "frameset",
+  "form",
+  "textarea",
+  "select",
+  "button",
+  "audio",
+  "video",
+  "source",
+  "track",
+  "object",
+  "embed",
+  "canvas",
+  "noscript",
+  "template"
+]);
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "li",
+  "td",
+  "th",
+  "figcaption",
+  "section"
+]);
+const INLINE_TAGS = /* @__PURE__ */ new Set([
+  "a",
+  "strong",
+  "em",
+  "b",
+  "i",
+  "del",
+  "s",
+  "span",
+  "sup",
+  "sub",
+  "mark",
+  "code",
+  "br",
+  "img"
+]);
+const ALLOWED_URL_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+const DISALLOWED_STYLE_PROPS = /* @__PURE__ */ new Set(["position", "font-family"]);
+const DISALLOWED_STYLE_VALUE_PATTERNS = [
+  /url\s*\(/i,
+  /expression\s*\(/i,
+  /javascript:/i,
+  /vbscript:/i,
+  /data:/i
+];
+function hasExplicitScheme(value) {
+  return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value);
+}
+function sanitizeUrl(value, attrName) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (trimmed.startsWith("#")) return trimmed;
+  if (trimmed.startsWith("./") || trimmed.startsWith("../")) return trimmed;
+  if (trimmed.startsWith("/")) return trimmed;
+  if (!hasExplicitScheme(trimmed)) {
+    return trimmed;
+  }
+  if ((attrName === "src" || attrName === "xLinkHref" || attrName === "xlinkHref") && trimmed.startsWith("data:")) {
+    return /^data:image\/[a-zA-Z0-9.+-]+;base64,/i.test(trimmed) ? trimmed : null;
+  }
+  try {
+    const parsed = new URL(trimmed);
+    if (!ALLOWED_URL_PROTOCOLS.has(parsed.protocol)) {
+      return null;
+    }
+    return trimmed;
+  } catch {
+    return null;
+  }
+}
+function sanitizeStyle(style) {
+  const kept = [];
+  for (const decl of style.split(";")) {
+    const trimmed = decl.trim();
+    if (!trimmed) continue;
+    const colonIdx = trimmed.indexOf(":");
+    if (colonIdx === -1) continue;
+    const prop = trimmed.slice(0, colonIdx).trim().toLowerCase();
+    const value = trimmed.slice(colonIdx + 1).trim();
+    if (!prop || !value) continue;
+    if (DISALLOWED_STYLE_PROPS.has(prop)) continue;
+    if (DISALLOWED_STYLE_VALUE_PATTERNS.some((pattern) => pattern.test(value))) continue;
+    kept.push(`${prop}: ${value}`);
+  }
+  if (kept.length === 0) return null;
+  return `${kept.join("; ")};`;
+}
+function isElement$2(node) {
+  return node && node.type === "element";
+}
+function isText$1(node) {
+  return node && node.type === "text";
+}
+const rehypeSanitizeTags = () => {
+  return (tree) => {
+    visit(tree, "element", (node, index, parent) => {
+      if (index === void 0 || !parent) return;
+      if (REMOVE_WITH_CHILDREN.has(node.tagName)) {
+        parent.children.splice(index, 1);
+        return [SKIP, index];
+      }
+      if (node.tagName === "input") {
+        const props = node.properties || {};
+        if (props.type === "checkbox") {
+          const checked = props.checked === true || props.checked === "";
+          const text = {
+            type: "text",
+            value: checked ? "☑ " : "☐ "
+          };
+          parent.children.splice(index, 1, text);
+          return [SKIP, index];
+        }
+        parent.children.splice(index, 1);
+        return [SKIP, index];
+      }
+      if (node.tagName === "div") {
+        node.tagName = "section";
+      }
+      if (!ALLOWED_TAGS.has(node.tagName)) {
+        const children = node.children || [];
+        parent.children.splice(index, 1, ...children);
+        return [SKIP, index];
+      }
+      if (node.properties) {
+        const props = node.properties;
+        delete props.id;
+        for (const key of Object.keys(props)) {
+          if (key.startsWith("on") && key.length > 2) {
+            delete props[key];
+          }
+        }
+        for (const attr of ["href", "src", "xLinkHref", "xlinkHref"]) {
+          if (typeof props[attr] !== "string") continue;
+          const sanitized = sanitizeUrl(props[attr], attr);
+          if (sanitized === null) {
+            delete props[attr];
+          } else {
+            props[attr] = sanitized;
+          }
+        }
+        if (typeof props.style === "string") {
+          const sanitizedStyle = sanitizeStyle(props.style);
+          if (sanitizedStyle === null) {
+            delete props.style;
+          } else {
+            props.style = sanitizedStyle;
+          }
+        }
+      }
+    });
+    visit(tree, "element", (node) => {
+      if (!BLOCK_TAGS.has(node.tagName)) return;
+      const newChildren = [];
+      let needsWrapping = false;
+      for (const child of node.children) {
+        if (isText$1(child) && child.value.trim() !== "") {
+          const hasInlineOnly = node.children.every(
+            (c) => isText$1(c) || isElement$2(c) && INLINE_TAGS.has(c.tagName)
+          );
+          if (hasInlineOnly) {
+            needsWrapping = true;
+            break;
+          }
+        }
+      }
+      if (!needsWrapping) return;
+      if (node.children.length === 1 && isElement$2(node.children[0]) && node.children[0].tagName === "span") {
+        return;
+      }
+      const hasBareText = node.children.some(
+        (c) => isText$1(c) && c.value.trim() !== ""
+      );
+      if (!hasBareText) return;
+      let group = [];
+      const flushGroup = () => {
+        if (group.length === 0) return;
+        const groupHasText = group.some((c) => isText$1(c));
+        if (groupHasText) {
+          newChildren.push({
+            type: "element",
+            tagName: "span",
+            properties: {},
+            children: group
+          });
+        } else {
+          newChildren.push(...group);
+        }
+        group = [];
+      };
+      for (const child of node.children) {
+        if (isText$1(child) || isElement$2(child) && INLINE_TAGS.has(child.tagName)) {
+          group.push(child);
+        } else {
+          flushGroup();
+          newChildren.push(child);
+        }
+      }
+      flushGroup();
+      node.children = newChildren;
+    });
+  };
+};
+const MAX_SIZE = 2 * 1024 * 1024;
+function classifySource(src) {
+  if (src.startsWith("data:")) return "data-uri";
+  if (src.startsWith("http://") || src.startsWith("https://")) return "remote";
+  return "local";
+}
+function detectFormat(ext) {
+  const map = {
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    webp: "image/webp",
+    avif: "image/avif",
+    tiff: "image/tiff",
+    tif: "image/tiff"
+  };
+  return map[ext] || "image/png";
+}
+async function compressToDataUri(buffer, mime, maxSize, sourcePath) {
+  if (mime === "image/svg+xml") {
+    return `data:${mime};base64,${buffer.toString("base64")}`;
+  }
+  if (mime === "image/gif") {
+    let result2 = buffer;
+    if (result2.length > maxSize) {
+      let width2 = 1080;
+      while (width2 >= 100) {
+        result2 = await sharp(buffer, { animated: true }).resize({ width: width2, withoutEnlargement: true }).gif().toBuffer();
+        if (result2.length <= maxSize) break;
+        width2 = Math.floor(width2 * 0.7);
+      }
+    }
+    if (result2.length > maxSize) {
+      throw new Error(
+        `Image exceeds 2MB after compression: ${sourcePath} (${(result2.length / 1024 / 1024).toFixed(1)}MB)`
+      );
+    }
+    return `data:image/gif;base64,${result2.toString("base64")}`;
+  }
+  const metadata = await sharp(buffer).metadata();
+  const width = metadata.width || 1920;
+  let result;
+  result = await sharp(buffer).png({ compressionLevel: 6 }).toBuffer();
+  if (result.length <= maxSize) {
+    return `data:image/png;base64,${result.toString("base64")}`;
+  }
+  let currentWidth = width;
+  while (currentWidth >= 100) {
+    currentWidth = Math.floor(currentWidth * 0.8);
+    result = await sharp(buffer).resize({ width: currentWidth, withoutEnlargement: true }).png({ compressionLevel: 6 }).toBuffer();
+    if (result.length <= maxSize) {
+      return `data:image/png;base64,${result.toString("base64")}`;
+    }
+  }
+  for (let jpegWidth = width; jpegWidth >= 100; jpegWidth = Math.floor(jpegWidth * 0.8)) {
+    for (const quality of [85, 70, 50]) {
+      result = await sharp(buffer).flatten({ background: { r: 255, g: 255, b: 255 } }).resize({ width: jpegWidth, withoutEnlargement: true }).jpeg({ quality }).toBuffer();
+      if (result.length <= maxSize) {
+        return `data:image/jpeg;base64,${result.toString("base64")}`;
+      }
+    }
+  }
+  throw new Error(
+    `Image exceeds 2MB after all compression attempts: ${sourcePath} (${(result.length / 1024 / 1024).toFixed(1)}MB)`
+  );
+}
+const rehypeBase64Images = (options) => {
+  const { baseDir } = options;
+  return async (tree) => {
+    const tasks = [];
+    visit(tree, "element", (node) => {
+      if (node.tagName !== "img") return;
+      const src = node.properties?.src;
+      if (typeof src !== "string") return;
+      const sourceType = classifySource(src);
+      if (sourceType !== "local") return;
+      const imgPath = path.resolve(baseDir, src);
+      if (!fs.existsSync(imgPath)) {
+        throw new Error(`Image file not found: ${imgPath}`);
+      }
+      const ext = path.extname(imgPath).slice(1).toLowerCase();
+      const mime = detectFormat(ext);
+      tasks.push({ node, imgPath, mime });
+    });
+    await Promise.all(
+      tasks.map(async ({ node, imgPath, mime }) => {
+        const buffer = fs.readFileSync(imgPath);
+        const dataUri = await compressToDataUri(Buffer.from(buffer), mime, MAX_SIZE, imgPath);
+        node.properties.src = dataUri;
+      })
+    );
+  };
+};
+function isElement$1(node) {
+  return node && node.type === "element";
+}
+function isText(node) {
+  return node && node.type === "text";
+}
+function protectWhitespace(children) {
+  const result = [];
+  for (const child of children) {
+    if (isText(child)) {
+      const parts = child.value.split("\n");
+      for (let i = 0; i < parts.length; i++) {
+        if (i > 0) {
+          result.push({ type: "element", tagName: "br", properties: {}, children: [] });
+        }
+        let text = parts[i];
+        text = text.replace(/\t/g, "  ");
+        text = text.replace(/^( +)/, (match) => " ".repeat(match.length));
+        if (text) {
+          result.push({ type: "text", value: text });
+        }
+      }
+    } else if (isElement$1(child) && child.tagName === "span") {
+      result.push({
+        ...child,
+        children: protectWhitespace(child.children)
+      });
+    } else {
+      result.push(child);
+    }
+  }
+  return result;
+}
+const rehypeCodeHighlight = () => {
+  const highlightPlugin = rehypeHighlight({ detect: false });
+  return (tree) => {
+    highlightPlugin(tree);
+    visit(tree, "element", (node) => {
+      if (node.tagName !== "pre") return;
+      const codeChild = node.children.find(
+        (c) => isElement$1(c) && c.tagName === "code"
+      );
+      if (!codeChild) return;
+      codeChild.children = protectWhitespace(codeChild.children);
+    });
+  };
+};
+function isInternalLink(href) {
+  if (href.startsWith("//")) {
+    return false;
+  }
+  if (href.startsWith("#") || href.startsWith("/") || href.startsWith("./") || href.startsWith("../")) {
+    return true;
+  }
+  try {
+    const url = new URL(href);
+    if (url.hostname === "mp.weixin.qq.com" || url.hostname.endsWith(".mp.weixin.qq.com")) {
+      return true;
+    }
+  } catch {
+    return true;
+  }
+  return false;
+}
+const rehypeFootnoteLinks = () => {
+  return (tree) => {
+    const urlMap = /* @__PURE__ */ new Map();
+    const footnotes = [];
+    let counter = 0;
+    visit(tree, "element", (node, index, parent) => {
+      if (node.tagName !== "a" || index === void 0 || !parent) return;
+      const href = node.properties?.href;
+      if (typeof href !== "string") return;
+      if (isInternalLink(href)) return;
+      let num = urlMap.get(href);
+      if (num === void 0) {
+        counter++;
+        num = counter;
+        urlMap.set(href, num);
+        const text = extractText(node);
+        footnotes.push({ index: num, url: href, text });
+      }
+      const replacement = [
+        ...node.children,
+        {
+          type: "element",
+          tagName: "sup",
+          properties: {},
+          children: [{ type: "text", value: `[${num}]` }]
+        }
+      ];
+      parent.children.splice(index, 1, ...replacement);
+      return [SKIP, index + replacement.length];
+    });
+    if (footnotes.length > 0) {
+      const referencesSection = {
+        type: "element",
+        tagName: "section",
+        properties: {},
+        children: [
+          { type: "element", tagName: "hr", properties: {}, children: [] },
+          {
+            type: "element",
+            tagName: "p",
+            properties: {},
+            children: [
+              {
+                type: "element",
+                tagName: "strong",
+                properties: {},
+                children: [{ type: "text", value: "References" }]
+              }
+            ]
+          },
+          ...footnotes.map(
+            (fn) => ({
+              type: "element",
+              tagName: "p",
+              properties: {},
+              children: [
+                { type: "text", value: `[${fn.index}] ${fn.text}: ${fn.url}` }
+              ]
+            })
+          )
+        ]
+      };
+      tree.children.push(referencesSection);
+    }
+  };
+};
+function extractText(node) {
+  let text = "";
+  for (const child of node.children) {
+    if (child.type === "text") {
+      text += child.value;
+    } else if (child.type === "element") {
+      text += extractText(child);
+    }
+  }
+  return text;
+}
+const defaultStyles = {
+  // Headings — Apple style: 600 weight, tight letter-spacing
+  h1: "font-size: 24px; font-weight: 600; margin: 0 0 16px; line-height: 1.2; letter-spacing: -0.02em; color: #1d1d1f;",
+  h2: "font-size: 20px; font-weight: 600; margin: 32px 0 12px; line-height: 1.25; color: #1d1d1f;",
+  h3: "font-size: 17px; font-weight: 600; margin: 24px 0 8px; line-height: 1.3; color: #1d1d1f;",
+  h4: "font-size: 15px; font-weight: 600; margin: 20px 0 6px; line-height: 1.4; color: #6e6e73;",
+  h5: "font-size: 14px; font-weight: 600; margin: 16px 0 4px; line-height: 1.4; color: #6e6e73;",
+  h6: "font-size: 13px; font-weight: 600; margin: 16px 0 4px; line-height: 1.4; color: #86868b;",
+  // Paragraphs — 15px body, 1.75 line-height (comfortable for Chinese)
+  p: "font-size: 15px; line-height: 1.75; margin: 0 0 1.25em; color: #1d1d1f;",
+  // Blockquote — restrained: left border + italic only, no background
+  blockquote: "margin: 1.5em 0; padding: 0 0 0 1em; border-left: 3px solid #d2d2d7; color: #6e6e73; font-style: italic;",
+  // Inline code — subtle gray background
+  code: 'font-size: 0.875em; font-family: "SF Mono", Menlo, Consolas, monospace; background: #f5f5f7; color: #1d1d1f; padding: 0.15em 0.4em; border-radius: 4px;',
+  // Code block — GitHub-style light gray bg, no border
+  "pre code": 'display: block; font-size: 13px; font-family: "SF Mono", Menlo, Consolas, monospace; background: #f6f8fa; color: #1d1d1f; padding: 20px 24px; border-radius: 8px; overflow-x: auto; line-height: 1.6;',
+  pre: "margin: 1.5em 0;",
+  // Lists
+  ul: "margin: 1em 0; padding-left: 1.5em; font-size: 15px; line-height: 1.75; color: #1d1d1f;",
+  ol: "margin: 1em 0; padding-left: 1.5em; font-size: 15px; line-height: 1.75; color: #1d1d1f;",
+  li: "margin: 0.4em 0;",
+  // Table — clean: bottom borders only, no vertical lines
+  table: "width: 100%; margin: 1.5em 0; font-size: 14px; border-collapse: collapse;",
+  th: "padding: 12px 16px; text-align: left; font-weight: 600; color: #1d1d1f; font-size: 14px; border-bottom: 1px solid #d2d2d7;",
+  td: "padding: 12px 16px; border-bottom: 1px solid #e5e5ea; color: #1d1d1f;",
+  // Links — WeChat blue
+  a: "color: #576b95; text-decoration: none;",
+  // Images
+  img: "max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 8px;",
+  // Horizontal rule
+  hr: "border: none; height: 1px; background: #d2d2d7; margin: 2em 0;",
+  // Inline formatting
+  strong: "font-weight: 600; color: #1d1d1f;",
+  em: "font-style: italic;",
+  del: "text-decoration: line-through; color: #86868b;",
+  s: "text-decoration: line-through; color: #86868b;",
+  // Superscript / subscript
+  sup: "font-size: 0.75em; vertical-align: super; color: #576b95;",
+  sub: "font-size: 0.75em; vertical-align: sub;",
+  // Section / figure
+  section: "margin: 0.5em 0;",
+  figcaption: "font-size: 13px; color: #86868b; text-align: center; margin-top: 8px;",
+  figure: "margin: 1.5em 0; text-align: center;",
+  // Mark
+  mark: "background: #fff3b0; padding: 0.1em 0.3em; border-radius: 2px;",
+  // hljs — Xcode Light theme (matching light code block background)
+  "hljs-keyword": "color: #9b2393; font-weight: 600;",
+  "hljs-string": "color: #c41a16;",
+  "hljs-number": "color: #1c00cf;",
+  "hljs-comment": "color: #6e6e73; font-style: italic;",
+  "hljs-function": "color: #326d74;",
+  "hljs-title": "color: #326d74;",
+  "hljs-built_in": "color: #5c2699;",
+  "hljs-literal": "color: #1c00cf;",
+  "hljs-type": "color: #5c2699;",
+  "hljs-params": "color: #1d1d1f;",
+  "hljs-meta": "color: #643820;",
+  "hljs-attr": "color: #643820;",
+  "hljs-variable": "color: #326d74;",
+  "hljs-selector-tag": "color: #9b2393;",
+  "hljs-selector-class": "color: #643820;",
+  "hljs-regexp": "color: #c41a16;",
+  "hljs-symbol": "color: #326d74;",
+  "hljs-tag": "color: #9b2393;",
+  "hljs-name": "color: #9b2393;",
+  "hljs-attribute": "color: #643820;",
+  "hljs-addition": "color: #28a745; background: rgba(40, 167, 69, 0.1);",
+  "hljs-deletion": "color: #d73a49; background: rgba(215, 58, 73, 0.1);"
+};
+function isElement(node) {
+  return node && node.type === "element";
+}
+function mergeStyles(base, override) {
+  if (!base) return override;
+  if (!override) return base;
+  const props = /* @__PURE__ */ new Map();
+  for (const decl of base.split(";")) {
+    const trimmed = decl.trim();
+    if (!trimmed) continue;
+    const colonIdx = trimmed.indexOf(":");
+    if (colonIdx === -1) continue;
+    const prop = trimmed.slice(0, colonIdx).trim();
+    const val = trimmed.slice(colonIdx + 1).trim();
+    props.set(prop, val);
+  }
+  for (const decl of override.split(";")) {
+    const trimmed = decl.trim();
+    if (!trimmed) continue;
+    const colonIdx = trimmed.indexOf(":");
+    if (colonIdx === -1) continue;
+    const prop = trimmed.slice(0, colonIdx).trim();
+    const val = trimmed.slice(colonIdx + 1).trim();
+    props.set(prop, val);
+  }
+  return Array.from(props.entries()).map(([prop, val]) => `${prop}: ${val}`).join("; ") + ";";
+}
+const rehypeInlineStyles = (options) => {
+  const styles = options?.styles ?? defaultStyles;
+  return (tree) => {
+    visit(tree, "element", (node, _index, parent) => {
+      const props = node.properties || {};
+      node.properties = props;
+      let styleKey = node.tagName;
+      if (node.tagName === "code" && parent && isElement(parent) && parent.tagName === "pre") {
+        styleKey = "pre code";
+      }
+      let hljsStyle = "";
+      const classNames = props.className;
+      if (Array.isArray(classNames)) {
+        for (const cls of classNames) {
+          if (typeof cls === "string" && cls.startsWith("hljs-")) {
+            const hljsCss = styles[cls];
+            if (hljsCss) {
+              hljsStyle = hljsStyle ? mergeStyles(hljsStyle, hljsCss) : hljsCss;
+            }
+          }
+        }
+      }
+      const defaultStyle = styles[styleKey] || "";
+      const existingStyle = typeof props.style === "string" ? props.style : "";
+      let finalStyle = defaultStyle;
+      if (hljsStyle) {
+        finalStyle = mergeStyles(finalStyle, hljsStyle);
+      }
+      if (existingStyle) {
+        finalStyle = mergeStyles(finalStyle, existingStyle);
+      }
+      if (finalStyle) {
+        props.style = finalStyle;
+      }
+      delete props.className;
+    });
+  };
+};
+const MERMAID_THEME = {
+  primaryColor: "#f6f8fa",
+  primaryTextColor: "#1d1d1f",
+  primaryBorderColor: "#e5e5ea",
+  lineColor: "#86868b",
+  secondaryColor: "#f6f8fa",
+  tertiaryColor: "#ffffff",
+  background: "#ffffff",
+  mainBkg: "#f6f8fa",
+  nodeBorder: "#e5e5ea",
+  nodeTextColor: "#1d1d1f",
+  clusterBkg: "#f6f8fa",
+  clusterBorder: "#e5e5ea",
+  titleColor: "#1d1d1f",
+  edgeLabelBackground: "#f6f8fa",
+  noteBorderColor: "#e5e5ea",
+  noteBkgColor: "#f6f8fa"
+};
+const FLOWCHART_CONFIG = {
+  curve: "basis",
+  nodeSpacing: 40,
+  rankSpacing: 50,
+  htmlLabels: true,
+  useMaxWidth: true,
+  subGraphTitleMargin: { top: 15, bottom: 15 },
+  padding: 20
+};
+function collectMermaidBlocks(tree) {
+  const tasks = [];
+  visit(tree, "element", (node, index, parent) => {
+    if (node.tagName !== "pre" || !parent || index === void 0) return;
+    const codeChild = node.children.find(
+      (c) => c.type === "element" && c.tagName === "code"
+    );
+    if (!codeChild) return;
+    const classes = Array.isArray(codeChild.properties?.className) ? codeChild.properties.className : [];
+    if (!classes.includes("language-mermaid")) return;
+    const text = codeChild.children.filter((c) => c.type === "text").map((c) => c.value).join("");
+    if (text.trim()) {
+      tasks.push({ node, parent, index, definition: text.trim() });
+    }
+  });
+  return tasks;
+}
+const rehypeMermaid = (options = {}) => {
+  const { scale = 2, backgroundColor = "white" } = options;
+  return async (tree) => {
+    const tasks = collectMermaidBlocks(tree);
+    if (tasks.length === 0) return;
+    let chromium;
+    let mermaidPath;
+    try {
+      const pw = await import("playwright");
+      chromium = pw.chromium;
+      const { createRequire } = await import("module");
+      const req = createRequire(import.meta.url);
+      mermaidPath = req.resolve("mermaid/dist/mermaid.min.js");
+    } catch {
+      throw new Error(
+        "Mermaid diagrams detected but required dependencies are missing.\nRun: npm install mermaid playwright && npx playwright install chromium"
+      );
+    }
+    const browser = await chromium.launch();
+    try {
+      const context = await browser.newContext({
+        deviceScaleFactor: scale,
+        viewport: { width: 800, height: 600 }
+      });
+      const page = await context.newPage();
+      await page.setContent("<html><body></body></html>");
+      await page.addScriptTag({ path: mermaidPath });
+      await page.evaluate(
+        ({
+          theme,
+          flowchart
+        }) => {
+          window.mermaid.initialize({
+            startOnLoad: false,
+            theme: "base",
+            themeVariables: {
+              ...theme,
+              fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif',
+              fontSize: "14px"
+            },
+            flowchart
+          });
+        },
+        { theme: MERMAID_THEME, flowchart: FLOWCHART_CONFIG }
+      );
+      for (const task of tasks) {
+        await page.evaluate((def) => {
+          const container = document.createElement("div");
+          container.className = "mermaid";
+          container.textContent = def;
+          container.id = "mermaid-target";
+          document.body.innerHTML = "";
+          document.body.appendChild(container);
+        }, task.definition);
+        await page.evaluate(() => window.mermaid.run());
+        await page.waitForSelector("#mermaid-target svg", { timeout: 1e4 });
+        await page.waitForTimeout(300);
+        await page.evaluate(() => {
+          document.querySelectorAll(".node rect").forEach((el) => {
+            el.setAttribute("rx", "12");
+            el.setAttribute("ry", "12");
+          });
+          document.querySelectorAll(".cluster rect").forEach((el) => {
+            el.setAttribute("rx", "12");
+            el.setAttribute("ry", "12");
+          });
+          document.querySelectorAll(".edgeLabel rect").forEach((el) => {
+            el.setAttribute("rx", "6");
+            el.setAttribute("ry", "6");
+          });
+          document.querySelectorAll(".labelBkg").forEach((el) => {
+            const div = el;
+            div.style.padding = "2px 8px";
+            div.style.borderRadius = "6px";
+            div.style.backgroundColor = "#f6f8fa";
+          });
+          document.querySelectorAll(".edgeLabel foreignObject").forEach((fo) => {
+            const w = parseFloat(fo.getAttribute("width") || "0");
+            const h = parseFloat(fo.getAttribute("height") || "0");
+            if (w === 0 || h === 0) return;
+            const px = 20, py = 8;
+            fo.setAttribute("width", String(w + px));
+            fo.setAttribute("height", String(h + py));
+            const label = fo.closest(".edgeLabel");
+            if (label) {
+              const g = label.querySelector("g.label");
+              if (g) {
+                const transform = g.getAttribute("transform");
+                if (transform) {
+                  const match = transform.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
+                  if (match) {
+                    const x = parseFloat(match[1]) - px / 2;
+                    const y = parseFloat(match[2]) - py / 2;
+                    g.setAttribute("transform", `translate(${x}, ${y})`);
+                  }
+                }
+              }
+            }
+          });
+          document.querySelectorAll(".cluster-label").forEach((label) => {
+            const transform = label.getAttribute("transform");
+            if (transform) {
+              const match = transform.match(
+                /translate\(([\d.]+),\s*([\d.]+)\)/
+              );
+              if (match) {
+                const x = parseFloat(match[1]);
+                const y = parseFloat(match[2]) + 8;
+                label.setAttribute(
+                  "transform",
+                  `translate(${x}, ${y})`
+                );
+              }
+            }
+          });
+        });
+        const svgLocator = page.locator("#mermaid-target svg");
+        const cssBox = await svgLocator.boundingBox();
+        const cssWidth = cssBox ? Math.ceil(cssBox.width) : void 0;
+        const pngBuffer = await svgLocator.screenshot({
+          type: "png",
+          scale: "device",
+          omitBackground: backgroundColor === "transparent"
+        });
+        const base64 = Buffer.from(pngBuffer).toString("base64");
+        const parentChildren = task.parent.children || task.parent.children;
+        parentChildren[task.index] = {
+          type: "element",
+          tagName: "img",
+          properties: {
+            src: `data:image/png;base64,${base64}`,
+            alt: "mermaid diagram",
+            ...cssWidth ? { width: String(cssWidth) } : {},
+            style: "max-width: 100%; height: auto; display: block; margin: 1.5em auto;"
+          },
+          children: []
+        };
+      }
+    } finally {
+      await browser.close();
+    }
+  };
+};
+async function render(options) {
+  const { input, output } = options;
+  const inputPath = path.resolve(input);
+  if (!fs.existsSync(inputPath)) {
+    throw new Error(`Input file not found: ${inputPath}`);
+  }
+  const ext = path.extname(inputPath).toLowerCase();
+  if (ext !== ".md" && ext !== ".markdown") {
+    throw new Error(`Unsupported input format: ${ext}. Only .md and .markdown files are supported.`);
+  }
+  const markdown = fs.readFileSync(inputPath, "utf-8");
+  const inputDir = path.dirname(inputPath);
+  const file = await unified().use(remarkParse).use(remarkGfm).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw).use(rehypeSanitizeTags).use(rehypeMermaid).use(rehypeBase64Images, { baseDir: inputDir }).use(rehypeCodeHighlight).use(rehypeFootnoteLinks).use(rehypeInlineStyles).use(rehypeStringify, { allowDangerousHtml: true }).process(markdown);
+  const html = String(file);
+  const outputPath = path.resolve(output);
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, html, "utf-8");
+  return {
+    input: inputPath,
+    output: outputPath,
+    size: Buffer.byteLength(html, "utf-8")
+  };
+}
+const program = new Command();
+program.name("mdpress").description("Convert Markdown into WeChat MP-ready HTML").version("0.1.0").requiredOption("-i, --input <path>", "Input Markdown file path").requiredOption("-o, --output <path>", "Output HTML file path").action(async (options) => {
+  try {
+    const result = await render({
+      input: options.input,
+      output: options.output
+    });
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    console.error("Error:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+program.parse();

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@liustack/mdpress",
+  "version": "0.1.0",
+  "description": "CLI for AI agents to convert Markdown into WeChat MP-ready HTML with inline styles, base64 images, and tag sanitization",
+  "type": "module",
+  "bin": {
+    "mdpress": "./dist/main.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "markdown",
+    "wechat",
+    "wechat-mp",
+    "inline-styles",
+    "base64-images",
+    "cli",
+    "ai-agent"
+  ],
+  "author": "Leon Liu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liustack/mdpress.git"
+  },
+  "bugs": {
+    "url": "https://github.com/liustack/mdpress/issues"
+  },
+  "homepage": "https://github.com/liustack/mdpress#readme",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@types/hast": "^3.0.4",
+    "commander": "^13.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "sharp": "^0.34.5",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
+  },
+  "optionalDependencies": {
+    "mermaid": "^11.4.1",
+    "playwright": "^1.52.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.7",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "docs:list": "node scripts/docs-list.js"
+  }
+}