示例

<X.H1>一级标题</X.H1>
<X.H2>二级标题</X.H2>
<X.H3>三级标题</X.H3>

<X.H2 href="https://www.baidu.com">指向百度的二级标题</X.H2>

<X.Divider />
组件已弃用！
<X.Divider />

<X.P>夜晚的城市灯光璀璨夺目，高楼的霓虹灯在黑夜中闪烁不停，像是星空中的繁星在闪烁。</X.P>

<X.P>这是一个正常的段落。</X.P>
<X.P>这是一个没有下外边距的段落。</X.P>
<X.P>这是一个正常的段落。</X.P>
<X.P>这是一个正常的段落。</X.P>

<X.H2>段落中的特殊格式</X.H2>
<X.Oli reset>
    <X.P>`\`content\``：实现`这样的`强调效果</X.P>
</X.Oli>
<X.Oli>
    <X.P>`\*content\*`：实现*这样的*加粗效果</X.P>
</X.Oli>
<X.Oli>
    <X.P>
        `\$content\$`：插入一个行内公式
        {`$\\int_{a}^{b} f(x)dx = \\lim_{n \\to \\infty} \\sum_{i=1}^n f(x_i) \\cdot \\Delta x$`}，
        或者一些简单的数学符号$\mu_1$、$\mu_2$等
    </X.P>
</X.Oli>
<X.Oli>
    <X.P>`\@text[url]\@`：这是一个指向@百度[https://www.baidu.com]@的超链接</X.P>
</X.Oli>
<X.Oli>
    <X.P>复合使用`\`\@text[url]\@\``：这是一个指向`@百度[https://www.baidu.com]@`的超链接</X.P>
</X.Oli>
<X.Oli>
    <X.P>
        在段落组件中可以使用一些转义字符，打出上述代表了特殊格式的符号如`\``、`\*`等；\n也可以通过`\\n`换行。
    </X.P>
</X.Oli>

<X.Uli>第一项</X.Uli>
<X.Uli>第二项</X.Uli>
<X.Uli>
    <X.P>第三项`嵌套了段落组件`</X.P>
</X.Uli>
<X.Uli>
    <X.P>第四项嵌套了更多组件</X.P>
    <X.Uli>
        <X.H3>一个标题</X.H3>
    </X.Uli>
    <X.CodeBlock language="js" code="console.log('Hello, World!')" />
</X.Uli>
<X.Uli>
    <X.P>注意第四项的代码块的`margin-bottom`被移除了</X.P>
</X.Uli>

<X.Uli>
    <X.P>第`1`项</X.P>
</X.Uli>
<X.Uli>第`2`项</X.Uli>
<X.Uli>第{`$\\bm{3}$`}项</X.Uli>

<X.P>列表1：</X.P>
<X.Oli reset>第一项（重置）</X.Oli>
<X.Oli>第二项</X.Oli>
<X.Oli>第三项</X.Oli>
<X.Oli>第四项</X.Oli>
<X.P>列表2：</X.P>
<X.Oli reset>第一项（重置）</X.Oli>
<X.Oli>第二项</X.Oli>

<X.Oli reset={-2}>A</X.Oli>
<X.Oli>B</X.Oli>
<X.Oli>C</X.Oli>
<X.Oli>D</X.Oli>
<X.Oli>E</X.Oli>

<X.FlexRow>
    <DemoBox />
    <DemoBox />
    <DemoBox />
</X.FlexRow>

<X.FlexRow justifyContent="center">
    <DemoBox />
    <DemoBox />
    <DemoBox />
</X.FlexRow>

<X.FlexRow justifyContent="space-around">
    <DemoBox />
    <DemoBox />
    <DemoBox />
</X.FlexRow>

<X.FlexRow width="75%" justifyContent="space-around">
    <DemoBox />
    <DemoBox />
    <DemoBox />
</X.FlexRow>

<X.FlexRow width="702px" justifyContent="space-around">
    <DemoBox />
    <DemoBox />
    <DemoBox />
</X.FlexRow>

<X.FlexRow gap={24}>
    <DemoBox />
    <DemoBox />
    <DemoBox />
</X.FlexRow>

<X.FlexRow gap={24}>
    <X.P>夜晚的城市灯光璀璨夺目，高楼的霓虹灯在黑夜中闪烁不停，像是星空中的繁星在闪烁。摩天轮缓缓转动，将人们带入一个绚丽多彩的世界，让他们忘记日常的烦忧。购物中心里，五颜六色的商品琳琅满目，人们拿着购物袋匆匆穿梭，寻找着自己心仪的物品。时尚与潮流在这里汇聚，流行的节奏从不停歇。</X.P>
    <X.P>浓郁的咖啡香气弥漫开来，与人们的谈笑声交织成一幅城市特有的画面。街头艺人弹奏着吉他，歌声飘荡在空气中，与城市的脉搏合奏出一曲动人的旋律。</X.P>
</X.FlexRow>
<X.FlexRow gap={24} flex1>
    <X.P>夜晚的城市灯光璀璨夺目，高楼的霓虹灯在黑夜中闪烁不停，像是星空中的繁星在闪烁。摩天轮缓缓转动，将人们带入一个绚丽多彩的世界，让他们忘记日常的烦忧。购物中心里，五颜六色的商品琳琅满目，人们拿着购物袋匆匆穿梭，寻找着自己心仪的物品。时尚与潮流在这里汇聚，流行的节奏从不停歇。</X.P>
    <X.P>浓郁的咖啡香气弥漫开来，与人们的谈笑声交织成一幅城市特有的画面。街头艺人弹奏着吉他，歌声飘荡在空气中，与城市的脉搏合奏出一曲动人的旋律。</X.P>
</X.FlexRow>

<X.FlexRow>
    <div>
        <X.Uli>第一项</X.Uli>
        <X.Uli>第二项</X.Uli>
        <X.Uli>第三项</X.Uli>
    </div>
    <div>
        <X.Oli reset>第一项</X.Oli>
        <X.Oli>第二项</X.Oli>
        <X.Oli>第三项</X.Oli>
    </div>
</X.FlexRow>

<X.FlexRow flex1>
    <div>
        <X.Uli>第一项</X.Uli>
        <X.Uli>第二项</X.Uli>
        <X.Uli>第三项</X.Uli>
    </div>
    <div>
        <X.Oli reset>第一项</X.Oli>
        <X.Oli>第二项</X.Oli>
        <X.Oli>第三项</X.Oli>
    </div>
</X.FlexRow>

<X.Formula text="P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}" />

<X.Formula
    text="
    \begin{cases}
    ax + by = c \\
    dx - ey = f
    \end{cases}
    "
/>
<X.Formula
    text="
    \begin{bmatrix}
    a & b & c \\
    d & e & f \\
    g & h & i
    \end{bmatrix}
    \times
    \begin{bmatrix}
    x & y & z \\
    w & v & u \\
    t & s & r
    \end{bmatrix}
    =
    \begin{bmatrix}
    ax + bw + ct & ay + bv + cu & az + bz + cr \\
    dx + ew + ft & dy + ev + fu & dz + fv + fu \\
    gx + hw + it & gy + hv + iu & gz + hv + ir
    \end{bmatrix}
    "
/>

<X.HighlightBlock bgcolor="gray">
    <X.P>高亮块组件可以嵌套，事实上，每一个*示例*区域都是一个高亮块组件。</X.P>
</X.HighlightBlock>

<X.HighlightBlock>
    <X.P>高亮块中可以使用其他组件。</X.P>
    <X.Formula text="\int_{a}^{b} f(x)dx = \lim_{n \to \infty} \sum_{i=1}^n f(x_i) \cdot \Delta x" />
</X.HighlightBlock>

<X.HighlightBlock bgcolor="red">
    <X.P>我们怀着极大的关切提醒您，当前我们所在地区可能会面临极端天气情况的威胁。气象部门预测，未来几天可能会出现强风、暴雨、甚至可能的洪水等极端气象事件。</X.P>
</X.HighlightBlock>

<X.HighlightBlock bgcolor="blue">
    <X.P>在@`2024-02-01`的更新[/longtime/updates/]@中加入了蓝色背景。</X.P>
</X.HighlightBlock>

<X.Table
    fromText={`
    学号|学生姓名|成绩
    202101|Alice|97
    202102|Bob|86
    202103|Candy|80
    `}
/>

<X.Table>
    <tr>
        <th colSpan={3}>汇总表</th>
    </tr>
    <tr>
        <th>类别</th>
        <th>项目</th>
        <th>金额</th>
    </tr>
    <tr>
        <td rowSpan={2}>通讯费</td>
        <td>座机</td>
        <td><X.P>`107.6`</X.P></td>
    </tr>
    <tr>
        <td>移动电话</td>
        <td><X.P>`658.2`</X.P></td>
    </tr>
    <tr>
        <td rowSpan={3}>餐补</td>
        <td>早餐</td>
        <td><X.P>`180.4`</X.P></td>
    </tr>
    <tr>
        <td>午餐</td>
        <td><X.P>`477.2`</X.P></td>
    </tr>
    <tr>
        <td>晚餐</td>
        <td><X.P>`590.0`</X.P></td>
    </tr>
    <tr>
        <td colSpan={2}>合计</td>
        <td><X.P>`2013.4`</X.P></td>
    </tr>
</X.Table>

<X.CodeBlock language="python" code='with open("./tool.js","r") as f:' />

with open("./tool.js","r") as f:

<X.CodeBlock
    language="cpp"
    code={String.raw`
    #include <iostream>
    using namespace std;
    const PI = 3.14159;
    int main(int argc, char *argv[]) {
        printf("\t1 + 2 is %d \n",3);
        /* An annoying "Hello World" example */
        for (auto i = 0; i < 0xFFFF; i++)
            cout << "Hello, World!" << endl;

        char c = '\n';
        unordered_map <string, vector<string>> m;
        m["key"] = "\\"; // this is an error

        return -2e3 + 12l;
    }
    `}
/>

#include <iostream>
using namespace std;
const PI = 3.14159;
int main(int argc, char *argv[]) {
    printf("\t1 + 2 is %d \n",3);
    /* An annoying "Hello World" example */
    for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;

    char c = '\n';
    unordered_map <string, vector<string>> m;
    m["key"] = "\\"; // this is an error

    return -2e3 + 12l;
}