Lisardggyhttps://blog.lisardggy.com/Firefly6.16.9https://github.com/CuteLeaf/Firefly2026年10月31日 22:17:10https://blog.lisardggy.com/posts/mdx-example/https://blog.lisardggy.com/posts/mdx-example/这是一个 MDX 格式的示例文章，展示了如何在 Markdown 中使用 JSX。Fri, 02 Jan 1970 00:00:00 GMT<div><div><div></div><div>Tip</div></div><div><p><a href="https://github.com/CuteLeaf/Firefly" target="_blank">Firefly</a> 支持 <code>MDX</code> 和 <code>Markdown</code> 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。</p></div></div> <section><h2>Markdown 和 MDX 的区别<a href="#markdown-和-mdx-的区别"><span>#</span></a></h2><ul> <li>Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。</li> <li>MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。</li> </ul> <table><thead><tr><th>特性</th><th>Markdown</th><th>MDX</th></tr></thead><tbody><tr><td>基础语法</td><td>支持 (CommonMark)</td><td>支持 (CommonMark)</td></tr><tr><td>HTML 标签</td><td>支持</td><td>支持 (作为 JSX)</td></tr><tr><td>组件导入</td><td>不支持</td><td>支持 (import)</td></tr><tr><td>动态数据</td><td>不支持</td><td>支持 (JS 表达式)</td></tr><tr><td>样式定制</td><td>有限 (class/style)</td><td>灵活 (className/CSS-in-JS)</td></tr></tbody></table><hr /></section> <section><h2>Firefly 内置的专属 MDX UI 组件<a href="#firefly-内置的专属-mdx-ui-组件"><span>#</span></a></h2><p>这里列出 Firefly 内置的 MDX UI 组件，方便在 MDX 文章中直接使用。</p><section><h3>Tab分组：<code>TabGroup</code><a href="#tab分组tabgroup"><span>#</span></a></h3><p>用于创建可切换的标签页，方便在文章中展示不同语言或不同版本的代码等等。</p><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>TabGroup</span><span> </span><span>labels</span><span>=</span><span>{</span><span>[</span><span>"test.js"</span><span>, </span><span>"test.py"</span><span>]</span><span>}</span><span> </span><span>client</span><span>:</span><span>load</span><span>&gt;</span></div></div><div><div><div>2</div></div><div><span> </span><span>```</span><span>js</span></div></div><div><div><div>3</div></div><div><span><span> </span></span><span>console</span><span>.</span><span>log</span><span>(</span><span>1</span><span>)</span></div></div><div><div><div>4</div></div><div><span> </span><span>```</span></div></div><div><div><div>5</div></div><div> </div></div><div><div><div>6</div></div><div><span> </span><span>```</span><span>py</span></div></div><div><div><div>7</div></div><div><span> </span><span>print</span><span>(</span><span>"hello world"</span><span>)</span></div></div><div><div><div>8</div></div><div><span> </span><span>```</span></div></div><div><div><div>9</div></div><div><span>&lt;/</span><span>TabGroup</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><div>test.jstest.py</div> <div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span>(</span><span>1</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>print</span><span>(</span><span>"hello world"</span><span>)</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div><hr /></section><section><h3>时间线：<code>Timeline</code> / <code>TimelineItem</code><a href="#时间线timeline--timelineitem"><span>#</span></a></h3> <table><thead><tr><th>属性</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>date</code></td><td>否</td><td>时间标签，如 “2024-03-10”</td></tr><tr><td><code>title</code></td><td>否</td><td>条目标题</td></tr><tr><td><code>type</code></td><td>否</td><td>节点颜色，default 为主题色，其余对应提示框色板（tip / note / important / warning / caution）</td></tr><tr><td><code>icon</code></td><td>否</td><td>内置图标名，显示在圆点内：star / rocket / git / flag / book / heart / zap / bug / tag / calendar / code / edit</td></tr><tr><td>正文</td><td>否</td><td><code>&lt;TimelineItem&gt;</code> 标签内的内容，支持 Markdown</td></tr></tbody></table><div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>Timeline</span><span>&gt;</span></div></div><div><div><div>2</div></div><div><span><span> </span></span><span>&lt;</span><span>TimelineItem</span><span> </span><span>date</span><span>=</span><span>"2026-08-16"</span><span> </span><span>title</span><span>=</span><span>"新版本发布"</span><span> </span><span>icon</span><span>=</span><span>"rocket"</span><span>&gt;</span></div></div><div><div><div>3</div></div><div><span><span> </span></span><span>发布了全新版本，带来以下更新：</span></div></div><div><div><div>4</div></div><div> </div></div><div><div><div>5</div></div><div><span><span> </span></span><span>- 新增时间线组件</span></div></div><div><div><div>6</div></div><div><span><span> </span></span><span>- 改进暗色主题</span></div></div><div><div><div>7</div></div><div> </div></div><div><div><div>8</div></div><div><span><span> </span></span><span>正文里支持 </span><span>**</span><span>Markdown</span><span>**</span><span> 内容。</span></div></div><div><div><div>9</div></div><div><span><span> </span></span><span>&lt;/</span><span>TimelineItem</span><span>&gt;</span></div></div><div><div><div>10</div></div><div><span><span> </span></span><span>&lt;</span><span>TimelineItem</span><span> </span><span>date</span><span>=</span><span>"2025-11-02"</span><span> </span><span>title</span><span>=</span><span>"站点上线"</span><span> </span><span>type</span><span>=</span><span>"tip"</span><span> </span><span>icon</span><span>=</span><span>"flag"</span><span>&gt;</span></div></div><div><div><div>11</div></div><div><span><span> </span></span><span>欢迎来到我的博客。</span></div></div><div><div><div>12</div></div><div><span><span> </span></span><span>&lt;/</span><span>TimelineItem</span><span>&gt;</span></div></div><div><div><div>13</div></div><div><span><span> </span></span><span>&lt;</span><span>TimelineItem</span><span> </span><span>date</span><span>=</span><span>"2025-06-15"</span><span> </span><span>title</span><span>=</span><span>"项目立项"</span><span> </span><span>type</span><span>=</span><span>"note"</span><span>&gt;</span></div></div><div><div><div>14</div></div><div><span><span> </span></span><span>开始规划 Firefly 主题。</span></div></div><div><div><div>15</div></div><div><span><span> </span></span><span>&lt;/</span><span>TimelineItem</span><span>&gt;</span></div></div><div><div><div>16</div></div><div><span>&lt;/</span><span>Timeline</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div><ol><li><div><span></span></div><div><div>2026-08-16</div><div>新版本发布</div><div><p>发布了全新版本，带来以下更新：</p><ul> <li>新增时间线组件</li> <li>改进暗色主题</li> </ul><p>正文里支持 <strong>Markdown</strong> 内容。</p></div></div></li><li><div><span></span></div><div><div>2025-11-02</div><div>站点上线</div><div><p>欢迎来到我的博客。</p></div></div></li><li><div></div><div><div>2025-06-15</div><div>项目立项</div><div><p>开始规划 Firefly 主题。</p></div></div></li></ol><hr /></section><section><h3>步骤条：<code>Steps</code> / <code>StepItem</code><a href="#步骤条steps--stepitem"><span>#</span></a></h3><p>编号步骤条，适合教程、部署流程。编号自动生成，无需手动传序号。</p> <table><thead><tr><th>属性</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>title</code></td><td>否</td><td>步骤标题</td></tr><tr><td><code>type</code></td><td>否</td><td>编号圆颜色，default 为主题色，其余对应提示框色板（tip / note / important / warning / caution）</td></tr><tr><td><code>icon</code></td><td>否</td><td>内置图标名，有图标时显示图标而非数字（star / rocket / git / flag / book / heart / zap / bug / tag / calendar / code / edit）</td></tr><tr><td>正文</td><td>否</td><td><code>&lt;StepItem&gt;</code> 标签内的内容，支持 Markdown</td></tr></tbody></table><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>Steps</span><span>&gt;</span></div></div><div><div><div>2</div></div><div><span><span> </span></span><span>&lt;</span><span>StepItem</span><span> </span><span>title</span><span>=</span><span>"安装依赖"</span><span>&gt;</span></div></div><div><div><div>3</div></div><div><span><span> </span></span><span>运行 </span><span>`</span><span>pnpm install</span><span>`</span><span>。</span></div></div><div><div><div>4</div></div><div><span><span> </span></span><span>&lt;/</span><span>StepItem</span><span>&gt;</span></div></div><div><div><div>5</div></div><div><span><span> </span></span><span>&lt;</span><span>StepItem</span><span> </span><span>title</span><span>=</span><span>"启动开发服务器"</span><span> </span><span>type</span><span>=</span><span>"tip"</span><span> </span><span>icon</span><span>=</span><span>"rocket"</span><span>&gt;</span></div></div><div><div><div>6</div></div><div><span><span> </span></span><span>运行 </span><span>`</span><span>pnpm dev</span><span>`</span><span>，打开 </span><span>`</span><span>localhost:4321</span><span>`</span><span>。</span></div></div><div><div><div>7</div></div><div><span><span> </span></span><span>&lt;/</span><span>StepItem</span><span>&gt;</span></div></div><div><div><div>8</div></div><div><span><span> </span></span><span>&lt;</span><span>StepItem</span><span> </span><span>title</span><span>=</span><span>"编写文章"</span><span>&gt;</span></div></div><div><div><div>9</div></div><div><span><span> </span></span><span>在 </span><span>`</span><span>src/content/posts/</span><span>`</span><span> 新建 </span><span>`</span><span>.mdx</span><span>`</span><span> 文章。</span></div></div><div><div><div>10</div></div><div><span><span> </span></span><span>&lt;/</span><span>StepItem</span><span>&gt;</span></div></div><div><div><div>11</div></div><div><span>&lt;/</span><span>Steps</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div><ol><li><span></span><div><div>安装依赖</div><div><p>运行 <code>pnpm install</code>。</p></div></div></li><li><span><span></span></span><div><div>启动开发服务器</div><div><p>运行 <code>pnpm dev</code>，打开 <code>localhost:4321</code>。</p></div></div></li><li><span></span><div><div>编写文章</div><div><p>在 <code>src/content/posts/</code> 新建 <code>.mdx</code> 文章。</p></div></div></li></ol><hr /></section><section><h3>徽章：<code>Badge</code><a href="#徽章badge"><span>#</span></a></h3><p>内联彩色小徽章，可嵌在段落或标题里。</p> <table><thead><tr><th>属性</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>type</code></td><td>否</td><td>default 为主题色，其余对应提示框色板（tip / note / important / warning / caution）</td></tr></tbody></table><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>&lt;</span><span>Badge</span><span> </span><span>type</span><span>=</span><span>"tip"</span><span>&gt;提示&lt;/</span><span>Badge</span><span>&gt; &lt;</span><span>Badge</span><span> </span><span>type</span><span>=</span><span>"warning"</span><span>&gt;注意&lt;/</span><span>Badge</span><span>&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div><span>新功能</span><span>提示</span><span>笔记</span><span>重要</span><span>注意</span><span>危险</span><hr /><p>更多信息，请查看 <a href="https://mdxjs.com/" target="_blank">MDX 文档</a></p></section></section>