J's Docsmd扩展语法
符号表情
:tada:=> 🎉:100:=> 💯- 更多表情↗
状态提示框
语法:
md
::: [tip|info|warning|danger|detail] [标题]
This is a tip
:::
小提示
This is a tip
INFO
This is an info box
WARNING
This is a warning
DANGER
This is a dangerous warning
可折叠
Click me to view the code
js
console.log('Hello, VitePress!')
Details
This is a details block.
重点高亮代码行
- more...
- 指定一行
md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
指定范围
md
```js{3-5}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
代码备注 // ![code xxx]
代码高亮
- 输入:
md
```js
export default {
data () {
return {
msg: 'Highlighted!' // [!code hl] (将[!code hl] 之间的空格减为一个后生效)
}
}
}
```
- 渲染:
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
聚焦代码
// [!code focus]
js
export default {
data () {
return {
msg: 'Focused!'
}
}
}
加减代码
// [!code --]// [!code --]
js
export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}
代码错误提示
// [!code error]// [!code warning]
js
export default {
data () {
return {
msg: 'Error',
msg: 'Warning'
}
}
}
小提示
注意[!code ++] 之间的空格只有一个, 否则会失效
代码标签页
- 输入:
md
::: code-group
```js [config.js]
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default config
```
```ts [config.ts]
import type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default config
```
:::
- 渲染:
js
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default config
ts
import type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default config
引入其他md文件中的内容
- 语法:
<!--@include: [文件路径]--> - 跳转文档主页
- 渲染: