代码演示
Mr.Hope ... 2022-6-1 大约 1 分钟
让你的 VuePress 站点中的 Markdown 文件支持代码案例。
# 配置
module.exports = {
plugins: [
[
"md-enhance",
{
// 启用代码演示
demo: true,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 语法
请使用以下语法:
::: [类型]-demo 可选的标题文字
```html
<!-- ↑ 使用可用的语言 -->
<!-- 在代码块中放置你对应语言的代码，一个语言不能出现多个块 -->
<!-- 你可以有多个代码块，并且 html, js, css 都是视情况可选的 -->
```
```json
// json block 作为插件配置存放处
{
// 放置你的配置 (可选的)
}
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
提示
JSON 块是可选的，可用的配置详见 配置。
该插件支持三种类型:
- normal (默认)
- vue
- react
# 可用的语言
你可以在演示块中使用不同语言。
当你设置一些不能在浏览器上直接运行的语言时，由于插件无法解析它们，因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开并浏览代码。
可用的 HTML 语言:
"html"(默认)"slim""haml""markdown"
你也可以在代码块中使用
md。
可用的 JS 语言:
"javascript"(default)"coffeescript""babel""livescript""typescript"
你也可以在代码块中使用
js,ts,coffee和ls。
可用的 CSS 语言:
"css"(default)"less""scss""sass""stylus"
你也可以在代码块中使用
styl。
# 不支持的语言演示
一个使用浏览器不支持解析语言 Demo
# 标题
十分强大
1
2
3
2
3
const message: string = "VuePress Theme Hope";
document.querySelector("h1").innerHTML = message;
1
2
3
2
3
h1 {
font-style: italic;
+ p {
color: red;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
代码
::: normal-demo 一个使用浏览器不支持解析语言 Demo
```md
# 标题
十分强大
```
```ts
const message: string = "VuePress Theme Hope";
document.querySelector("h1").innerHTML = message;
```
```scss
h1 {
font-style: italic;
+ p {
color: red;
}
}
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25