朔风

Appearance

章节导航

VitePress 样式练兵场 ​

页面跳转 ​

数据库

shell
[数据库](/notes/databases/index)

图片 ​

shell
![](/public/vue/ScreenShot_2025-11-24_155006_221.png)

卡片 ​

样式一： css 样式 ​

卡片标题

这里是卡片内容，可以使用 加粗、`代码` 等 Markdown 语法。

shell
<div style="background: #f5f7fa; border-radius: 8px; padding: 16px 20px; margin: 12px 0; border-left: 4px solid #1890ff;">
  <h4 style="margin-top: 0;">卡片标题</h4>
  <p>这里是卡片内容，可以使用 <strong>加粗</strong>、`代码` 等 Markdown 语法。</p>
</div>

样式一： MD 语法 ​

📌 卡片标题
这里是卡片内容，支持普通 Markdown 语法。

  • 列表项 1
  • 列表项 2 也可嵌入代码：console.log('Hello')
shell
> **📌 卡片标题**  
> 这里是卡片内容，支持普通 Markdown 语法。
> - 列表项 1
> - 列表项 2
    > 也可嵌入代码：`console.log('Hello')`

自定义容器 ​

info 信息框 ​

信息

这是一个信息框

html
::: info 信息框
这是一个信息框
:::

tip 提示框 ​

提示框

这是一个提示框

html
::: tip 提示框
这是一个提示框
:::

warning 警告框 ​

警告框

这是一个警告框

html
::: warning 警告框
这是一个警告框
:::

danger 危险警告框 ​

危险警告框

这是一个危险警告框 ！

html
::: danger 危险警告框
这是一个危险警告框 ！
:::

details 可折叠的详情框 ​

可折叠

这是一个可折叠的详情框

html
::: details 可折叠
这是一个可折叠的详情框
:::