MDX 语法练习指南

欢迎来到 MDX 语法练习！这篇文章将带你了解 MDX 的各种语法特性。

1. 基础 Markdown 语法

1.1 文本格式化

这是粗体文本和斜体文本的示例。

你也可以使用~~删除线~~来标记删除的内容。

1.2 标题层级

MDX 支持 6 级标题：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

1.3 列表

无序列表:

第一项
第二项
- 嵌套项 2.1
- 嵌套项 2.2
第三项

有序列表:

第一步
第二步
第三步

任务列表:

已完成的任务
未完成的任务
另一个待办事项

1.4 引用

这是一段引用文本。

可以包含多行内容。

— 作者名字

1.5 代码

行内代码: 使用 const variable = "value" 来定义变量。

代码块:

// JavaScript 代码示例
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

// TypeScript 代码示例
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "张三",
  age: 25
};

# Python 代码示例
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

# Bash 命令示例
npm install
npm run dev
git commit -m "feat: add new feature"

1.6 链接和图片

文本链接: 访问我的网站了解更多。

参考链接: 这是一个参考链接。

图片: 示例图片

1.7 表格

列1	列2	列3
数据1	数据2	数据3
数据4	数据5	数据6

对齐表格:

左对齐	居中对齐	右对齐
左	中	右
A	B	C

1.8 水平分割线

使用三个或更多的 -, *, 或 _ 创建分割线：

2. MDX 特性 - React 组件集成

2.1 导入组件

在文件开头，我们已经导入了视频组件：

import { HeroVideoDialog } from "@/components/blog/hero-video-dialog"

2.2 使用 React 组件

视频组件示例

2.3 HTML 元素 + CSS 类

MDX 允许你使用 HTML 元素并添加 Tailwind CSS 类：

提示框示例

这是一个使用 Tailwind CSS 样式的提示框。

成功消息

操作已成功完成！

⚠️ 警告

请注意这个重要信息！

❌ 错误

发生了一个错误，请重试。

3. 高级用法

3.1 混合 Markdown 和 JSX

你可以在 Markdown 中自由混合 JSX：

这是普通的 Markdown 段落。

卡片 1

这是第一个卡片

卡片 2

这是第二个卡片

继续普通的 Markdown 内容...

3.2 嵌套列表和代码

第一个主题

这是关于第一个主题的详细说明。
```
const example1 = "示例代码";
```
- 子项 1.1
- 子项 1.2
第二个主题

第二个主题的说明。
```
example2 = "Python 示例"
```

3.3 表格中的格式

功能	语法	示例
粗体	`文本`	粗体
斜体	`文本`	斜体
代码	`代码`	`code`
链接	`[文本](URL)`	链接

4. 实用示例

4.1 步骤指南

第一步：准备环境

安装必要的依赖和工具

第二步：创建项目

使用脚手架初始化项目

第三步：开始开发

运行开发服务器并开始编码

4.2 特性列表

✅ 简单易用

直观的语法，快速上手

⚡ 高性能

优化的构建和渲染性能

🎨 可定制

灵活的主题和样式系统

🔧 可扩展

丰富的插件生态系统

5. 语法速查表

Markdown 语法

# 标题
## 二级标题

**粗体** *斜体* ~~删除线~~

- 无序列表
1. 有序列表

[链接](URL)
![图片](URL)

> 引用

`行内代码`

```代码块```

| 表格 | 列 |
|------|---|
| 行1  | 数据|

MDX 扩展

// 导入组件
import { Component } from "@/components/Component"

// 使用组件
<Component prop="value" />

// 使用 HTML + CSS
<div className="class-name">
  内容
</div>

6. 练习建议

复制这个文件，修改内容进行练习
尝试添加新的组件和样式
实验不同的 Markdown 语法组合
创建自己的内容结构
保存经常使用的代码片段

总结

MDX 结合了 Markdown 的简洁和 React 的强大功能，让你能够创建富交互式的文章内容。

关键要点：

✅ Markdown 语法保持不变
✅ 可以直接使用 React 组件
✅ 支持 JSX 和 HTML 元素
✅ 可以添加 Tailwind CSS 类名
✅ 完美支持代码高亮

继续练习，你会发现 MDX 的更多可能性！

提示: 在浏览器中打开这篇文章，查看实际渲染效果，然后对照源代码学习语法。

全站搜索