boxmoe_header_banner_img

加载中

POST
文章导读
VitePress

VitePress的MD语法 – 文档汇总

avatar
白木 2021年10月1日 75
0 评论 
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>
:::
<a href="index.html#导出" target="_blank">路径名称</a>{target="_blank"}
<code>`ts:line-numbers</div>
<div></code></pre>
`
<Badge type="warning" text="概述/特别说明专用" />
////  以上 - 正在编辑中常用的  ////
# <a href="https://md.xalaok.top/docs/syntax/detailed/list/" target="_blank">SCUM服务器说明文档</a>{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>换行
<strong>粗体</strong>
<strong><em>加粗斜体</strong></em>
<em>斜体</em>或_斜体_
~~删除线~~
<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 官方博客 <a href="https://blog.gitee.com" target="_blank">blog.gitee.com</a>
3.  你可以 <a href="https://gitee.com/explore" target="_blank">https://gitee.com/explore</a> 这个地址来了解 Gitee 上的优秀开源项目
4.  <a href="https://gitee.com/gvp" target="_blank">GVP</a> 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 <a href="https://gitee.com/help" target="_blank">https://gitee.com/help</a>
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 <a href="https://gitee.com/gitee-stars/" target="_blank">https://gitee.com/gitee-stars/</a>
#### 简单表格方式
学号|姓名|分数
-|:-:|-:
小明|男|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>
<a href="/" target="_blank">Home</a> <!-- 将用户导航至根目录下的 index.html -->
<a href="/foo/" target="_blank">foo</a> <!-- 将用户导航至目录 foo 下的 index.html -->
<a href="./#heading" target="_blank">foo heading</a> <!-- 将用户锚定到目录 foo 下的index文件中的一个标题上 -->
<a href="../bar/three" target="_blank">bar - three</a> <!-- 可以省略扩展名 -->
<a href="../bar/three.md" target="_blank">bar - three</a> <!-- 可以添加 .md -->
<a href="../bar/four.html" target="_blank">bar - four</a> <!-- 或者可以添加 .html -->
#### 卡片模式
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。
> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。
> [!IMPORTANT]
> 对用户达成目标至关重要的信息。
> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。
> [!CAUTION]
> 行为可能带来的负面影响。
#### 卡片模式
::: info 灰色
:::
::: tip 紫色
:::
::: warning 黄色
:::
::: danger 粉色
:::
::: details 折叠
:::
#### 在代码块中实现行高亮
<code>js{1,4,6-8}</div>
<div>export default { // Highlighted</div>
<div>  data () {</div>
<div>    return {</div>
<div>      msg: `Highlighted!</div>
<div>      This line isn't highlighted,</div>
<div>      but this and the next 2 are.`,</div>
<div>      motd: 'VitePress is awesome',</div>
<div>      lorem: 'ipsum'</div>
<div>    }</div>
<div>  }</div>
<div>}</div>
<div></code></pre>
除了单行之外，还可以指定多个单行、多行，或两者均指定：
多行：例如 {5-8}、{3-10}、{10-17}
多个单行：例如 {4,7,9}
多行与单行：例如 {4,7-13,16,23-27,40}
#### 在代码块中，使用注释来高亮代码
// [!code highlight]
——————————————————————————————————
<code>js</div>
<div>export default {</div>
<div>  data () {</div>
<div>    return {</div>
<div>      msg: 'Highlighted!' // [!code highlight]</div>
<div>    }</div>
<div>  }</div>
<div>}</div>
<div></code></pre>
#### 代码块中聚焦
在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。
此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。
——————————————————————————————————
<code>js</div>
<div>export default {</div>
<div>  data () {</div>
<div>    return {</div>
<div>      msg: 'Focused!' // [!code focus]</div>
<div>    }</div>
<div>  }</div>
<div>}</div>
<div></code></pre>
#### 代码块中的颜色差异
-- 是红色
++ 是绿色
————————————————————————————————
<code>js</div>
<div>export default {</div>
<div>  data () {</div>
<div>    return {</div>
<div>      msg: 'Removed' // [!code --]</div>
<div>      msg: 'Added' // [!code ++]</div>
<div>    }</div>
<div>  }</div>
<div>}</div>
<div></code></pre>
#### 高亮“错误”和“警告”
// [!code error] 是红色
// [!code warning] 是黄色
————————————————————————————————
<code>js</div>
<div>export default {</div>
<div>  data () {</div>
<div>    return {</div>
<div>      msg: 'Error', // [!code error]</div>
<div>      msg: 'Warning' // [!code warning]</div>
<div>    }</div>
<div>  }</div>
<div>}</div>
<div></code></pre>
#### 为每个代码块启用行号
<code>ts {1}</div>
<div>// 默认禁用行号</div>
<div>const line2 = 'This is line 2'</div>
<div>const line3 = 'This is line 3'</div>
<div></code></pre>
<code>ts:line-numbers {1}</div>
<div>// 启用行号</div>
<div>const line2 = 'This is line 2'</div>
<div>const line3 = 'This is line 3'</div>
<div></code></pre>
<code>ts:line-numbers=2 {1}</div>
<div>// 行号已启用，并从 2 开始</div>
<div>const line3 = 'This is line 3'</div>
<div>const line4 = 'This is line 4'</div>
<div></code></pre>
#### 多个代码块进行分组
::: code-group
<code>js [config.js]</div>
<div>/**</div>
<div> * @type {import('vitepress').UserConfig}</div>
<div> */</div>
<div>const config = {</div>
<div>  // ...</div>
<div>}</div>
<div>export default config</div>
<div></code></pre>
<code>ts [config.ts]</div>
<div>import type { UserConfig } from 'vitepress'</div>
<div>const config: UserConfig = {</div>
<div>  // ...</div>
<div>}</div>
<div>export default config</div>
<div></code></pre>
:::
#### 在MD中，内嵌其他MD的内容
<!--@include: 路径/名称.md-->
<!--@include: ./parts/basics.md-->
// 指定范围 第三行 {3,}
<!--@include: ./parts/basics.md{3,}-->
###### <span style="border-bottom: 1px solid red;">标题</span>
<a href="./index.md#生成器预设" target="_blank">生成器预设</a>
<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;
Markdown VitePress vue
感谢您的支持
微信赞赏

微信扫一扫

支付宝赞赏

支付宝扫一扫

评论（0）

查看评论列表

暂无评论

发表评论

表情 颜文字
插入代码

广告版 ne-2058250819

gura

调查…😶‍🌫️

后退
前进
刷新
复制
粘贴
全选
删除
返回首页