# Cn Markdown Typeset

> 中文 Markdown 排版引擎 Skill

- Skill: `winkooui/cn-markdown-typeset` (Agent Skill)
- Install (CLI): `npx skillmds@latest add winkooui/cn-markdown-typeset`
- Raw SKILL.md: https://api.skillmd.com/api/skills/winkooui/cn-markdown-typeset/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: winkooui (https://skillmd.com/u/winkooui)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/winkooui/cn-markdown-typeset

---

# 中文 Markdown 排版引擎 Skill

将 Markdown 文本转换为排版精美的中文文档（HTML/PDF），解决中文排版中字体、间距、标点、分行的常见痛点。

---

## 元信息

- **名称**: cn-markdown-typeset
- **触发词**: "排版"、"美化"、"中文排版"、"生成文档"、"Markdown 转"、"PDF"
- **适用场景**: 技术博客、知识沉淀、报告输出、简历排版、文档导出
- **输出格式**: HTML（默认）→ 可通过浏览器打印为 PDF

## 中文排版规范

### 字体栈

```css
/* 正文 */
font-family: "LXGW WenKai", "Noto Serif CJK SC", "Source Han Serif SC",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

/* 标题 */
font-family: "Noto Sans CJK SC", "Source Han Sans SC",
             "PingFang SC", "Hiragino Sans GB", sans-serif;

/* 代码 */
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro",
             "SF Mono", "Consolas", monospace;
```

### 字号层级

| 层级 | 字号 | 字重 | 行距 |
|------|------|------|------|
| H1 | 28px | 700 | 1.4 |
| H2 | 22px | 600 | 1.4 |
| H3 | 18px | 600 | 1.5 |
| 正文 | 15px | 400 | 1.8 |
| 引用 | 14px | 400 | 1.7 |
| 代码 | 13px | 400 | 1.6 |
| 注释 | 12px | 400 | 1.5 |

### 中文排版规则

#### 1. 标点挤压（Punctuation Kerning）

中文标点与西文/数字之间自动添加 1/4 em 空格：

```css
/* 自动处理中英文间距 */
p, li, span {
  text-autospace: ideograph-alpha ideograph-numeric;
}
```

#### 2. 首行缩进

正文段落首行缩进 2 em：

```css
p {
  text-indent: 2em;
  margin-bottom: 1em;
}
```

#### 3. 中西文混排

- 中英文之间自动加空格（`text-autospace` 或正则处理）
- 引号使用中文弯引号："「」" 或 """"
- 破折号使用 ——（两个 em dash）

#### 4. 行首行尾禁则

- 行首不出现句号、逗号、感叹号、问号、右引号、右括号
- 行尾不出现左引号、左括号
- 使用 `word-break: break-all` 和 CSS `overflow-wrap` 处理

### 页面布局

```css
/* A4 纸张 */
@page {
  size: A4;
  margin: 2.5cm 2cm;
}

/* 阅读宽度限制 */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 0;
}

/* 页面边距 */
@media print {
  body { margin: 0; }
  .container { padding: 0; }
}
```

## HTML 模板结构

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{document_title}}</title>
  <style>
    /* 全局重置 */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* 根变量 */
    :root {
      --color-text: #1a1a1a;
      --color-secondary: #555555;
      --color-muted: #888888;
      --color-border: #e0e0e0;
      --color-bg: #ffffff;
      --color-highlight: #f7f6f3;
      --font-serif: "LXGW WenKai", "Noto Serif CJK SC", serif;
      --font-sans: "Noto Sans CJK SC", "PingFang SC", sans-serif;
      --font-mono: "JetBrains Mono", "Fira Code", monospace;
    }

    body {
      font-family: var(--font-serif);
      font-size: 15px;
      line-height: 1.8;
      color: var(--color-text);
      background: var(--color-bg);
      text-autospace: ideograph-alpha ideograph-numeric;
    }

    .container {
      max-width: 720px;
      margin: 0 auto;
      padding: 3rem 1.5rem;
    }

    /* 标题 */
    h1 { font-family: var(--font-sans); font-size: 28px; font-weight: 700;
         line-height: 1.4; margin: 2.5em 0 1em; }
    h2 { font-family: var(--font-sans); font-size: 22px; font-weight: 600;
         line-height: 1.4; margin: 2em 0 0.8em;
         padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
    h3 { font-family: var(--font-sans); font-size: 18px; font-weight: 600;
         line-height: 1.5; margin: 1.5em 0 0.6em; }

    /* 正文 */
    p { text-indent: 2em; margin-bottom: 1em; }
    p:first-of-type { text-indent: 0; } /* 首段不缩进（英文习惯兼容） */
    p.no-indent { text-indent: 0; }

    /* 列表 */
    ul, ol { margin: 0.8em 0; padding-left: 2em; }
    li { margin-bottom: 0.4em; line-height: 1.7; }

    /* 引用 */
    blockquote {
      margin: 1.2em 0;
      padding: 0.8em 1.2em;
      border-left: 3px solid var(--color-border);
      background: var(--color-highlight);
      color: var(--color-secondary);
      font-size: 14px;
    }

    /* 代码 */
    code {
      font-family: var(--font-mono);
      font-size: 13px;
      background: var(--color-highlight);
      padding: 0.15em 0.4em;
      border-radius: 3px;
    }
    pre {
      margin: 1.2em 0;
      padding: 1em;
      background: #f5f5f5;
      border-radius: 6px;
      overflow-x: auto;
    }
    pre code { background: none; padding: 0; }

    /* 表格 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.2em 0;
      font-size: 14px;
    }
    th, td {
      padding: 0.6em 1em;
      text-align: left;
      border-bottom: 1px solid var(--color-border);
    }
    th { font-family: var(--font-sans); font-weight: 600;
         background: var(--color-highlight); }

    /* 分割线 */
    hr {
      border: none;
      border-top: 1px solid var(--color-border);
      margin: 2em 0;
    }

    /* 图片 */
    img { max-width: 100%; height: auto; margin: 1.5em auto; display: block; }

    /* 强调 */
    strong { font-weight: 600; }
    em { font-style: italic; }

    /* 打印优化 */
    @media print {
      body { font-size: 12pt; }
      h1 { font-size: 20pt; }
      h2 { font-size: 16pt; }
      .container { padding: 0; }
      pre, blockquote { page-break-inside: avoid; }
      h1, h2, h3 { page-break-after: avoid; }
    }
  </style>
</head>
<body>
  <div class="container">
    {{content}}
  </div>
</body>
</html>
```

## 执行流程

```
用户输入 Markdown 内容
    │
    ▼
① 内容解析
    ├─ 识别标题层级
    ├─ 提取列表、表格、代码块
    └─ 标记需要特殊处理的元素
    │
    ▼
② 中文排版处理
    ├─ 中英文间自动加空格
    ├─ 标点挤压优化
    ├─ 首行缩进设置
    └─ 引号/破折号规范化
    │
    ▼
③ 渲染 HTML
    ├─ 应用模板 CSS
    ├─ 嵌入内容
    └─ 生成为单文件 HTML
    │
    ▼
④ 输出
    ├─ 默认输出 HTML 文件
    └─ 用户要求 PDF 时，Chrome headless 打印
```

## 质量检查清单

- [ ] 中英文之间是否有适当间距
- [ ] 标题层级是否正确（H1 → H2 → H3，无跳跃）
- [ ] 段落首行是否缩进 2em
- [ ] 表格对齐是否整齐
- [ ] 代码块是否语法高亮
- [ ] 引用块是否有左侧竖线
- [ ] 打印模式下分页是否合理
- [ ] 字体是否正确加载

## 注意事项

- 纯英文内容不应用首行缩进
- 代码块中不处理中文排版规则
- 表格内容超出宽度时允许横向滚动
- PDF 输出时确保字体已嵌入

