2026年5月11日MarkdownMDCNuxtTest
Markdown 与 MDC 渲染适配测试
一篇专门用来测试 Markdown、GFM 与 Nuxt MDC 组件渲染效果的文章。
Markdown 与 MDC 渲染适配测试
这是一篇用于测试博客正文渲染能力的文章。它会覆盖常见 Markdown 语法，也会混入 Nuxt MDC 组件语法，用来确认文章页在真实写作场景下是否稳定。
MDC 组件测试
1. 基础文本
普通段落应该拥有舒适的行高、合适的宽度和稳定的颜色。中文、English words、数字 12345、标点符号，以及很长的技术词 cloudflare-pages-nuxt-github-octokit-pipeline 都应该正常换行。
你也可以写 加粗文本、斜体文本、删除线，以及 inline code。
这是一段引用。它应该和普通段落有明显区分，但不要喧宾夺主。
2. 列表
无序列表：
- Nuxt 负责页面与路由
- GitHub 保存 Markdown 文件
- Cloudflare 负责部署和分发
- Waline 保存文章评论
有序列表：
- 写一篇 Markdown
- 上传到
content/blog - 等待 Cloudflare 重新部署
- 打开文章页检查评论区
3. 表格
| 模块 | 用途 | 状态 |
|---|---|---|
| Nuxt | 前端页面和服务端 API | 已接入 |
| Octokit | 提交文章与数据文件 | 已接入 |
| Waline | 每篇文章的评论区 | 已接入 |
| MDC | 在 Markdown 中使用 Vue 组件 | 本文测试 |
4. 代码块
type BlogPost = {
title: string
slug: string
tags: string[]
}
const post: BlogPost = {
title: "星见小屋",
slug: "starry-cottage",
tags: ["Nuxt", "Markdown", "MDC"]
}
5. 图片
6. MDC 组件
成功状态
如果你能看到这个绿色提示框，就说明 MDC block component 正常工作。
渲染方式
MDC
这张卡片来自
::stat-card，用于测试带 props 和 slot 的自定义 MDC 组件。
Waline Echo
文章评论