Markdown 排版效果展示

这篇文章用来集中展示本站的正文排版效果，同时也是一份常用 Markdown 语法速查。你可以对照渲染结果与源码，快速了解写作时可用的元素。

文本与强调

一个段落里可以混用多种强调：加粗、斜体、粗斜体、删除线，以及 行内代码。也可以插入站内链接或外部链接，链接默认带下划线，悬停时更明显。

写作建议：强调是为了突出关键信息，而不是装饰。一段话里出现太多加粗，等于没有重点。

标题层级

正文中通常从二级标题开始分节。下面演示三到四级标题的视觉层级：

这是三级标题

用于在一个小节内进一步细分内容。

这是四级标题

更细粒度的分层，一般到此为止，再深就该考虑拆分文章了。

列表

无序列表，支持嵌套：

• 前端
  • SvelteKit —— 静态导出
  • Tailwind CSS —— 原子化样式
• 内容
  • Markdown 写作
  • PagesCMS 管理
• 部署
  • Cloudflare Pages

有序列表，适合表达步骤：

1. 在 content/posts/ 下新建 {slug}/index.md
2. 填写 frontmatter（标题、日期、标签等）
3. 编写正文并保存
4. 运行 pnpm build，静态产物自动更新

任务列表，适合做清单：

• 完成设计令牌校准
• 重构文章卡片与网格
• 接入代码语法高亮
• 补充更多示例文章

引用

引用可以是单段，也可以多段甚至嵌套：

「那只好再见吧 眼泪要落下来了。」

—— 引用块支持多个段落，常用于摘录、注记或旁白。

嵌套引用则用于在引用中再次引用。

代码

行内代码用来标注变量或命令，例如安装依赖：pnpm install。

代码块支持标注语言，便于阅读：

// 读取并解析一篇文章
import matter from 'gray-matter';
import { marked } from 'marked';

export function renderPost(raw: string) {
  const { data, content } = matter(raw);
  return { meta: data, html: marked.parse(content) };
}

# 本地开发与构建
pnpm dev              # 启动开发服务器
pnpm build            # 生成静态产物到 build/
pnpm preview          # 预览生产构建

{
  "title": "Markdown 排版效果展示",
  "tags": ["指南", "Markdown"],
  "pinned": false
}

表格

表格适合做对比或速查，支持列对齐：

分割线与图片

用三个短横线可以插入一条分割线：

图片会自动圆角并撑满正文宽度：

快捷键与内联 HTML

正文也支持少量内联 HTML，例如展示键位：按 Ctrl + K 可聚焦搜索框，按 Esc 取消。

以上就是常见 Markdown 元素在本站的呈现效果。开始写作时，把这篇文章当作模板对照即可。