本文用于全面检测文章页面的 Markdown 排版渲染表现，涵盖文本层级、代码格式化、数据表格以及图片拓展语法。
一、排版层级与文本标记
在标准排版中，正文遵循 17px 思源宋体、1.8 行高与 28px 段间距。行内支持 粗体文本强调、斜体文字切片、被废弃的删除线 以及 行内超链接示范 的交互呈现。
1.1 次级标题与行内标记
行内代码使用等宽字体呈现，例如调用 document.querySelector('.article-content') 或声明常量 const MAX_WIDTH = 680;。
1.1.1 四级小标题规范
四级小标题通常用于技术概念或参数的单独注解。
二、引用与列表排版
枯燥胜于机巧，删除多于新增。留白本身就是结构，颜色的克制能让真正重要的文本凸显。
—— 《个人网站设计规范 · 核心纪律》
无序列表
- 极简工程链路：基于 Astro 纯静态编译输出，去除冗余运行时。
- 视觉排版自洽：严格遵循 8px 间距基数与 1040px/680px 容器栅格。
- 动效特征隔离：触屏设备彻底阻断消耗性 WebGL 渲染循环。
有序步骤
- 建立基础架构与全局 CSS 设计变量。
- 接入文件化内容数据管线与 Markdown 渲染引擎。
- 实施桌面与移动端的响应式自适应审查。
三、代码块语法高亮
代码块由 Astro 内置编译引擎自动解析，采用等宽字体与细致的内边距，当代码超出栏宽时支持行内横向滚动：
// 状态机引导挂件核心步进逻辑
export class GuideStateMachine {
private mode: 'ARROW_DOWN' | 'ARROW_UP' | 'ARROW_LINK' = 'ARROW_DOWN';
public updateScroll(scrollY: number, isBottom: boolean): void {
if (isBottom) {
this.mode = 'ARROW_UP';
} else if (scrollY >= 120) {
this.mode = 'ARROW_DOWN';
}
}
public getGlyph(): string {
return this.mode;
}
}Python 算法示例：
def calculate_water_height(grid, damping=0.985):
"""简化的二维浅水方程网格迭代"""
for y in range(1, len(grid) - 1):
for x in range(1, len(grid[0]) - 1):
pressure = (grid[y-1][x] + grid[y+1][x] +
grid[y][x-1] + grid[y][x+1]) / 4.0
grid[y][x] = (pressure * 2.0 - grid[y][x]) * damping
return grid四、数据表格测试
表格支持表头加粗、1px 浅灰边框及单元格对齐控制：
| 模块名称 | 路由地址 | 桌面端呈现 | 移动端特征 |
|---|---|---|---|
| 首页主站 | / | 粒子系统 + 泳池 WebGL | 静态色块降级 |
| 博客列表 | /blog | 2 列自适应卡片 | 1 列流式卡片 |
| 探索单页 | /explore | 像素图标横向长卡片 | 纯图文自适应 |
| 文章详情 | /blog/[id] | 680px 暖纸白阅读版心 | 自适应流式排版 |
五、插图与全景宽图语法
5.1 普通栏宽插图（680px）
普通插图自动贴合 680px 栏宽，圆角 12px，下方居中附带 13px 浅灰图注：
5.2 全景延展宽图（突破窄栏至 1040px）
声明 wide 的插图可向两侧对称突破 680px 窄栏，延展至 1040px 容器宽度：
全要素排版测试完毕。