Vol. II
不期而至🎁 惊喜礼盒
🎁 Surprise · 不定期 · 随缘更新
MDX 格式文章示例
374 字
2 分钟
Tip
Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。
Markdown 和 MDX 的区别
- Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
- MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。
| 特性 | Markdown | MDX |
|---|---|---|
| 基础语法 | 支持 (CommonMark) | 支持 (CommonMark) |
| HTML 标签 | 支持 | 支持 (作为 JSX) |
| 组件导入 | 不支持 | 支持 (import) |
| 动态数据 | 不支持 | 支持 (JS 表达式) |
| 样式定制 | 有限 (class/style) | 灵活 (className/CSS-in-JS) |
使用组件
这是一个图标组件：
import { Icon } from 'astro-icon/components'
<div class="flex items-center gap-2 my-4"> <Icon name="lucide:rocket" class="text-4xl text-red-500" /> <span>火箭发射！</span></div>火箭发射！
使用 JSX
你也可以直接写 HTML/JSX：
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4"> 这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。</div>这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
简单的变量导出
export const year = new Date().getFullYear()
今年是 {year} 年。今年是 2026 年。
更多信息，请查看 MDX 文档
评论区
像发消息一样写就好：点工具栏插入表情 / 图片，表情会直接显示。插图 ≤5MB。
