在 Hexo 中
NOTE 提示块
基本语法
md
{% note success %}
[内容]
{% endnote %}
提示块可以实现折叠
md
{% note success [标题] %}
[内容]
{% endnote %}
更多风格
md
{% note default %}
一个 default 提示
{% endnote %}
{% note primary %}
一个 primary 提示
{% endnote %}
{% note success %}
一个 success 提示
{% endnote %}
{% note info %}
一个 info 提示
{% endnote %}
{% note warning %}
一个 warning 提示
{% endnote %}
{% note danger %}
一个 danger 提示
{% endnote %}
Tabs 标签
用于在文章内设置选项卡
md
{% tabs 标签, 1 %}
<!-- tab -->
**选项卡 1**
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab 标签三 -->
**选项卡 3** , 名字为 `TAB三`
<!-- endtab -->
{% endtabs %}
第一行 {% tabs 标签, 1 %}
设置每个子标签在不指定标题时显示为 标签 + 数字序号
1
表示默认展开第 1 个选项卡,如果是 -1
则只显示标签标题,隐藏内容,点击可以显示内容
在 Github 中
在Github上使用特殊markdown来强调警报样式内容块中的内容
md
> [!NOTE]
> 强调用户在浏览时应考虑的信息。
> [!TIP]
> 可选信息,可帮助用户更成功。
> [!IMPORTANT]
> 用户成功所必需的关键信息。
> [!WARNING]
> 由于潜在风险,需要用户立即注意的关键内容。
> [!CAUTION]
> 行动的负面潜在后果。
在 VitePress 中
语法高亮
VitePress 提供由 Shiki 提供支持的语法高亮,以及行高亮等附加功能: 输入
md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
输出
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
除了单行之外,还可以指定多个单行、多行,或两者均指定:
- 多行:例如
{5-8}、{3-10}、{10-17}
- 多个单行:例如
{4,7,9}
- 多行与单行:例如
{4,7-13,16,23-27,40}
也可以使用 // [!code highlight]
注释实现行高亮。 输入
md
```js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
输出
js
export default {
data() {
return {
msg: 'Highlighted!'
}
}
}
自定义容器
输入
md
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::
输出
INFO
This is an info box.
TIP
This is a tip.
WARNING
This is a warning.
DANGER
This is a dangerous warning.
Details
This is a details block.
IMPORTANT
VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。它们和自定义容器的渲染方式相同。
标题锚点
# 使用自定义锚点 {#my-anchor}
这允许将标题链接为 #my-anchor
,而不是默认的 #使用自定义锚点
代码块中聚焦
在某一行上添加 // [!code focus]
注释将聚焦它并模糊代码的其他部分。
此外,可以使用 // [!code focus:<lines>]
定义要聚焦的行数。 输入
md
```js
export default {
data () {
return {
msg: 'Focused!'
}
}
}
```
输出
export default {
data() {
return {
msg: 'Focused!'
}
}
}
参考
在 Hexo 中使用 NOTE 提示块
GitHub上的Markdown警示样式内容块
Markdown 扩展 | VitePress