这里是 Note MDX 组件的快速示例，支持 primary / info / success / warning / danger。
主色提示
<p>这是 primary 级别的提示卡片，适合突出重点。</p>
信息说明
<p>这是 info 级别的提示卡片，用于补充说明。</p>
操作成功
<p>这是 success 级别的提示卡片，用于成功状态提醒。</p>
注意事项
<p>这是 warning 级别的提示卡片，用于重要注意。</p>
风险提示
<p>这是 danger 级别的提示卡片，用于风险/错误提醒。</p>
下面是 Label 的示例（无图标）：
Primary Info Success Warning Danger下面是下划线（Underline）示例：
下划线
波浪线
着重点
紫色下划线
绿色波浪线
黄色着重点
下面是删除线（Strike）示例：
下面是高亮（Highlight）示例：
荧光高亮下面是文本颜色（Text）示例：
赤橙黄绿青蓝紫 红色 粉色 橙色 黄色 绿色 靛青 蓝色 紫色 灰色下面是快捷键、上标与下标示例：
Ctrl + K
H 2 O 与 CO 2
下面是折叠内容（Collapse）示例：
点击展开
这里是折叠内容。
默认展开
<p>这个折叠块默认展开。</p>
带颜色的折叠
<p>这是带颜色的折叠内容。</p>
成功提示
<p>这个折叠块使用 success 配色并默认展开。</p>
下面是 Tabs 组件示例：
<section class="tab-item" data-tab-label="Astro" data-tab-value="astro"> <p>Astro 适合做内容站点，默认 SSR 性能很好。</p> </section><section class="tab-item" data-tab-label="Svelte" data-tab-value="svelte"> <p>Svelte 适合做轻量交互，当前主题中的导航就使用了 Svelte 组件。</p> </section><section class="tab-item" data-tab-label="UnoCSS" data-tab-value="uno"> <p>UnoCSS 提供原子化样式能力，和主题变量配合很灵活。</p> </section>
下面是 Quiz 组件示例：
<div class="quiz-item true" data-quiz-type="true"> <div class="quiz-question"> <p>编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。</p> </div> </div><div class="quiz-item multi" data-quiz-type="multi"> <div class="quiz-question"> <p>下列哪些项是“派生类对象替换基类对象”？</p><ul class="quiz-options list-none"> &lt;li class=&quot;quiz-option&quot; data-correct=&quot;true&quot;&gt; &amp;lt;code&amp;gt;p1=&amp;amp;amp;circle1;&amp;lt;/code&amp;gt; &lt;/li&gt;&lt;li class=&quot;quiz-option&quot;&gt; &amp;lt;code&amp;gt;q1=&amp;amp;amp;shape1;&amp;lt;/code&amp;gt; &lt;/li&gt;&lt;li class=&quot;quiz-option&quot; data-correct=&quot;true&quot;&gt; &amp;lt;code&amp;gt;shape1=circle1;&amp;lt;/code&amp;gt; &lt;/li&gt;&lt;li class=&quot;quiz-option&quot;&gt; &amp;lt;code&amp;gt;circle1=shape1;&amp;lt;/code&amp;gt; &lt;/li&gt; </ul><div class="quiz-answer"> &lt;ul&gt;&lt;li&gt;令基类对象的指针指向派生类对象&lt;/li&gt;&lt;li&gt;派生类指针不能指向基类对象&lt;/li&gt;&lt;li&gt;派生类对象可以赋值给基类对象（对象切片）&lt;/li&gt;&lt;li&gt;基类对象不能直接赋值给派生类对象&lt;/li&gt;&lt;/ul&gt; </div> </div> </div><div class="quiz-item single" data-quiz-type="single"> <div class="quiz-question"> <p>下列叙述正确的是：</p><ul class="quiz-options list-none"> &lt;li class=&quot;quiz-option&quot;&gt; 虚函数只能定义成无参函数 &lt;/li&gt;&lt;li class=&quot;quiz-option&quot;&gt; 虚函数不能有返回值 &lt;/li&gt;&lt;li class=&quot;quiz-option&quot;&gt; 可以定义虚构造函数 &lt;/li&gt;&lt;li class=&quot;quiz-option&quot; data-correct=&quot;true&quot;&gt; A、B、C 都不对 &lt;/li&gt; </ul><div class="quiz-answer"> 虚函数既可以有参数也可以有返回值，且不存在虚构造函数。 </div> </div> </div><div class="quiz-item fill" data-quiz-type="fill"> <div class="quiz-question"> <p><p>若定义 <code>int e=8; double f=6.4, g=8.9;</code>，则表达式<code>f+int (e/3*int (f+g)/2)%4</code> 的值为<br/>
<span class="quiz-gap" data-answer="9.4" aria-label="填空题答案占位"> 9.4 </span>。</p></p><div class="quiz-answer"> &lt;p&gt;注意运算顺序和数据类型。&lt;br/&gt;
&lt;div class=&quot;quiz-mistake&quot; data-type=&quot;易错答案&quot;&gt; 8.4 &lt;/div&gt;&lt;/p&gt; </div> </div> </div>