feat(mdTable): add a simple markdown-it table plugin

.vitepress/config.ts

@@ -13,6 +13,7 @@ import { tasklist } from "@mdit/plugin-tasklist";
 // https://mdit-plugins.github.io/img-mark.html
 import { imgMark } from "@mdit/plugin-img-mark";
 import { sectionWrapper } from "./theme/utils/mdSectionWrapper";
+import { table } from "./theme/utils/mdTable";
 
 export default defineConfig({
   base: "/",
@@ -45,6 +46,7 @@ export default defineConfig({
       md.use(sectionWrapper);
       md.use(tasklist, { label: true });
       md.use(imgMark);
+      md.use(table);
     },
     image: {
       lazyLoading: true,

.vitepress/theme/styles/components/Table.scss

@@ -66,6 +66,10 @@ table {
   :is(td, th) {
     border: 1px solid var(--md-sys-color-outline);
 
+    &:empty {
+      display: none;
+    }
+
     code {
       padding-block: 0px !important;
     }

.vitepress/theme/utils/mdTable.ts

@@ -0,0 +1,131 @@
+import type MarkdownIt from "markdown-it";
+type StateBlock = any;
+
+/**
+ * 一个简易的 markdown-it 表格插件
+ * @param mdit MarkdownIt 实例
+ */
+export const table = (mdit: MarkdownIt) => {
+  // 禁用原有的表格规则
+  mdit.disable("table");
+
+  /** 表格块解析规则 */
+  const tableBlock = (state: StateBlock, startLine: number, endLine: number, silent: boolean): boolean => {
+    let nextLine = startLine;
+    let lineText = state.getLines(nextLine, nextLine + 1, 0, false).trim();
+
+    // 检查是否包含表格分隔符
+    if (!lineText.includes("|")) return false;
+
+    const rows: string[] = [];
+    while (nextLine < endLine) {
+      lineText = state.getLines(nextLine, nextLine + 1, 0, false).trim();
+      if (!lineText.includes("|") && lineText !== "") break;
+      if (lineText !== "") rows.push(lineText);
+      nextLine++;
+    }
+
+    if (rows.length < 1) return false;
+
+    if (silent) return true;
+
+    const token = state.push("simple_table", "table", 0);
+    token.map = [startLine, nextLine];
+    token.content = rows.join("\n");
+
+    state.line = nextLine;
+    return true;
+  };
+
+  mdit.block.ruler.before("paragraph", "simple_table", tableBlock);
+
+  // 渲染逻辑
+  mdit.renderer.rules.simple_table = (tokens, idx) => {
+    const content = tokens[idx].content;
+    const lines = content.split("\n").filter((l) => l.trim() !== "");
+    if (lines.length === 0) return "";
+
+    let html = "<table>\n";
+
+    // 检查第二行是否是分隔行
+    const hasSeparator = lines.length > 1 && /^[|:\-\s]+$/.test(lines[1]) && lines[1].includes("-");
+
+    let headerLines: string[] = [];
+    let bodyLines: string[] = [];
+
+    if (hasSeparator) {
+      headerLines = [lines[0]];
+      bodyLines = lines.slice(2);
+    } else {
+      // 如果没有分隔行，用第一行作为表头
+      headerLines = [lines[0]];
+      bodyLines = lines.slice(1);
+    }
+
+    // 分割单元格并清理首尾空的装饰管线
+    const getCells = (line: string) => {
+      const cells = line.split("|");
+      if (cells.length > 0 && cells[0].trim() === "") cells.shift();
+      if (cells.length > 0 && cells[cells.length - 1].trim() === "") cells.pop();
+      return cells.map((c) => c.trim());
+    };
+
+    // 解析单元格中的属性
+    const parseAttributes = (cellContent: string) => {
+      const attrRegex = /\{([^{}]+)\}\s*$/;
+      const match = cellContent.match(attrRegex);
+      const attrs: Record<string, string> = {};
+      let cleanedContent = cellContent;
+
+      if (match) {
+        cleanedContent = cellContent.replace(attrRegex, "").trim();
+        const attrString = match[1];
+        const parts = attrString.split(/\s+/);
+        parts.forEach((part) => {
+          const [key, value] = part.split("=");
+          if (key && (key === "colspan" || key === "rowspan")) {
+            attrs[key] = value || "1";
+          }
+        });
+      }
+      return { cleanedContent, attrs };
+    };
+
+    // 渲染表头
+    if (headerLines.length > 0) {
+      html += "<thead>\n";
+      headerLines.forEach((line) => {
+        html += "<tr>\n";
+        getCells(line).forEach((cell) => {
+          const { cleanedContent, attrs } = parseAttributes(cell);
+          const attrStr = Object.entries(attrs)
+            .map(([k, v]) => ` ${k}="${v}"`)
+            .join("");
+          html += `<th${attrStr}>${mdit.renderInline(cleanedContent)}</th>\n`;
+        });
+        html += "</tr>\n";
+      });
+      html += "</thead>\n";
+    }
+
+    // 渲染表体
+    if (bodyLines.length > 0) {
+      html += "<tbody>\n";
+      bodyLines.forEach((line) => {
+        html += "<tr>\n";
+        getCells(line).forEach((cell) => {
+          const { cleanedContent, attrs } = parseAttributes(cell);
+          const attrStr = Object.entries(attrs)
+            .map(([k, v]) => ` ${k}="${v}"`)
+            .join("");
+          html += `<td${attrStr}>${mdit.renderInline(cleanedContent)}</td>\n`;
+        });
+        html += "</tr>\n";
+      });
+      html += "</tbody>\n";
+    }
+
+    html += "</table>";
+    return html;
+  };
+};