# Markdown 语法扩展

# markdown标准语法

提示

下面的内容是vuepress对markdown语法进行的扩展语法，仅在vuepress中生效。

# 链接

# 内部链接

以如下的文件结构为例：

.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

1
2
3
4
5
6
7
8
9
10

假设你现在在 foo/one.md 中：

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->

1
2
3
4
5

# 外部链接

- [天喻信息](http://www.whty.com.cn/)

1
2

显示如下：

天喻信息 (opens new window)

# GitHub 风格的表格

输入

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

1
2
3
4
5

输出

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

# Emoji

输入

:tada: :100:

输出

🎉 💯

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

# 目录

输入

[[toc]]

输出

markdown标准语法
链接
- 内部链接
- 外部链接
GitHub 风格的表格
Emoji
目录
自定义容器默认主题
代码块中的语法高亮
代码块中的行高亮

# 自定义容器默认主题

输入

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

输出

TIP

这是一个提示

WARNING

这是一个警告

DANGER

这是一个危险警告

DETAILS

这是一个详情块，在 IE / Edge 中不生效

你也可以自定义块中的标题：

::: danger STOP
危险区域，禁止通行
:::

::: details 点击查看代码
```js
console.log('你好，VuePress！')
```
:::

1
2
3
4
5
6
7
8
9

STOP

危险区域，禁止通行

点击查看代码

console.log('你好，VuePress！')

# 代码块中的语法高亮

输入

``` js
export default {
  name: 'MyComponent',
  // ...
}
```

1
2
3
4
5
6

输出

export default {
  name: 'MyComponent',
  // ...
}

1
2
3
4

输入

``` html
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>
```

1
2
3
4
5
6
7
8
9
10

输出

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

1
2
3
4
5
6
7
8

# 代码块中的行高亮

输入

``` js {4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

1
2
3
4
5
6
7
8
9

输出

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

1
2
3
4
5
6
7

除了单行以外，你也可指定多行，行数区间，或是两者都指定。

行数区间: 例如 {5-8}, {3-10}, {10-17}
多个单行: 例如 {4,7,9}
行数区间与多个单行: 例如 {4,7-13,16,23-27,40}

输入

``` js{1,4,6-7}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VuePress is awesome',
      lorem: 'ipsum',
    }
  }
}
```

1
2
3
4
5
6
7
8
9
10
11
12
13

输出

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VuePress is awesome',
      lorem: 'ipsum',
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11

← 静态资源