Vitepress 主题测试贴

前提

理论上任何工具写出来的markdown(下文简称md)文件都能用，但是如果是按照以下方式写的话，可能表现力会丰富很多

查看环境

假设你是mac？！

• 安装 brew 这个可以装很多东西，正常是网上搜一句命令就装了

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 安装 node ，有brew的情况下， 就是 brew info node 一句话就行了

1

brew info node

• 安装 vitepress 本文重点 前两个都有都情况下 一句话就行了 npm install -g vitepress

1

npm install -g vitepress

到你的md目录执行 vitepress dev . 就能查看文档大致的样子

vitepress-markdown 特性

表格

提示

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger what??
This is a dangerous warning
:::

::: tip This is a tip :::

::: warning This is a warning :::

::: danger what?? This is a dangerous warning :::

代码高亮

1
2
3
4

export default {
  name: 'MyComponent',
  // ...
}

emoji表情

1

:tada: :100:

:tada: :100:

mermaid

graph LR;
    K([...........<img src='/images/K.png' width='60' >...........])-.->G((...........<img id='git' src='/images/Octocat.png' width='50' >...........));
    H([...........<img id='helm' src='/images/helm.png' width='60' >...........])-.->G
    G-->A;
    A(...........<img src='/images/argo-cd.png' width='60' >...........)-->D(...........<img src='/images/ocp.png' width='60' >...........);
classDef img fill:none,color:transparent,stroke:none,borderRadius:50px
class G,D,A,K,H,B img
click K "https://kustomize.io/" _blank
click G "http://www.github.com" "This is a link" _blank

Math

引用mdrkdown文档

语法：<!--@include: /path/filename.md-->

规范与建议

便于效果一致，目前发现页面标题从 ## h2 开始使用可以获得最佳展示效果

脚注测试

这是一个脚注¹的引用。