java markdown 教案,Markdown 拓展

# Markdown 拓展

# Header Anchors

所有的标题将会自动地应用 anchor 链接，anchor 的渲染可以通过 markdown.anchor 来配置。

# 链接

# 内部链接

网站内部的链接，将会被转换成 用于 SPA 导航。同时，站内的每一个文件夹下的 README.md 或者 index.md 文件都会被自动编译为 index.html，对应的链接将被视为 /。

以如下的文件结构为例：

.

├─ README.md

├─ foo

│  ├─ README.md

│ ├─ one.md

│ └─ two.md

└─ bar

├─ README.md

├─ three.md

└─ four.md

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

[Home](/)

[foo](/foo/)

[foo heading](./#heading)

[bar - three](../bar/three.md)

[bar - four](../bar/four.html)

# 链接的重定向

VuePress 支持重定向到干净链接。如果一个链接 /foo 找不到，VuePress 会自行寻找一个可用的 /foo/ 或 /foo.html。反过来，当 /foo/ 或 /foo.html 中的一个找不到时，VuePress 也会尝试寻找另一个。借助这种特性，我们可以通过官方插件 vuepress-plugin-clean-urls(opens new window) 定制你的网站路径。

注意

无论是否使用了 permalink 和 clean-urls 插件，你的相对路径都应该依赖于当前的文件结构来定义。在上面的例子中，即使你将 /foo/one.md 的路径设为了 /foo/one/，你依然应该通过 ./two.md 来访问 /foo/two.md。

# Page Suffix

Pages and internal links get generated with the .html suffix by default.

You can customize this by setting config.markdown.pageSuffix.

# 外部链接

外部的链接将会被自动地设置为 target="_blank" rel="noopener noreferrer":

# Front Matter

---

title: Blogging Like a Hacker

lang: en-US

---

这些数据可以在当前 markdown 的正文，或者是任意的自定义或主题组件中使用。

# GitHub 风格的表格

输入

| Tables | Are | Cool |

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

| col 3 is | right-aligned | $1600 |

| col 2 is | centered | $12 |

| zebra stripes | are neat | $1 |

输出 Tables Are Cool col 3 is right-aligned $1600

col 2 is centered $12

zebra stripes are neat $1

# Emoji

输入

:tada: :100:

输出

🎉 💯

# 目录

输入

[[toc]]

输出

目录(Table of Contents)的渲染可以通过 markdown.toc 选项来配置。

# 自定义容器 默认主题

输入

::: tip

这是一个提示

:::

::: warning

这是一个警告

:::

::: danger

这是一个危险警告

:::

::: details

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

:::

输出

TIP

这是一个提示

WARNING

这是一个警告

WARNING

这是一个危险警告 DETAILS

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

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

::: danger STOP

危险区域，禁止通行

:::

::: details 点击查看代码

```js

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

```

:::

STOP

危险区域，禁止通行 点击查看代码

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

参考:

# 代码块中的语法高亮

VuePress 使用了 Prism(opens new window) 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言，你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名：

输入

``` js

export default {

name: 'MyComponent',

// ...

}

```

输出

export default {

name: 'MyComponent',

// ...

}

输入

``` html

• v-for="todo in todos"

  :key="todo.id"

  >

  {{ todo.text }}

```

输出

• v-for="todo in todos"

  :key="todo.id"

  >

  {{ todo.text }}

# 代码块中的行高亮

输入

``` js {4}

export default {

data () {

return {

msg: 'Highlighted!'

}

}

}

```

输出

export default {

data () {

return {

msg: 'Highlighted!'

}

}

}

除了单行以外，你也可指定多行，行数区间，或是两者都指定。 行数区间: 例如 {5-8}, {3-10}, {10-17}

多个单行: 例如 {4,7,9}

行数区间与多个单行: 例如 {4,7-13,16,23-27,40}