Mistj's Digital Garden

Appearance

2. markdown扩展

vitepress内置了一些扩展

锚点 ​

vitepress默认开启锚点, 锚点的值默认和当前的标题#名字一致。但是可以自定义锚点。

## 这是个标题 {#my-anchor}
## 这是个标题 {#my-anchor}

链接 ​

可以跳链接、锚点。

markdown
[Home](/) <!-- sends the user to the root index.md -->
[foo](/foo/) <!-- sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- 跳转index目录的#heading锚点 -->
[bar - three](../bar/three) <!-- you can omit extension -->
[bar - three](../bar/three.md) <!-- you can append .md -->
[bar - four](../bar/four.html) <!-- or you can append .html -->
[Home](/) <!-- sends the user to the root index.md -->
[foo](/foo/) <!-- sends the user to index.html of directory foo -->
[foo heading](./#heading) <!-- 跳转index目录的#heading锚点 -->
[bar - three](../bar/three) <!-- you can omit extension -->
[bar - three](../bar/three.md) <!-- you can append .md -->
[bar - four](../bar/four.html) <!-- or you can append .html -->

支持github风格的table ​

markdown
| Tables        |      Are      |  Cool |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |
| Tables        |      Are      |  Cool |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

支持emoji ​

:tada: :100:
:tada: :100:

支持toc ​

[[toc]]
[[toc]]

需要再config里进行相关配置,例如:

js
markdown: {  
  toc: {  
    level: [1,2,3,4,5]  
  }  
}
markdown: {  
  toc: {  
    level: [1,2,3,4,5]  
  }  
}

Custom Containers ​

有点类似obsidian的callout。

::: 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.
:::

支持代码某行高亮 ​

js
// ```js{1,3-4}  ...```
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
// ```js{1,3-4}  ...```
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

代码焦距 ​

非常酷炫。

js
export default {
  data () {
    return {
      msg: 'Focused!' // [!code  focus]
    }
  }
}
export default {
  data () {
    return {
      msg: 'Focused!' // [!code  focus]
    }
  }
}

代码块 code diff 以及warning ​

js
export default {
  data () {
    return {
      msg: 'Removed' // [!code  --]
      msg: 'Added' // [!code  ++]
    }
  }
}
export default {
  data () {
    return {
      msg: 'Removed' // [!code  --]
      msg: 'Added' // [!code  ++]
    }
  }
}

代码警告 [!code error] 和 [!code warning]

js
export default {
  data () {
    return {
      msg: 'Error', // [!code  error]
      msg: 'Warning' // [!code  warning]
    }
  }
}
export default {
  data () {
    return {
      msg: 'Error', // [!code  error]
      msg: 'Warning' // [!code  warning]
    }
  }
}

行号支持 ​

js
export default {
  markdown: {
    lineNumbers: true
  }
}
export default {
  markdown: {
    lineNumbers: true
  }
}

code group ​

使用::: code-group 包裹住多段代码，可实现如下效果：

高级配置 ​

VitePress使用markdown-it作为Markdown渲染器。上面的很多扩展都是通过自定义插件实现的。您可以使用. vitepress/config.js中的markdown选项进一步自定义markdown-it实例：

js
const anchor = require('markdown-it-anchor')
module.exports = {
  markdown: {
    // options for markdown-it-anchor
    // https://github.com/valeriangalliat/markdown-it-anchor#usage
    anchor: {
      permalink: anchor.permalink.headerLink()
    },
    // options for @mdit-vue/plugin-toc
    // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
    toc: { level: [1, 2] },
    config: (md) => {
      // use more markdown-it plugins!
      md.use(require('markdown-it-xxx'))
    }
  }
}
const anchor = require('markdown-it-anchor')
module.exports = {
  markdown: {
    // options for markdown-it-anchor
    // https://github.com/valeriangalliat/markdown-it-anchor#usage
    anchor: {
      permalink: anchor.permalink.headerLink()
    },
    // options for @mdit-vue/plugin-toc
    // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
    toc: { level: [1, 2] },
    config: (md) => {
      // use more markdown-it plugins!
      md.use(require('markdown-it-xxx'))
    }
  }
}