Markdown Typography Demo
---title: Markdown Typography Demodate: 2026-04-08---# Markdown 排版演示 · Markdown Typography Demo这份默认示例专门用于观察 Markdown 在中英文混排、列表、代码、表格、引用和 ASCII Art 场景下的排版效果。This document is intentionally generic and structured as a visual specimen rather than product copy.## 1. 排版基础 · Typography这一节用于观察正文、强调、链接、引用和内联代码之间的层级关系。正文段落应当保持稳定、平静、易读。A paragraph should still feel balanced when Chinese, English, numbers like `2026`, and punctuation appear in the same line.你可以在这里同时看到 **粗体**、*斜体*、***粗斜体***、~~删除线~~、链接 [Example Link](https://example.com)、以及内联代码 `renderPreview()`、`font-family`、`SELECT * FROM demo_table` 的表现。> 好的排版不是装饰内容,而是帮助读者更快地理解结构。>> Good typography should reveal hierarchy before the reader consciously notices styling.### 1.1 标题节奏 · Heading Rhythm这段说明用于观察标题与正文之间的留白关系,以及 H1 到 H6 的层级递减是否自然。#### H4 小标题 · Small HeadingH4 及以下层级主要用于测试较小标题在长文中的节奏感,而不是用于强调视觉冲击。##### H5 紧凑标题 · Compact Heading当标题层级继续下探时,字号变化、字重稳定性和段前间距会更容易暴露问题。###### H6 极小标题 · Minimal HeadingH6 在视觉上已经接近辅助说明,但仍然应该保持清晰的结构标识。## 2. 列表结构 · Lists这一节用于观察无序列表、有序列表和任务列表的缩进、基线和换行效果。### 2.1 无序列表 · Unordered List- 第一项:展示中文与 English keywords 的混排。- 第二项:包含内联代码 `previewStyles.docsProse`,观察代码色和彩色文字是否与正文和谐共存。- 第三项:故意写得稍长一些,用于观察列表换行后的缩进是否稳定,视觉上是否仍然容易扫读。### 2.2 有序列表 · Ordered List1. 第一项用于观察序号与正文首行的基线关系。2. 第二项加入 **bold** 和 `inline code`,观察多种强调是否抢占列表结构。3. 第三项写成更长的句子,用来观察自动换行后第二行的缩进是否仍然对齐。### 2.3 任务列表 · Task List- [x] 展示标题层级- [x] 展示 blockquote- [x] 展示 inline code 颜色- [x] 展示 ASCII Art 对齐- [ ] 展示超长代码横向滚动- [ ] 展示超宽表格横向滚动## 3. 代码展示 · Code这一节用于演示多行代码、超长单行代码以及不同语言标签的显示效果。### 3.1 多行代码块 · Multi-line Code Block下面的代码块用于观察等宽字体、行高、缩进和代码块上下边距。```tstype ArticleRecord = { id: string; title: string; locale: "zh-CN" | "en-US"; tags: string[]; updatedAt: string;};export function groupByLocale(records: ArticleRecord[]) { return records.reduce<Record<string, ArticleRecord[]>>((acc, record) => { acc[record.locale] ??= []; acc[record.locale].push(record); return acc; }, {});}export function collectTags(records: ArticleRecord[]) { const counts = new Map<string, number>(); for (const record of records) { for (const tag of record.tags) { counts.set(tag, (counts.get(tag) ?? 0) + 1); } } return [...counts.entries()].sort((a, b) => b[1] - a[1]);}```### 3.2 横向滚动 · Horizontal Scroll下面这一行被故意写得很长,用于确认代码块应该优先横向滚动,而不是粗暴换行:```json{"title":"Typography Demonstration","locale":"zh-CN","description":"This intentionally long line exists to verify horizontal scrolling behavior inside fenced code blocks without wrapping the content into multiple broken visual fragments.","items":[{"id":"alpha","status":"ready","priority":"high"},{"id":"beta","status":"pending","priority":"medium"},{"id":"gamma","status":"archived","priority":"low"}],"meta":{"author":"specimen","purpose":"scrolling","note":"long single-line payload for preview verification"}}```### 3.3 命令示例 · Command Example```bashpnpm run preview:markdown --theme dark --locale zh-CN --input ./examples/typography-demo.md --output ./artifacts/markdown-preview-snapshot.png```## 4. ASCII Art · 等宽对齐这一节只用于观察 box-drawing 字符与中文在同一代码块里是否仍然严格对齐。```text┌──────────────────────────────────────┐│ 查找内容 > │├──────────────────────────────────────┤│ 置顶会话 [开] │├──────────────────────────────────────┤│ 消息免打扰 [关] │└──────────────────────────────────────┘```## 5. 表格滚动 · Table这一节分成两个例子:先看一个常规表格,再看一个故意做得很宽的表格。### 5.1 常规表格 · Regular Table| Element | Font | Role || --- | --- | --- || Heading | Sans | 层级标题 || Body | Serif | 正文段落 || Inline Code | Mono | 行内代码 || ASCII Art | Sarasa | 严格对齐 |### 5.2 超宽表格 · Wide Table下面这个表格故意增加了列数、列标题长度、单元格文案长度,以及多个不会自然缩短的 inline code 片段,用于稳定触发表格横向滚动。| Section Name | 中文说明 | English Summary | Example Inline Code | Width Stress Column A | Width Stress Column B | Width Stress Column C | Notes || --- | --- | --- | --- | --- | --- | --- | --- || Headings | 标题用于展示 H1-H6 在 sans 字体下的层级、留白、字重和中英文混排稳定性。 | Headings should feel compact, clearly ranked, and visually consistent across Chinese and English text. | `# Heading` | This column intentionally contains a very long sentence so the table width extends well beyond the normal reading column and makes horizontal scrolling obvious in preview mode. | Another deliberately extended description is kept here to prevent the browser from collapsing the table back into a compact layout. | `heading-level-visual-regression-check` | Observe rhythm and spacing. || Body | 正文展示 serif 字体在中英混排、长句换行、标点节奏和阅读连续性上的可读性。 | Body copy should remain calm, readable, and balanced even when multiple writing systems share the same paragraph flow. | `paragraph` | Long descriptive values make it easier to confirm that the table remains scrollable rather than wrapping every cell into a narrow multi-line stack. | This extra-wide content exists only to increase table width and keep the scrollbar easy to verify in both light and dark themes. | `body-copy-mixed-language-readability-sample` | Compare Chinese and English texture. || Inline Code | 内联代码需要明显区别于正文,但不能抢走阅读焦点,也不能破坏句子的阅读节奏。 | Inline code should stand out without overpowering prose or introducing awkward baseline shifts. | `renderPreview()` | Wide-cell content is repeated here so the horizontal scroll remains visible even on larger desktop widths. | This table is intentionally oversized and should not rely on accidental viewport clipping to demonstrate scrolling behavior. | `inline-code-color-alignment-consistency-check` | Check color and baseline alignment. || ASCII Art | ASCII Art 需要保持严格等宽、禁用自动换行,并与中文内容共同保持稳定网格。 | ASCII art must preserve grid alignment and remain readable alongside Chinese labels and UI-like box drawing characters. | `┌─┐` | This intentionally oversized cell helps verify that wide tables still scroll smoothly after the Sarasa-specific ASCII alignment rules are applied. | Another oversized description is included here so the example stays reliably wider than the viewport under typical desktop testing conditions. | `ascii-art-grid-preservation-scroll-demo` | Validate Sarasa usage. |## 6. 分隔线 · Divider---## 7. 链接预览 · Link Preview这一节用于观察连续外链在正文中的排版、颜色和交互表现。- [苹果中国](https://www.apple.com.cn/)- [特斯拉中国](https://www.tesla.cn/)- [法拉利中国](https://www.ferrari.com/zh-CN)- [保时捷中国](https://www.porsche.com/china/zh/)## 8. 快速检查清单 · Quick Checklist如果你只是想快速检查排版,这份默认示例已经覆盖:- 标题层级- 正文与引用- 中英混排- 内联代码- 多行代码块- 超长单行代码- ASCII Art- 超宽表格- 外链列表
Type Markdown to get started
Drop filePaste file pathPaste URL
Drop file to load content