参考 ¶

个性化

图标 ¶

https://gitee.com/senlypan/markdown-icon
https://blog.csdn.net/weixin_43916074/article/details/124514922
https://zhuanlan.zhihu.com/p/366213520
https://vitepress.vuejs.org/guide/markdown#emoji
https://apps.timwhitlock.info/emoji/tables/unicode#block-4-enclosed-characters

makedown ¶

展开缩小

https://github.com/1006008051/vitepress-demoblock/blob/main/src/demoblock/demo.vue
https://zhuanlan.zhihu.com/p/457732864

导入代码片段 ¶

https://vitepress.dev/zh/guide/markdown#import-code-snippets

代码展开 ¶

https://github.com/1006008051/vitepress-demoblock/blob/main/src/demoblock/demo.vue

图片使用 ¶

md中加载图片方式1

[!images](./images/xx.png)

md中加载图片方式2

html

<img src="" style="width:200px;height:200px;">

md中加载图片方式3 在 md 中引入svg，然后加载图片

<script setup>
import graphSvg from '../images/graph.svg?raw'
import bundlerSvg from '../images/bundler.svg?raw'
import esmSvg from '../images/esm.svg?raw'
</script>
<svg-image :svg="graphSvg" />
<svg-image :svg="bundlerSvg" />
<svg-image :svg="esmSvg" />