MDX 写作指南
MDX 写作指南
360 字
2 分钟
这篇文章展示了本博客支持的所有 Markdown 和 MDX 语法，方便写作时参考。
标题#
支持六级标题，文章中常用 ## 到 ####。
qwq#
二级标题#
三级标题示例#
四级标题示例#
文本样式#
粗体文字、斜体文字、删除线、行内代码。
也可以组合使用：粗体加斜体。
链接#
普通链接：Astro 官网
自动链接：https://github.com
列表#
无序列表#
- 第一项
- 第二项
- 嵌套 A
- 嵌套 B
- 第三项
有序列表#
- 步骤一
- 步骤二
- 步骤三
任务列表#
- 搭建博客
- 配置主题
- 写更多文章
引用块#
好的工具不会取代创意，而是让创意更容易实现。
—— 某位程序员
代码块#
JavaScript#
function greet(name) { return `你好，${name}！欢迎来到 Suzu 博客。`;}
console.log(greet("世界"));折叠#
2 collapsed lines
// 这部分会被折叠import { ... } from '...'
// 这部分正常显示doSomething()TypeScript#
interface Post { title: string; date: string; tags?: string[]; pinned?: boolean;}
const posts: Post[] = [ { title: "第一篇", date: "2026-06-08", tags: ["Astro"], pinned: true }, { title: "第二篇", date: "2026-06-10", tags: ["CSS"] },];CSS#
:root { --md-primary: #8b2671; --md-surface: #fff8f8;}
.card { background: var(--md-surface); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}Shell#
pnpm create astro@latestpnpm devpnpm build代码编辑器框架#
console.log("Title attribute example");<div>File name comment example</div>行内代码#
使用 pnpm dev 启动开发服务器，访问 localhost:4321 预览。
表格#
| 功能 | 语法 | 示例 |
|---|---|---|
| 粗体 | **text** |
粗体 |
| 斜体 | *text* |
斜体 |
| 代码 | `code` |
code |
| 链接 | [text](url) |
链接 |
| Left | Center | Right |
|---|---|---|
| aaa | bbb | ccc |
| ddd | eee | fff |
| A | B |
|---|---|
| 123 | 456 |
| A | B |
|---|---|
| 12 | 45 |
分隔线#
用三个 - 创建分隔线：
图片#
在 frontmatter 中设置 image 字段即可显示封面图：
---title: "文章标题"image: "../../assets/cover.jpg"---正文中的图片：
Frontmatter 字段说明#
---title: "文章标题" # 必填date: "2026-06-13" # 必填，发布日期description: "文章简介" # 可选，卡片显示image: "../../assets/x.png" # 可选，封面图pinned: true # 可选，置顶文章tags: ["标签1", "标签2"] # 可选，标签categories: ["分类"] # 可选，分类series: "系列名" # 可选，系列---写作建议#
- 每篇文章都写
description，方便在卡片中预览 - 合理使用
tags和categories，方便归档检索 - 重要内容用
pinned: true置顶 - 代码块标注语言类型以获得语法高亮