winkooui 中文 Markdown 排版引擎 Skill
将 Markdown 文本转换为排版精美的中文文档（HTML/PDF），解决中文排版中字体、间距、标点、分行的常见痛点。
元信息
- 名称: cn-markdown-typeset
- 触发词: "排版"、"美化"、"中文排版"、"生成文档"、"Markdown 转"、"PDF"
- 适用场景: 技术博客、知识沉淀、报告输出、简历排版、文档导出
- 输出格式: HTML（默认）→ 可通过浏览器打印为 PDF
中文排版规范
字体栈
/* 正文 */
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 空格：
/* 自动处理中英文间距 */
p, li, span {
text-autospace: ideograph-alpha ideograph-numeric;
}
2. 首行缩进
正文段落首行缩进 2 em：
p {
text-indent: 2em;
margin-bottom: 1em;
}
3. 中西文混排
- 中英文之间自动加空格（
text-autospace或正则处理） - 引号使用中文弯引号："「」" 或 """"
- 破折号使用 ——（两个 em dash）
4. 行首行尾禁则
- 行首不出现句号、逗号、感叹号、问号、右引号、右括号
- 行尾不出现左引号、左括号
- 使用
word-break: break-all和 CSSoverflow-wrap处理
页面布局
/* 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 模板结构
<!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 输出时确保字体已嵌入