JS Guide
  • 文档规范
  • Markdown 规范
卡洛
2022-10-23
目录

在 VuePress 中使用 Markdown

VuePress 为 Markdown 提供了一些额外的语法。

# 1 内部链接

内部链接使用相对路径。

  • 如果以 / 开头，则表示从根路径开始。
  • 如果以 ./ 开头，则表示从当前路径开始。
  • .. 表示上一级路径。
  • # 表示特定标题的锚点。

由于 Vdoing 使用了永久链接 permalink，而相对链接基于 Markdown 文件的路径，所以 避免使用相对链接。

[Markdown 基本语法](/standard/markdown/markdown-base/)
[Markdown 基本语法 - 超链接](/standard/markdown/markdown-base/#_6-超链接)
1
2

Markdown 基本语法

Markdown 基本语法 - 超链接

# 2 emoji

使用 emoji 语法，可以在文本中插入 emoji 图标。

:smile: :+1: :-1: :heart: :tada: :rocket: :metal: :100:
1

😄 👍 👎 ❤️ 🎉 🚀 🤘 💯

可以在 这个列表 (opens new window) 找到所有可用的 emoji。

在 Windows 系统下，可以按 Windows + . 或 Windows + ; 打开 emoji 表情面板。

在 macOS 系统下，可以按 Command + Control + Space 打开 emoji 表情面板。

# 3 目录

使用 [[toc]] ，可以在当前页面生成目录。

[[toc]]
1

# 4 信息框

支持 tip、warning、danger 三种信息框。Vdoing 还支持 note 信息框。

::: tip
这是一条提示信息
:::

::: warning
这是一条警告信息
:::

::: danger
这是一条危险信息
:::

::: note
这是一条通知信息 <Badge text="Vdoing"/>
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提示

这是一条提示信息

注意

这是一条警告信息

警告

这是一条危险信息

笔记

这是一条通知信息 Vdoing

以上容器可自定义标题，如：

::: note 算法的稳定性
如果一个排序，能够使得值相同的元素在排序后相对位置关系不变，则称该排序稳定，否则不稳定。
:::
1
2
3

算法的稳定性

如果一个排序，能够使得值相同的元素在排序后相对位置关系不变，则称该排序稳定，否则不稳定。

# 5 布局容器

支持详情块 details。Vdoing 还支持 center、right 布局、theorem 定理块。

::: details 点击查看代码
```js
console.log('Hello World!')
```
:::

::: center
### 这是一段居中的文本 <Badge text="Vdoing"/>
:::

::: right
这是一段居右的文本 <Badge text="Vdoing"/>
:::

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。 <Badge text="Vdoing"/>
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E7%AC%AC%E4%B8%80%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
点击查看代码 
console.log('Hello World!')
1

# 这是一段居中的文本 Vdoing

这是一段居右的文本 Vdoing

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。 Vdoing

来自 维基百科 (opens new window)

# 6 代码块的行高亮

在代码块的语言后面加上行号，可以高亮该行。可以指定单行、多行、连续行。

```js {1,4-5}
function sayHi() {
  console.log(name)
  console.log(age)
  var name = 'Lydia'
  let age = 21
}
```
1
2
3
4
5
6
7
8
 


 
 


function sayHi() {
  console.log(name)
  console.log(age)
  var name = 'Lydia'
  let age = 21
}
1
2
3
4
5
6

# 7 普通卡片列表 Vdoing

Vdoing 支持普通卡片列表，如下：

::: cardList 3
```yaml
- name: VuePress
  desc: Vue 驱动的静态网站生成器
  avatar: https://vuepress.vuejs.org/hero.png # 可选
  link: https://vuepress.vuejs.org/zh/ # 可选
  bgColor: '#CBEAFA' # 可选，必须加引号
  textColor: '#6854A1' # 可选，必须加引号
- name: Vdoing
  desc: 一款简洁高效的 VuePress 主题
  avatar: https://doc.xugaoyi.com/img/logo.png
  link: https://doc.xugaoyi.com/
  bgColor: '#718971'
  textColor: '#fff'
- name: JS Guide
  desc: 一份前端面试指南，不仅有 JavaScript
  avatar: http://jsguide.cn/assets/logo.png
  link: https://jsguide.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

VuePress

基于 Vue 驱动的静态网站生成器

Vdoing

一款简洁高效的 VuePress 主题

JS Guide

一份前端面试指南，不仅有 JavaScript

- name: VuePress
  desc: 基于 Vue 驱动的静态网站生成器
  avatar: https://vuepress.vuejs.org/hero.png # 可选
  link: https://vuepress.vuejs.org/zh/ # 可选
  bgColor: '#CBEAFA' # 可选，必须加引号
  textColor: '#6854A1' # 可选，必须加引号
- name: Vdoing
  desc: 一款简洁高效的 VuePress 主题
  avatar: https://doc.xugaoyi.com/img/logo.png
  link: https://doc.xugaoyi.com/
  bgColor: '#718971'
  textColor: '#fff'
- name: JS Guide
  desc: 一份前端面试指南，不仅有 JavaScript
  avatar: http://jsguide.cn/assets/logo.png
  link: https://jsguide.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

cardList 旁边的数字是每行显示的卡片数量，支持 1~4，默认为 3。

# 8 图片卡片列表 Vdoing

Vdoing 支持图片卡片列表，如下：

::: cardImgList 2
```yaml
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://jsguide.cn/guide/js/js-advanced-155/
  name: JS 进阶 155 题
  desc: 这是实习时同事推荐的一份 JavaScript 进阶题目，对巩固 JS 基础很有帮助。 # 可选
  author: JS Guide
  avatar: http://jsguide.cn/assets/logo.png # 可选
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://corecabin.cn/2021/08/03/build-corecabin-in-one-week/
  name: 如何在一周内建造核心舱
  desc: 最近这段时间，我萌发了搭建一个技术博客的想法。仅仅用了一周左右的时间，我就搭建好了，并且把它取名为“卡洛的核心舱”。
  author: 卡洛
  avatar: https://corecabin.cn/img/avatar.jpg
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

JS 进阶 155 题

这是实习时同事推荐的一份 JavaScript 进阶题目，对巩固 JS 基础很有帮助。

JS Guide

如何在一周内建造核心舱

最近这段时间，我萌发了搭建一个技术博客的想法。仅仅用了一周左右的时间，我就搭建好了，并且把它取名为“卡洛的核心舱”。

卡洛
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://jsguide.cn/guide/js/js-advanced-155/
  name: JS 进阶 155 题
  desc: 这是实习时同事推荐的一份 JavaScript 进阶题目，对巩固 JS 基础很有帮助。 # 可选
  author: JS Guide
  avatar: http://jsguide.cn/assets/logo.png # 可选
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://corecabin.cn/2021/08/03/build-corecabin-in-one-week/
  name: 如何在一周内建造核心舱
  desc: 最近这段时间，我萌发了搭建一个技术博客的想法。仅仅用了一周左右的时间，我就搭建好了，并且把它取名为“卡洛的核心舱”。
  author: 卡洛
  avatar: https://corecabin.cn/img/avatar.jpg
1
2
3
4
5
6
7
8
9
10
11
12

# 9 Vue 语法

Markdown 文本中可以使用 Vue 的插值语法，并被 VuePress 自动渲染。

{{ 1 + 1 }}
1

2

可以使用 Vue 的指令，如 v-for、v-if 等。

<span v-for="i in 3">{{ i }} </span>
1

1 2 3

可以访问 VuePress 的网站元数据，如 $site、$page 等。

{{ $page.title }}
1

在 VuePress 中使用 Markdown

注意

避免在正文或行内代码中使用匹配的双大括号，因为它们会被解析为 Vue 的插值语法。

如果需要使用，使用容器 v-pre 包裹。

::: v-pre
`{{ this will not be compiled }}`
:::
1
2
3

{{ this will not be compiled }}

# 10 Vue 组件

可以使用内置的 Vue 组件，如标记 <Badge>。Vdoing 还支持代码块选项卡 <code-group>。

# 10.1 标记

属性包含 text、type（可选 tip、warning、error，默认 tip）、vertical（可选 top、middle，默认 top）。

输出是什么？ <Badge text="变量声明" vertical="middle"/><Badge text="待补充" type="warning"/><Badge text="复习" type="error"/>
1

输出是什么？ 变量声明待补充复习

# 10.2 代码块选项卡 Vdoing

在 <code-group> 内嵌套 <code-block>，属性包含 title、active。

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
    yarn add vuepress-theme-vdoing -D
    1
    npm install vuepress-theme-vdoing -D
    1
    // Make sure to add code blocks to your code group

    # 参考资料

    在 GitHub 中编辑此页 (opens new window)
    上次更新于: 2022/10/25 00:52:37
    Markdown 基本语法

    ←

    Theme by Vdoing | Copyright © 2022-2022 Carlo | Powered by VuePress