This commit is contained in:
mei 2025-01-01 21:18:33 +08:00
parent 7c17b0dcd1
commit 1fcdbad9ae
2 changed files with 144 additions and 4 deletions

View File

@ -1,4 +1,4 @@
## 在 Hexo 中 ## 在 Hexo 中 {#Hexo}
### NOTE 提示块 ### NOTE 提示块
#### 基本语法 #### 基本语法
```md ```md
@ -57,7 +57,7 @@
第一行 `{% tabs 标签, 1 %}` 设置每个子标签在不指定标题时显示为 `标签 + 数字序号` 第一行 `{% tabs 标签, 1 %}` 设置每个子标签在不指定标题时显示为 `标签 + 数字序号`
`1` 表示默认展开第 1 个选项卡,如果是 `-1` 则只显示标签标题,隐藏内容,点击可以显示内容 `1` 表示默认展开第 1 个选项卡,如果是 `-1` 则只显示标签标题,隐藏内容,点击可以显示内容
## 在 Github 中 ## 在 Github 中 {#Github}
在Github上使用特殊markdown来强调警报样式内容块中的内容 在Github上使用特殊markdown来强调警报样式内容块中的内容
```md ```md
> [!NOTE] > [!NOTE]
@ -76,6 +76,143 @@
> 行动的负面潜在后果。 > 行动的负面潜在后果。
``` ```
## 在 VitePress 中 {#VitePress}
### 语法高亮
VitePress 提供由 [Shiki](https://github.com/shikijs/shiki) 提供支持的语法高亮,以及行高亮等附加功能:
**输入**
````md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
````
**输出**
```js{4}
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!' // [!code highlight]
}
}
}
```
````
**输出**
```js
export default {
data() {
return {
msg: 'Highlighted!' // [!code highlight]
}
}
}
```
### 自定义容器
**输入**
```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!' // [!code focus]
}
}
}
```
````
**输出**
```
export default {
data() {
return {
msg: 'Focused!' // [!code focus]
}
}
}
```
## 参考 ## 参考
[在 Hexo 中使用 NOTE 提示块](https://homulilly.com/post/hexo-use-note-and-tabs-block.html) [在 Hexo 中使用 NOTE 提示块](https://homulilly.com/post/hexo-use-note-and-tabs-block.html)
[GitHub上的Markdown警示样式内容块](https://typorachina.com/articles/1714104012888.html) [GitHub上的Markdown警示样式内容块](https://typorachina.com/articles/1714104012888.html)
[Markdown 扩展 | VitePress](https://vitepress.dev/zh/guide/markdown)

View File

@ -32,7 +32,7 @@ export default {
} }
``` ```
## Custom Containers ### 自定义容器
**Input** **Input**
@ -80,6 +80,9 @@ This is a dangerous warning.
This is a details block. This is a details block.
::: :::
> [!IMPORTANT]
> VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。它们和自定义容器的渲染方式相同。
## More ## More
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown). Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).