代码演示
Mr.Hope ... 2021年2月25日 15:37 大约 3 分钟
让你的 VuePress 站点中的 Markdown 文件支持代码案例。
# 配置
module.exports = {
themeConfig: {
mdEnhance: {
demo: true,
},
},
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# 语法
你应该使用以下语法：
::: demo [类型] 可选的标题文字
```html
<span class="token comment"><!-- ↑ 使用可用的语言 --></span>
<span class="token comment"><!-- 放置你的代码 --></span>
<span class="token comment"><!-- 你可以有多个代码块 --></span>
```
```json
<span class="token comment">// json block 作为插件配置</span>
<span class="token punctuation">{</span>
<span class="token comment">// 放置你的配置 (optional)</span>
<span class="token punctuation">}</span>
```
:::
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
# Normal
写法:
::: demo 可选的标题文字
```html
<span class="token comment"><!-- html code --></span>
```
```js
<span class="token comment">// js code</span>
```
```css
<span class="token comment">/* css code */</span>
```
```json
<span class="token comment">// 配置 (可选)</span>
<span class="token punctuation">{</span>
<span class="token property">"jsLib"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
...
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"cssLib"</span><span class="token operator">:</span><span class="token punctuation">[</span>
...
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
```
:::
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
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# Vue
语法:
::: demo [vue] 可选的标题文字
```vue
<!-- ↑ 你也可以使用 html -->
<template>
<!-- vue 模板 -->
</template>
<script>
export default {
// vue 组件
};
</script>
<style>
/* css 代码 */
</style>
```
```json
<span class="token comment">// 配置 (可选)</span>
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# React
语法:
::: demo [react] 可选的标题文字
```js
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token comment">// react 组件</span>
<span class="token punctuation">}</span>
```
```css
<span class="token comment">/* 你的 css 内容 */</span>
```
```json
<span class="token comment">// 配置 (可选)</span>
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
注意
该插件未捆绑任何库，因此你必须通过在 .vuepress/config.js 文件中设置 head 来导入它们。
// .vuepress/config.js
module.exports = {
head: [
// react 需要 React, ReactDOM 和 Babel 库
[
"script",
{ src: "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" },
],
[
"script",
{
src:
"https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js",
},
],
[
"script",
{ src: "https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js" },
],
// vue 只需要 vue 库
["script", { src: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js" }],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
我们还进行了增强: 如果你导入 Babel，则将使用 babel 将脚本解析为 es6，以确保能在浏览器上正常运行。
# 可用的语言
你可以在演示块中使用不同语言。
当你设置其他语言时，由于插件无法解析它们，因此演示将被禁用仅显示代码。插件将提供一个 "在 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。
# 演示
<h1>Mr.Hope</h1>
<p><span id="very">十分</span> 帅</p>
1
2
2
document.querySelector("#very").addEventListener("click", () => {
alert("十分帅");
});
1
2
3
2
3
span {
color: red;
}
1
2
3
2
3
::: demo 一个普通 Demo
```html
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Mr.Hope<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>very<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>十分<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> 帅<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
```
```js
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#very"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"十分帅"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
```
```css
<span class="token selector">span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: "十分帅" };
}
render() {
return (
<div className="box-react">
Mr.Hope <span>{this.state.message}</span>
</div>
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.box-react span {
color: red;
}
1
2
3
2
3
::: demo [react] 一个 React Demo
```js
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> message<span class="token operator">:</span> <span class="token string">"十分帅"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"box-react"</span><span class="token operator">></span>
Mr<span class="token punctuation">.</span>Hope <span class="token operator"><</span>span<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>message<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
```
```css
<span class="token selector">.box-react span</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
```
:::
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
<template>
<div class="box-vue">
Mr.Hope <span>{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: "十分帅" }),
};
</script>
<style>
.box-vue span {
color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::: demo [vue] 一个 Vue Demo
```vue
<template>
<div class="box-vue">
Mr.Hope <span>{{ message }}</span>
</div>
</template>
<script>
export default {
data: () => ({ message: "十分帅" }),
};
</script>
<style>
.box-vue span {
color: red;
}
</style>
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 标题
十分帅
1
2
3
2
3
const message: string = "Mr.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
::: demo 一个普通 Demo
```md
<span class="token title important"><span class="token punctuation">#</span> 标题</span>
十分帅
```
```ts
<span class="token keyword">const</span> message<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">"Mr.Hope"</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"h1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> message<span class="token punctuation">;</span>
```
```scss
<span class="token selector">h1 </span><span class="token punctuation">{</span>
<span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
<span class="token selector">+ p </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
```
:::
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