MDX 格式文章示例
374 字
2 分钟
MDX 格式文章示例
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 文档
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
最后更新于 1970-01-02，距今已过 20541 天
部分内容可能已过时
相关文章 智能推荐
1
KaTeX 数学公式示例
文章示例 展示 Firefly 主题对 KaTeX 数学公式的支持，包括行内公式、块级公式和复杂数学符号。
2
Firefly 代码块示例
文章示例 在Firefly中使用表达性代码的代码块在 Markdown 中的外观。
3
在文章中嵌入视频
文章示例 这篇文章演示如何在博客文章中嵌入视频。
4
Firefly 一款清新美观的 Astro 博客主题模板
文章示例 Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。
5
Markdown Mermaid 图表
文章示例 一个包含 Mermaid 的 Markdown 博客文章简单示例。
随机文章 随机推荐
欢迎来到我的博客。这里主要记录脚本、网站、服务器部署、软件工具和 AI 的实战内容。
31
8
28
39,913
0 天
0 天前