### md基本使用
```
标题使用 // [!code highlight]
# + h1/h2/h3/h4/h5/h6
各种字体 粗体/斜体/删除线/下划线/加粗/斜体/代码块 // [!code highlight]
**bold**
*italic*
strikethrough
***italic***
**italic**
`code`
list表示 // [!code highlight]
- list1
- list2
- list3
1. numbered
2. numbered
3. numbered
- 123
- 456
- 789
引用 // [!code highlight]
>我是引用
分割线 // [!code highlight]
---
超链接 // [!code highlight]
[超链接](www.baidu.com)
[hover有title的超链接](www.baidu.com "百度")
引用链接 // [!code highlight]
引用链接由2部分组成[a][b] a:是链接文案 b则是一个引用，其中[b]可以在md文档的任意位置编写，格式为 ： [b]:url "title"
[我是百度引用][百度引用]
[我是element引用][element]
[百度引用]: www.baidu.com "百度"
[element]: element.eleme.cn/#/zh-CN "element"
自动链接 // [!code highlight]
百度网址：www.baidu.com
锚点 // [!code highlight]
与dom差不多，都是弄个id，点了跳过去，要跳的元素，用标签包起来，然后赋值一个id="冒点名"即可或者在最后使用{#id}
[锚点](#custom)
[锚点2](#abcde)
#h3 {#custom}
```
---
### 其他元素(图片/表格/字体(颜色，大小，字体)/潜入网址和视频)
1. 图片
```
简单图片 // [!code highlight]
引用图片 // [!code highlight]
![图片alt][引用目标]
图片链接，点了图片跳转到其他url去 // [!code highlight]
[](图片链接地址 "链接title")
```
简单图片：
引用图片：
![我是新图][引用目标图]
图片链接：
[](www.baidu.com "链接title")
[引用目标图]: gips1.baidu.com/it/u=165838… "新图"
2. 表格
里面的冒号代表对其方式
```
|:---:|:---|---:|
|第一列是居中的|第二列是居左的|第三列是居右的|
| header1 | header2 | header3 |
```
| header1 | header2 |header3 |
|:-----:|:----|----:|
| cell1 | cell2 |cell3 |
| cell4 | cell5 | cell6 |
3. 文字/颜色样式
```js
文字颜色： // [!code highlight]
文字颜色
字体大小： // [!code highlight]
字体大小为1
字体大小为2
字体大小为3
字体： // [!code highlight]
我是黑体字
我是宋体字
我是楷体字
我是微软雅黑字
我是fantasy字
我是Helvetica字
```
文字颜色
字体大小为1
我是黑体字
4. 嵌入(网址/视频等等)
```js
嵌入网址： // [!code highlight]
```
---
### 挺实用的高级扩展玩法 {#custom}
1. Emoji图标 :100: 更多图标请参考[图标集合](github.com/markdown-it…)
**输入**
```
:tada: :100:
```
**输出**
:tada: :100:
2. 代码块主题： info tip warning danger details
**输入**
::: code-group
```js [info块]
:::info 自定义title
This is an info box.
// ::: 使用时此行需要去掉注释
```
```js [tip块]
::: tip
This is an tip box.
// ::: 使用时此行需要去掉注释
```
```js [warning块]
::: warning
This is a warning.
// ::: 使用时此行需要去掉注释
```
```js [danger块]
::: danger
This is a dangerous warning.
// ::: 使用时此行需要去掉注释
```
```js [details块]
::: details
This is a details block.
// ::: 使用时此行需要去掉注释
```
```js [details块]
::: details 点我看看你
console.log("hello world");
// ::: 使用时此行需要去掉注释
```
:::
**输出**
::: info 自定义title
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.
:::
::: details 展开式代码块的样子
```js
console.log("hello world");
```
:::
3. 代码块高亮 ``` + js/html/ts
js代码块：
```js
export default {
name: 'MyComponent',
// ...
}
```
html代码块：
```html
-
{{ todo.text }}
```
4. 代码块行高亮,选择性某行或n-m行高亮： ```+ `js/ts/html{n,n-m}`
```js{1,4,6-8}
export default {
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum'
}
}
}
```
5. 代码中通过注释设置高亮 // [!code highlight]
```js
export default {
data () {
return {
msg: 'Highlighted!' // [!code highlight]
}
}
}
```
6. 代码块某处常显示，其余部分focus后正常显示 // [!code focus]
```js
export default {
data () {
return {
msg: 'Focused!' // [!code focus]
}
}
}
```
7. 通过设置// [!code --] 和 // [!code ++] 来控制代码块的变化（增加或减少），类似于git比较的diff效果
```js
export default {
data () {
return {
msg: 'Removed' // [!code --]
msg: 'Added' // [!code ++]
}
}
}
```
8. 通过设置// [!code error] 和 // [!code warning] 来控制代码块的颜色，警告色或者错误色...
```js
export default {
data () {
return {
msg: 'Error', // [!code error]
msg: 'Warning' // [!code warning]
}
}
}
```
9. 通过设置:::code-group 包起来 可以有个tab切换不同的内容
::: 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
```
```html [我是html]
我是html
```
:::
10. 可以通过<<<引用其他文件来显示代码块，@为vitepress项目设置的srcDir为根目录,其中{n,n-m} 代表高亮哪几行
```
<<< @/filepath
<<< ../filepath
<<< @/jsDir/abc.js{2,4-5}
<<< ../snippets/snippet.js
```
<<< @/jsDir/abc.js{2,4-5}
11. 使用::: code-group分组时，也可以引入，每引入一个就是一个tab，默认会以引入的文件名作为tab名，可以在末尾自定义名字[自定义名]
```js
::: code-group
<<< @/jsDir/abc.js{2,4-5}
<<< @/jsDir/abc.js{3} [自定义名字]
:::
```
::: code-group
<<< @/jsDir/abc.js{2,4-5}
<<< @/jsDir/abc.js{3} [自定义名字]
:::
12. 还可以在md文档中嵌套其他md文档，
```js
```
具体可参考：[跳转](vitepress.dev/guide/markd…)
同时可以指定引用的行数，支持：`{3,}, {,10}, {1,10}`
13. 可以配置图片懒加载，需要配置`.vitepress/config.mjs`
```
export default {
markdown: {
image: {
// image lazy loading is disabled by default
lazyLoading: true
}
}
}
```
14. 在末尾使用{#flag} ,即可设置锚点，然后在其他地方引用(#flag) 即可跳转到锚点处
