代码演示

Mr.Hope ... 2021年2月25日 15:37 Markdown
  • Code demo
  • Markdown
大约 3 分钟

让你的 VuePress 站点中的 Markdown 文件支持代码案例。

# 配置




 




module.exports = {
  themeConfig: {
    mdEnhance: {
      demo: true,
    },
  },
};
1
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

提示

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

# 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

# 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

注意

该插件未捆绑任何库,因此你必须通过在 .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

我们还进行了增强: 如果你导入 Babel,则将使用 babel 将脚本解析为 es6,以确保能在浏览器上正常运行。

# 可用的语言

你可以在演示块中使用不同语言。

当你设置其他语言时,由于插件无法解析它们,因此演示将被禁用仅显示代码。插件将提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开代码。

可用的 HTML 语言:

  • "html" (默认)
  • "slim"
  • "haml"
  • "markdown"

你也可以在代码块中使用 md

可用的 JS 语言:

  • "javascript" (default)
  • "coffeescript"
  • "babel"
  • "livescript"
  • "typescript"

你也可以在代码块中使用 js, ts, coffeels

可用的 CSS 语言:

  • "css" (default)
  • "less"
  • "scss"
  • "sass"
  • "stylus"

你也可以在代码块中使用 styl

# 演示

<h1>Mr.Hope</h1>
<p><span id="very">十分</span></p>
1
2
document.querySelector("#very").addEventListener("click", () => {
  alert("十分帅");
});
1
2
3
span {
  color: red;
}
1
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
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
.box-react span {
  color: red;
}
1
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
<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
::: 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
# 标题

十分帅
1
2
3
const message: string = "Mr.Hope";

document.querySelector("h1").innerHTML = message;
1
2
3
h1 {
  font-style: italic;

  + p {
    color: red;
  }
}
1
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