markdown

windShadow
69 阅读4分钟

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]

[超链接](https://www.baidu.com)

[hover有title的超链接](https://www.baidu.com "百度")

  


引用链接 // [!code highlight]

引用链接由2部分组成[a][b] a:是链接文案 b则是一个引用，其中[b]可以在md文档的任意位置编写，格式为 ： [b]:url "title"

[我是百度引用][百度引用]

[我是element引用][element]

  


[百度引用]: https://www.baidu.com "百度"

[element]: https://element.eleme.cn/#/zh-CN "element"

  


自动链接 // [!code highlight]

百度网址：<https://www.baidu.com>

  


锚点 // [!code highlight]

与dom差不多，都是弄个id，点了跳过去，要跳的元素，用标签包起来，然后赋值一个id="冒点名"即可或者在最后使用{#id}

[锚点](#custom)

[锚点2](#abcde)

<a id="abcde">冒点2位置</a>

#h3 {#custom}

其他元素(图片/表格/字体(颜色，大小，字体)/潜入网址和视频)

  1. 图片


简单图片 // [!code highlight]

![图片alt](图片地址 "图片title")

  


引用图片 // [!code highlight]

![图片alt][引用目标]

  


图片链接，点了图片跳转到其他url去 // [!code highlight]

[![图片alt](图片地址 "图片title")](图片链接地址 "链接title")

简单图片：

我是alt

引用图片：

我是新图

图片链接：

图片链接

  1. 表格

里面的冒号代表对其方式


|:---:|:---|---:|

|第一列是居中的|第二列是居左的|第三列是居右的|

| header1 | header2 | header3 |

| header1 | header2 |header3 |

|:-----:|:----|----:|

| cell1 | cell2 |cell3 |

| cell4 | cell5 | cell6 |

  1. 文字/颜色样式

文字颜色： // [!code highlight]

<font color="#dd0000">文字颜色</font>

字体大小： // [!code highlight]

<font size="1">字体大小为1</font>

<font size="2">字体大小为2</font>

<font size="3">字体大小为3</font>

字体： // [!code highlight]

<font face="黑体">我是黑体字</font>

<font face="宋体">我是宋体字</font>

<font face="楷体">我是楷体字</font>

<font face="微软雅黑">我是微软雅黑字</font>

<font face="fantasy">我是fantasy字</font>

<font face="Helvetica">我是Helvetica字</font>

文字颜色

字体大小为1

我是黑体字

  1. 嵌入(网址/视频等等)

嵌入网址： // [!code highlight]

<iframe src="网址/视频地址等等" width="800" height="500" allowfullscreen></iframe>

<iframe src="https://vitepress.dev/zh/" width="800" height="500" allowfullscreen></iframe>

挺实用的高级扩展玩法 {#custom}

  1. Emoji图标 :100: 更多图标请参考图标集合

输入


:tada: :100:

输出

:tada: :100:

  1. 代码块主题： info tip warning danger details

输入

::: code-group


:::info 自定义title

This is an info box.

// ::: 使用时此行需要去掉注释



::: tip

This is an tip box.

// ::: 使用时此行需要去掉注释



::: warning

This is a warning.

// ::: 使用时此行需要去掉注释



::: danger

This is a dangerous warning.

// ::: 使用时此行需要去掉注释



::: details

This is a details block.

// ::: 使用时此行需要去掉注释



::: 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 展开式代码块的样子


console.log("hello world");

:::

  1. 代码块高亮 ``` + js/html/ts

js代码块：


export default {

name: 'MyComponent',

// ...

}

html代码块：


<ul>

<li v-for="todo in todos" :key="todo.id">

{{ todo.text }}

</li>

</ul>

  1. 代码块行高亮,选择性某行或n-m行高亮： ```+ js/ts/html{n,n-m}


export default {

data () {

return {

msg: `Highlighted!

This line isn't highlighted,

but this and the next 2 are.`,

motd: 'VitePress is awesome',

lorem: 'ipsum'

}

}

}

  1. 代码中通过注释设置高亮 // [!code highlight]


export default {

data () {

return {

msg: 'Highlighted!' // [!code highlight]

}

}

}

  1. 代码块某处常显示，其余部分focus后正常显示 // [!code focus]


export default {

data () {

return {

msg: 'Focused!' // [!code focus]

}

}

}

  1. 通过设置// [!code --] 和 // [!code ++] 来控制代码块的变化（增加或减少），类似于git比较的diff效果


export default {

data () {

return {

msg: 'Removed' // [!code --]

msg: 'Added' // [!code ++]

}

}

}
  1. 通过设置// [!code error] 和 // [!code warning] 来控制代码块的颜色，警告色或者错误色...

export default {

data () {

return {

msg: 'Error', // [!code error]

msg: 'Warning' // [!code warning]

}

}

}
  1. 通过设置:::code-group 包起来 可以有个tab切换不同的内容

::: code-group


/**

* @type {import('vitepress').UserConfig}

*/

const config = {

// ...

}

  


export default config



import type { UserConfig } from 'vitepress'

  


const config: UserConfig = {

// ...

}

  


export default config



<div>

<h1>我是html</h1>

</div>

:::

  1. 可以通过<<<引用其他文件来显示代码块，@为vitepress项目设置的srcDir为根目录,其中{n,n-m} 代表高亮哪几行

<<< @/filepath

<<< ../filepath

<<< @/jsDir/abc.js{2,4-5}

<<< ../snippets/snippet.js

<<< @/jsDir/abc.js{2,4-5}

  1. 使用::: code-group分组时，也可以引入，每引入一个就是一个tab，默认会以引入的文件名作为tab名，可以在末尾自定义名字[自定义名]

::: code-group

  


<!-- 默认使用文件名作为Tab名 -->

<<< @/jsDir/abc.js{2,4-5}

  


<!-- 可以通过[]自定义tab名 -->

<<< @/jsDir/abc.js{3} [自定义名字]

  


:::

::: code-group

<<< @/jsDir/abc.js{2,4-5}

<<< @/jsDir/abc.js{3} [自定义名字]

:::

  1. 还可以在md文档中嵌套其他md文档，

<!--@include: ./parts/basics.md{3,}-->

具体可参考：跳转

同时可以指定引用的行数，支持：{3,}, {,10}, {1,10}

  1. 可以配置图片懒加载，需要配置.vitepress/config.mjs

export default {

markdown: {

image: {

// image lazy loading is disabled by default

lazyLoading: true

}

}

}
  1. 在末尾使用{#flag} ,即可设置锚点，然后在其他地方引用(#flag) 即可跳转到锚点处
avatar
文章
阅读
粉丝