EMBERMDX 格式文章示例
AI 摘要
Markdown 和 MDX 是 Astro 文章的两种写作格式。Markdown（MD）提供纯文本轻量语法，适合简单文档；MDX 则支持在 Markdown 中无缝插入 JSX，嵌入 React 组件，实现丰富交互。 对比表总结：两者均支持 CommonMark 和 HTML，MDX 独有组件导入、JS 表达式动态数据，以及更灵活的样式定制（className/CSS-in-JS）。 使用示例包括图标组件、HTML/JSX 块及动态变量（如 {year}），推荐复杂需求时选 MDX，简单内容用 Markdown 即可。更多细节参阅 MDX 文档。
总结由AI生成，仅供阅览
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="fa7-solid: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 文档
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
Markdown 教程
文章示例一个简明的 Markdown 博客示例。
2
Firefly 简单使用指南
博客指南如何使用 Firefly 博客模板。
3
Ember 侧边栏配置指南
技术分享介绍 Ember 博客侧边栏的组件定义、默认布局、页面覆盖、路径匹配、组件复用和关闭规则。
4
Ember 主题配色配置化：移除访客取色器，统一由站点配置驱动
技术分享记录 Ember 博客从访客自定义主题色迁移到构建配置色的过程，包括双模式色板派生、文章配色覆盖、旧存储清理与构建校验。
5
Firefly 归档页面美化
技术分享对 Firefly 主题归档页面进行美化：颜色变量化、整体排版、虚线连接修复，并适配明暗模式。
随机文章随机推荐