MDX 格式文章示例
374 mots
2 minutes
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 文档
Soutenir & Partager
Si cet article vous a aidé, partagez-le ou soutenez-moi !
Articles connexes Intelligent
1
Tutoriel Markdown
Startups Un exemple concis d'article de blog en Markdown.
2
Diagrammes PlantUML dans Markdown
Startups Article exemple pour valider le rendu du plugin PlantUML dans Firefly, le changement de thème et les capacités d'interaction.
3
Diagrammes Mermaid dans Markdown
Startups Un exemple simple d'article de blog Markdown avec des diagrammes Mermaid.
Exemples de blocs de code Firefly
Outils Apparence des blocs de code avec Expressive Code dans Firefly.
Guide d'utilisation de Firefly
Outils Comment utiliser le modèle de blog Firefly.
Articles aléatoires Aléatoire
Logiciels recommandés
Voir tous