boxmoe_header_banner_img

Hello! 欢迎来到灵阈研都!

加载中

纸鸢使导读

VitePress的MD语法 – 文档汇总


avatar
白木 2021年10月1日 51

https://vanchkong.github.io/VitePressCN/guide/markdown
////  以下 – 正在编辑中常用的  ////
<br><br><br>
&emsp;<span style=”border-bottom: thick double rgb(206, 92, 50);”>下划线内容</span>&emsp;
<span style=”border-bottom: thick double rgb(12, 163, 233);”>1●</span>&emsp;
<br>
<span style=”border-bottom: thick double rgb(12, 233, 189);”>1●</span>&emsp;
<br>
::: tip – 📄
#### 默认标题
##### <span style=”border-bottom: 1px solid red;”>二级标题</span>
<br>
:::
[路径名称](index.html#导出){target=”_blank”}
““ts:line-numbers
““
<Badge type=”warning” text=”概述/特别说明专用” />
////  以上 – 正在编辑中常用的  ////
# [SCUM服务器说明文档](https://md.xalaok.top/docs/syntax/detailed/list/){target=”_blank”}
Vitepress文本的说明文档:https://vitepress.dev/zh/guide/markdown
#### 标题上显示一个小文字框
# Title <Badge type=”info” text=”灰色” />
# Title <Badge type=”tip” text=”蓝色” />
# Title <Badge type=”warning” text=”黄色” />
# Title <Badge type=”danger” text=”红色” />
#### <span style=”border-bottom: 1px solid red;”>默认标题</span>
##### <span style=”border-bottom: 1px solid red;”>二级标题</span>
<br>换行
**粗体**
***加粗斜体***
*斜体*或_斜体_
~~删除线~~
<u>下划线 underline</u>
<span style=”border-bottom: 1px solid red;”>单下划线</span>
<span style=”border-bottom: thick double #32a1ce;”>双下划线</span>
<span style=”border-bottom: 2px dotted red;”>下划虚线</span>
上标:O<sup>2</sup>
下标:H<sub>2</sub>O
&ensp; or &#8194;表示一个半角的空格
&emsp; or &#8195;表示一个全角的空格
&emsp;&emsp;两个全角的空格(用的比较多)
&nbsp; or &#160;不断行的空白格
#### 通过 img 标签控制宽高
<img src=”http://pic15.photophoto.cn/20100615/0006019058815826_b.jpg”  height=”330″ width=”495″>
#### 多张图片
<div align=”center”>
<img src=”http://pp.myapp.com/ma_pic2/0/shot_42391053_1_1488499316/550″ height=”330″ width=”190″ >
<img src=”http://pp.myapp.com/ma_pic2/0/shot_42391053_2_1488499316/550″ height=”330″ width=”190″ >
<img src=”http://pp.myapp.com/ma_pic2/0/shot_42391053_3_1488499316/550″ height=”330″ width=”190″ >
 </div>
#### 引用格式
>  请问 Markdown 怎么用?  –  小白
>
>>  自己看教程!  –  愤青
>>
>>>  教程在哪?  –  小白
>>
>>  我也不知道在哪!  –  愤青
>
>  那你回答个屁。  –  小白
1.  使用 Readme\_XXX.md 来支持不同的语言,例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
#### 简单表格方式
学号|姓名|分数
-|:-:|-:
小明|男|75
小红|女|79
小陆|男|92
#### 原生方式写表格
|学号|姓名|分数|
|—|—|—|
|小明|男|75|
|小红|女|79|
|小陆|男|92|
#### 嵌入视频
<iframe
    src=”https://www.bilibili.com/video/BV1fqcgeHE9f/?spm_id_from=333.1007.tianma.1-2-2.click”
    width=”800″
    height=”450″
    frameborder=”0″
    allowfullscreen>
</iframe>
[Home](/) <!– 将用户导航至根目录下的 index.html –>
[foo](/foo/) <!– 将用户导航至目录 foo 下的 index.html –>
[foo heading](./#heading) <!– 将用户锚定到目录 foo 下的index文件中的一个标题上 –>
[bar – three](../bar/three) <!– 可以省略扩展名 –>
[bar – three](../bar/three.md) <!– 可以添加 .md –>
[bar – four](../bar/four.html) <!– 或者可以添加 .html –>
#### 卡片模式
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。
> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。
> [!IMPORTANT]
> 对用户达成目标至关重要的信息。
> [!WARNING]
> 因为可能存在风险,所以需要用户立即关注的关键内容。
> [!CAUTION]
> 行为可能带来的负面影响。
#### 卡片模式
::: info 灰色
:::
::: tip 紫色
:::
::: warning 黄色
:::
::: danger 粉色
:::
::: details 折叠
:::
#### 在代码块中实现行高亮
“`js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn’t highlighted,
      but this and the next 2 are.`,
      motd: ‘VitePress is awesome’,
      lorem: ‘ipsum’
    }
  }
}
“`
除了单行之外,还可以指定多个单行、多行,或两者均指定:
多行:例如 {5-8}、{3-10}、{10-17}
多个单行:例如 {4,7,9}
多行与单行:例如 {4,7-13,16,23-27,40}
#### 在代码块中,使用注释来高亮代码
// [!code highlight]
——————————————————————————————————
“`js
export default {
  data () {
    return {
      msg: ‘Highlighted!’ // [!code highlight]
    }
  }
}
“`
#### 代码块中聚焦
在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。
此外,可以使用 // [!code focus:<lines>] 定义要聚焦的行数。
——————————————————————————————————
“`js
export default {
  data () {
    return {
      msg: ‘Focused!’ // [!code focus]
    }
  }
}
“`
#### 代码块中的颜色差异
— 是红色
++ 是绿色
————————————————————————————————
“`js
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]
    }
  }
}
“`
#### 为每个代码块启用行号
“`ts {1}
// 默认禁用行号
const line2 = ‘This is line 2’
const line3 = ‘This is line 3’
“`
“`ts:line-numbers {1}
// 启用行号
const line2 = ‘This is line 2’
const line3 = ‘This is line 3’
“`
“`ts:line-numbers=2 {1}
// 行号已启用,并从 2 开始
const line3 = ‘This is line 3’
const line4 = ‘This is line 4’
“`
#### 多个代码块进行分组
::: 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
“`
:::
#### 在MD中,内嵌其他MD的内容
<!–@include: 路径/名称.md–>
<!–@include: ./parts/basics.md–>
// 指定范围 第三行 {3,}
<!–@include: ./parts/basics.md{3,}–>
###### <span style=”border-bottom: 1px solid red;”>标题</span>
[生成器预设](./index.md#生成器预设)
<br><br>
<span style=”border-bottom: thick double rgb(12, 163, 233);”>1</span>&emsp;
<span style=”border-bottom: thick double rgb(12, 233, 189);”>1</span>&emsp;

灰常感谢优良资本霸霸
微信投喂

🤩 微信扫它!

支付宝投喂

♥️ 支付宝扫它!



赞美/嘲讽(0)

查看赞美/嘲讽板

暂无赞美/嘲讽


发表赞美/嘲讽

表情 颜文字
植入代码

广告版 ne-2058250819

//
回退
迈步
新标签页打开
复制
刷新
复制哈希ID
探索选中内容
灵阈研都
返回本都
//
回退
迈步
新标签页打开
复制
刷新
复制哈希ID
探索选中内容
灵阈研都
返回本都