MDX 语法完全测试：博客渲染效果一览

MDX 语法完全测试：博客渲染效果一览

阅读全文需约 5 分钟技术
MDX测试

这篇文章的存在意义只有一个：把博客支持的所有 MDX 语法都跑一遍，确保每个元素都渲染正常。如果你是来阅读"有用的内容"的——抱歉，这里没有。

行内样式

这是一段普通正文。它包含加粗文本、斜体文本、删除线文本、以及行内代码 console.log("hello")。还可以组合使用：加粗斜体、加粗中嵌入 代码。

这里有一个内部链接和一个外部链接，外部链接应该在新标签页打开。

下面是一个单独成行的外部链接，应该渲染为按钮样式：

访问 GitHub 仓库

以及一个单独成行的内部链接：

查看所有文章

标题层级测试

三级标题：应该有圆点装饰

四级标题：装饰应该更小

五级标题：没有装饰
六级标题：最小的标题

列表

无序列表

  • 第一项内容
  • 第二项，包含加粗
  • 第三项嵌套：
    • 嵌套第一层
    • 嵌套第二层
      • 再嵌套一层
  • 回到顶层

有序列表

  1. 克隆仓库
  2. 安装依赖
  3. 配置环境变量：
    1. 复制 .env.example 为 .env
    2. 填入数据库连接串
    3. 填入 COS 密钥
  4. 运行 pnpm dev

任务列表 (GFM)

  • Prisma schema 设计
  • 数据库推送
  • MDX 渲染管线
  • 后台编辑器
  • COS 媒体上传

引用

普通引用：

所有的大人都曾经是孩子，只是很少有人记得这一点。

—— 安托万·德·圣埃克苏佩里《小王子》

嵌套引用：

外层引用

内层引用：这段话在引用里面的引用里面。

回到外层。

GitHub 风格 Alert

注意

这是一条注意信息。适合补充说明、背景知识，不会影响操作流程。

提示

这是一条提示。可以在这里分享最佳实践或快捷方式，比如 Cmd + Shift + P 打开命令面板。

重要

这是一条重要信息。请确保数据库连接串配置正确，否则应用将无法启动。

警告

这是一条警告。执行 prisma db push 会直接修改生产数据库结构，请确认你连接的是开发环境。

危险

这是一条危险提醒。以下操作将清空所有数据且不可撤销，请三思而后行。

代码块

JavaScript

jsjs
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
// 测试
console.log(fibonacci(10)); // 55

TypeScript

typescripttypescript
interface BlogPost {
  title: string;
  slug: string;
  content: string;
  tags: string[];
  publishedAt: Date;
}
 
async function getPost(slug: string): Promise<BlogPost | null> {
  const post = await prisma.post.findUnique({
    where: { slug },
    include: { tags: true },
  });
  return post;
}

Shell

bashbash
# 安装依赖
pnpm install
 
# 生成 Prisma Client
npx prisma generate
 
# 开发模式
pnpm dev

CSS

csscss
.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

JSON

jsonjson
{
  "name": "blog2026",
  "version": "1.0.0",
  "dependencies": {
    "next": "15.5.9",
    "@heroui/react": "^2.0.0",
    "prisma": "^7.5.0"
  }
}

无语言标识的代码块

这是一段没有指定语言的代码块
它应该以纯文本形式渲染
不会有语法高亮

表格 (GFM)

功能状态优先级备注
Prisma Schema✅ 完成P09 张表
MDX 渲染✅ 完成P0remark + rehype
后台编辑器❌ 未开始P1需要富文本
RSS 订阅❌ 未开始P2feed.xml
搜索功能❌ 未开始P3全文检索

分割线

上面是表格。

下面是图片。

图片

一张测试图片，展示博客的图片渲染效果一张测试图片，展示博客的图片渲染效果

脚注 (GFM)

Prisma 71 和 Prisma 6 的配置方式完全不同，连接串需要放在 prisma.config.ts 中而非 schema.prisma。

Next.js 的 App Router2 是目前推荐的路由方案，基于 React Server Components 构建。

综合场景

下面是一段"真实"的技术写作场景，混合使用多种语法：

在 Prisma 7 中，你需要手动创建 driver adapter。首先安装依赖：

bashbash
pnpm add @prisma/adapter-pg

然后在 lib/prisma.ts 中初始化：

typescripttypescript
import { PrismaClient } from "@/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";
 
const adapter = new PrismaPg({
  connectionString: process.env.DATABASE_URL!,
});
 
export const prisma = new PrismaClient({ adapter });
警告

不要使用 @prisma/client 导入路径，Prisma 7 的 client 生成在 generated/prisma/ 目录下。

完成后运行 npx prisma generate 即可。详细文档参见 Prisma 官方文档。

Footnotes

  1. Prisma 7 于 2025 年发布，引入了 driver adapter 架构。 ↩

  2. App Router 从 Next.js 13.4 开始稳定，取代了原有的 Pages Router。 ↩

原创声明

作者
Galentwww 万事屋
标题
MDX 语法完全测试：博客渲染效果一览
链接
https://blog.galentwww.com/posts/mdx-syntax-showcase
发布

本文为原创内容，转载请注明出处并附上原文链接。