简单介绍下主题支持的标签写法，其中一部分为 VitePress 默认支持的标签，同时为了保持主题的简洁和统一性，仅支持一些基础的标签，若有额外或更高级的需求，可通过自定义组件实现，也可参考 VitePress 文档中的 高级配置 来实现。

基础标签

兼容绝大部分 Markdown 基础标签，详情可前往 Markdown 使用指南 - 基础语法 一文查看。

Note

默认标题

::: info
一个没啥用的通知
:::

::: tip
这是一个善意的提醒
:::

::: warning
在警告变为错误之前是没人关心的
:::

::: danger
这下你注意到了吧
:::

渲染结果
::: info 一个没啥用的通知 :::

::: tip 这是一个善意的提醒 :::

::: warning 在警告变为错误之前是没人关心的 :::

::: danger 这下你注意到了吧 :::

自定义标题

可以通过在标签的 type 之后附加文本来设置自定义标题。

::: danger STOP
这里的操作很危险，请不要这么做
:::

渲染结果
::: danger STOP 这里的操作很危险，请不要这么做 :::

Tabs

在同一块区域切换不同的内容，有些时候确实有用。

注意：Tabs 组件每一项 == 后面的内容 不能重复。

::: tabs
=== tab a
别看第二项
=== tab 不要去学
删库跑路 🏃‍♂️
```sh
sudo rm -rf /*

:::


**渲染结果**  
::: tabs

== tab a

别看第二项

== 不要去学

删库跑路 🏃‍♂️

```sh
sudo rm -rf /*

:::

TimeLine

这个世界有两个纬度：时间、事件。

::: timeline 2024-02-29

难得的疯狂星期四，人太多，没吃上。

:::

::: timeline 2024-03-07

现在正在写这个该死的文档

:::

渲染结果
::: timeline 2024-02-29

难得的疯狂星期四，人太多，没吃上。

:::

::: timeline 2024-03-07

现在正在写这个该死的文档

:::

Details

折起来的内容真的要打开看吗？

::: details 点我
这是一个折叠的内容
:::

渲染结果
::: details 点我 这是一个折叠的内容 :::

Card

一个简单的卡片，没什么特别的

:::card
一些内容
:::

渲染结果
:::card 一些内容 :::

Radio

这是个 … 收音机？

::: radio checked
啊，被选中了
:::

::: radio
咦，我怎么没选中
:::

渲染结果
::: radio checked 啊，被选中了 :::

::: radio 咦，我怎么没选中 :::

LinkCard

链接还是放在卡片里面好看。

由于 VitePress 的自定义功能有限，因此链接卡片采取自定义组件的方式。

<LinkCard url="https://www.imsyy.top" />

可配置项

参数必填性说明
url必填跳转地址
title选填如果未提供，将会自动抓取页面的标题
desc选填如果未提供，将会自动抓取页面的描述
icon选填如果未提供，将会自动抓取页面的图标链接

渲染结果

数学公式

主题目前默认支持 MathJax，基于 markdown-it-mathjax3 插件。

行内使用

行内使用 $ 包裹数学公式，例如：

这是平方差公式：$a^2 - b^2 = (a + b)(a - b)$

渲染结果
这是平方差公式：$a^2 - b^2 = (a + b)(a - b)$

块级使用

块级使用 $$ 包裹数学公式，例如：

这是泰勒公式：

$$
f(x) = f(a) + f'(a)(x-a) + \frac{f''(a)}{2!}(x-a)^2 + \cdots + \frac{f^{(n)}(a)}{n!}(x-a)^n + R_n(x)
$$

渲染结果
这是泰勒公式：

$$ f(x) = f(a) + f’(a)(x-a) + \frac{f”(a)}{2!}(x-a)^2 + \cdots + \frac{f^{(n)}(a)}{n!}(x-a)^n + R_n(x) $$

表格中使用

在表格中使用数学公式，需要使用 \( \) 包裹，例如：

| 角度 |              正弦(sin)               |              余弦(cos)               |              正切(tan)               |
| :--: | :----------------------------------: | :----------------------------------: | :----------------------------------: |
|  0°  |          $sin(0^\circ) = 0$          |          $cos(0^\circ) = 1$          |          $tan(0^\circ) = 0$          |
| 30°  |    $sin(30^\circ) = \frac{1}{2}$     | $cos(30^\circ) = \frac{\sqrt{3}}{2}$ | $tan(30^\circ) = \frac{1}{\sqrt{3}}$ |
| 45°  | $sin(45^\circ) = \frac{\sqrt{2}}{2}$ | $cos(45^\circ) = \frac{\sqrt{2}}{2}$ |         $tan(45^\circ) = 1$          |
| 60°  | $sin(60^\circ) = \frac{\sqrt{3}}{2}$ |    $cos(60^\circ) = \frac{1}{2}$     |      $tan(60^\circ) = \sqrt{3}$      |
| 90°  |         $sin(90^\circ) = 1$          |         $cos(90^\circ) = 0$          |  $tan(90^\circ) = \text{undefined}$  |

渲染结果
（包含数学公式的表格）

角度正弦(sin)余弦(cos)正切(tan)
0°$sin(0^\circ) = 0$$cos(0^\circ) = 1$$tan(0^\circ) = 0$
30°$sin(30^\circ) = \frac{1}{2}$$cos(30^\circ) = \frac{\sqrt{3}}{2}$$tan(30^\circ) = \frac{1}{\sqrt{3}}$
45°$sin(45^\circ) = \frac{\sqrt{2}}{2}$$cos(45^\circ) = \frac{\sqrt{2}}{2}$$tan(45^\circ) = 1$
60°$sin(60^\circ) = \frac{\sqrt{3}}{2}$$cos(60^\circ) = \frac{1}{2}$$tan(60^\circ) = \sqrt{3}$
90°$sin(90^\circ) = 1$$cos(90^\circ) = 0$$tan(90^\circ) = \text{undefined}$

流程图

流程图及时序图可自行安装对应插件以实现，受限于打包大小，主题将不会内置。

自定义标签

如果上方的各类标签不能满足你的需求，你可以自行添加自定义标签。

[Markdown-it 如何自定义文中的标签]