Markdown Preview

Markdown Typography Demo

6522 chars

---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- 超宽表格- 外链列表

---
title: Markdown Typography Demo
date: 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 Heading

H4 及以下层级主要用于测试较小标题在长文中的节奏感，而不是用于强调视觉冲击。

##### H5 紧凑标题 · Compact Heading

当标题层级继续下探时，字号变化、字重稳定性和段前间距会更容易暴露问题。

###### H6 极小标题 · Minimal Heading

H6 在视觉上已经接近辅助说明，但仍然应该保持清晰的结构标识。

## 2. 列表结构 · Lists

这一节用于观察无序列表、有序列表和任务列表的缩进、基线和换行效果。

### 2.1 无序列表 · Unordered List

- 第一项：展示中文与 English keywords 的混排。
- 第二项：包含内联代码 `previewStyles.docsProse`，观察代码色和彩色文字是否与正文和谐共存。
- 第三项：故意写得稍长一些，用于观察列表换行后的缩进是否稳定，视觉上是否仍然容易扫读。

### 2.2 有序列表 · Ordered List

1. 第一项用于观察序号与正文首行的基线关系。
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

下面的代码块用于观察等宽字体、行高、缩进和代码块上下边距。

```ts
type 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

```bash
pnpm 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