@peteryuan/wxformat 0.1.0 → 0.2.0

package/lib/render.js

@@ -30,7 +30,10 @@ export const THEMES = {
     hr: { border: "none", height: "4px", background: "radial-gradient(circle,#333333 1.2px,transparent 1.8px) repeat-x", backgroundSize: "8px 4px", margin: "28px 0" },
     tag: { bg: "#f2f2f2", color: "#555555" },
     a: { color: "#111111", textDecoration: "underline" },
-    img: { maxWidth: "100%", borderRadius: "6px", margin: "10px 0" }
+    img: { maxWidth: "100%", borderRadius: "6px", margin: "10px 0" },
+    table: { borderCollapse: "collapse", width: "100%", margin: "18px 0", fontSize: "14.5px" },
+    th: { border: "1px solid #d5d5d5", padding: "8px 10px", background: "#f2f2f2", color: "#111111", fontWeight: "700", textAlign: "left", lineHeight: "1.6" },
+    td: { border: "1px solid #d5d5d5", padding: "8px 10px", color: "#2b2b2b", lineHeight: "1.7", verticalAlign: "top" }
   },
   paper: {
     id: "paper",
@@ -51,7 +54,10 @@ export const THEMES = {
     hr: { border: "none", height: "4px", background: "radial-gradient(circle,#333333 1.2px,transparent 1.8px) repeat-x", backgroundSize: "8px 4px", margin: "28px 0" },
     tag: { bg: "#efe8d9", color: "#8a6d3b" },
     a: { color: "#8a6d3b", textDecoration: "underline" },
-    img: { maxWidth: "100%", borderRadius: "6px", margin: "10px 0" }
+    img: { maxWidth: "100%", borderRadius: "6px", margin: "10px 0" },
+    table: { borderCollapse: "collapse", width: "100%", margin: "18px 0", fontSize: "15px" },
+    th: { border: "1px solid #d8cdb4", padding: "8px 10px", background: "#efe8d9", color: "#6b5736", fontWeight: "700", textAlign: "left", lineHeight: "1.6" },
+    td: { border: "1px solid #d8cdb4", padding: "8px 10px", color: "#4a4238", lineHeight: "1.75", verticalAlign: "top" }
   },
   celadon: {
     id: "celadon",
@@ -72,7 +78,10 @@ export const THEMES = {
     hr: { border: "none", height: "4px", background: "radial-gradient(circle,#333333 1.2px,transparent 1.8px) repeat-x", backgroundSize: "8px 4px", margin: "28px 0" },
     tag: { bg: "#e3efec", color: "#2e6e63" },
     a: { color: "#2e6e63", textDecoration: "underline" },
-    img: { maxWidth: "100%", borderRadius: "6px", margin: "10px 0" }
+    img: { maxWidth: "100%", borderRadius: "6px", margin: "10px 0" },
+    table: { borderCollapse: "collapse", width: "100%", margin: "18px 0", fontSize: "15px" },
+    th: { border: "1px solid #9cc4bd", padding: "8px 10px", background: "#e3efec", color: "#1f3d3a", fontWeight: "700", textAlign: "left", lineHeight: "1.6" },
+    td: { border: "1px solid #9cc4bd", padding: "8px 10px", color: "#33433f", lineHeight: "1.75", verticalAlign: "top" }
   }
 };
 
@@ -120,6 +129,9 @@ function parseBlocks(bodyMd) {
     } else if (/^【插图[：:】]/.test(t)) {
       // 文内插图占位（草稿正文中的 `【插图：画面描述｜提示词】` 行）→ 渲染为可见占位块
       out.push({ type: "imgph", text: t });
+    } else if (isTableBlock(t)) {
+      // GFM 表格（首行 `| ... |` + 次行 `|---|` 分隔行）
+      out.push(parseTable(t));
     } else {
       out.push({ type: "p", text: t.replace(/\n/g, "<br />") });
     }
@@ -138,6 +150,47 @@ function parseBlocks(bodyMd) {
  *   section  — 内联样式正文（复制给公众号后台用）
  *   document — 完整 HTML 文档（浏览器预览用）
  */
+/* ── GFM 表格 ──────────────────────────────────────────────────────── */
+
+/** 判断一个文本块是否为 Markdown 表格（首行 `| ... |` + 次行 `|---|` 分隔行）。 */
+function isTableBlock(t) {
+  const lines = t.split("\n").map((l) => l.trim()).filter(Boolean);
+  if (lines.length < 2) return false;
+  if (!/^\|/.test(lines[0])) return false;
+  return /^\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/.test(lines[1]);
+}
+
+/** 把表格行按 `|` 拆成单元格（去掉首尾管道），返回去空白后的字符串数组。 */
+function splitRow(line) {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|")) s = s.slice(0, -1);
+  return s.split("|").map((c) => c.trim());
+}
+
+/** 解析 GFM 表格 → { type, header, aligns, rows }（aligns 记录 `:---:` 对齐）。 */
+function parseTable(t) {
+  const lines = t.split("\n").map((l) => l.trim()).filter(Boolean);
+  const header = splitRow(lines[0]);
+  const aligns = splitRow(lines[1]).map((c) => {
+    const l = c.startsWith(":");
+    const r = c.endsWith(":");
+    return l && r ? "center" : r ? "right" : l ? "left" : "";
+  });
+  const rows = lines.slice(2).map(splitRow);
+  return { type: "table", header, aligns, rows };
+}
+
+/** 渲染表格为公众号友好的内联样式 <table>（首行为表头 th，其余为 td）。 */
+function renderTable(b, t) {
+  const cellStyle = (base, i) => css(base) + (b.aligns[i] ? `;text-align:${b.aligns[i]}` : "");
+  const head = b.header.map((h, i) => `<th style="${cellStyle(t.th, i)}">${inline(h, t)}</th>`).join("");
+  const body = b.rows
+    .map((r) => `<tr>${b.header.map((_, i) => `<td style="${cellStyle(t.td, i)}">${inline(r[i] ?? "", t)}</td>`).join("")}</tr>`)
+    .join("");
+  return `<table style="${css(t.table)}"><tr>${head}</tr>${body}</table>`;
+}
+
 export function renderArticle(title, bodyMd, themeId = DEFAULT_THEME, opts = {}) {
   const t = THEMES[themeId] ?? THEMES[DEFAULT_THEME];
   const blocks = parseBlocks(bodyMd);
@@ -160,6 +213,8 @@ export function renderArticle(title, bodyMd, themeId = DEFAULT_THEME, opts = {})
         return `<ol style="${css(t.ol)}">${b.items.map((i) => `<li style="${css(t.li)}">${inline(i, t)}</li>`).join("")}</ol>`;
       case "hr":
         return `<hr style="${css(t.hr)}" />`;
+      case "table":
+        return renderTable(b, t);
       default:
         return "";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peteryuan/wxformat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "公众号文章排版 CLI：草稿一键转纯净 Markdown + 公众号 HTML（全内联样式），支持浏览器预览、排版面板一键复制、剪贴板自动复制、JSON 输出，可被脚本、CI 与大模型直接调用。",
   "type": "module",
   "main": "lib/core.mjs",