代码演示

Mr.Hope ... 2021-2-25 Markdown
  • Code demo
  • Markdown
大约 3 分钟

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

# 配置




 




module.exports = {
  themeConfig: {
    mdEnhance: {
      demo: true,
    },
  },
};
1
2
3
4
5
6
7

# 语法

请使用以下语法:

::: [type]-demo 可选的标题文字

```html
<!-- ↑ 使用可用的语言 -->
<!-- 在代码块中放置你对应语言的代码,一个语言不能出现多个块 -->
<!-- 你可以有多个代码块,并且 html, js, css 都是视情况可选的 -->
```
1
2
3
4
5
6
7
// json block 作为插件配置存放处
{
  // 放置你的配置 (optional)
}
1
2
3
4

:::


::: tip

JSON 块是可选的,可用的配置详见 [配置](../config.md#demo)。

:::

该插件支持三种类型:

- normal (默认)
- vue
- react

### Normal

写法:

````md
::: normal-demo 可选的标题文字

```html
<!-- html code -->
```

```js
// js code
```

```css
/* css code */
```

```json
// 配置 (可选)
{
  "jsLib": [
    ...
  ],
  "cssLib":[
    ...
  ]
}
```

:::
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# Vue

语法:

::: vue-demo 可选的标题文字

```vue
<!-- ↑ 你也可以使用 html -->
<template>
  <!-- vue 模板 -->
</template>
<script>
export default {
  // vue 组件
};
</script>
<style>
/* css 代码 */
</style>
```

```json
// 配置 (可选)
```

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# React

语法:

::: react-demo 可选的标题文字

```js
export default class App extends React.Component {
  // react 组件
}
```

```css
/* 你的 css 内容 */
```

```json
// 配置 (可选)
```

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

# 可用的语言

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

当你设置一些不能在浏览器上直接运行的语言时,由于插件无法解析它们,因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 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

# 演示

Demo 演示
<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
代码
::: normal-demo Demo 演示

```html
<h1>Mr.Hope</h1>
<p><span id="very">十分</span></p>
```

```js
document.querySelector("#very").addEventListener("click", () => {
  alert("十分帅");
});
```

```css
span {
  color: red;
}
```

:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
一个函数式 React Demo
export default () => {
  const message = "十分帅";

  const handler = () => {
    alert(message);
  };

  return (
    <div className="box">
      Mr.Hope
      <span id="very" onClick={handler}>
        {message}
      </span>
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box span {
  color: blue;
}
1
2
3
代码
::: react-demo 一个函数式 React Demo

```js
export default () => {
  const message = "十分帅";

  const handler = () => {
    alert(message);
  };

  return (
    <div className="box">
      Mr.Hope
      <span id="very" onClick={handler}>
        {message}
      </span>
    </div>
  );
};
```

```css
.box span {
  color: blue;
}
```

:::
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
28
一个类式 React Demo
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "十分帅" };
  }
  render() {
    return (
      <div className="box">
        Mr.Hope
        <span id="very" onClick={this.handler}>
          {this.state.message}
        </span>
      </div>
    );
  }
  handler() {
    alert(this.state.message);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box span {
  color: blue;
}
1
2
3
代码
::: react-demo 一个类式 React Demo

```js
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "十分帅" };
  }
  render() {
    return (
      <div className="box">
        Mr.Hope
        <span id="very" onClick={this.handler}>
          {this.state.message}
        </span>
      </div>
    );
  }
  handler() {
    alert(this.state.message);
  }
}
```

```css
.box-react span {
  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
26
27
28
29
30
31
一个 Vue Demo
<template>
  <div class="box">
    Mr.Hope <span @click="handler">{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "十分帅" }),
  methods: {
    handler() {
      alert(this.message);
    },
  },
};
</script>
<style>
.box span {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
代码
::: vue-demo 一个 Vue Demo

```vue
<template>
  <div class="box">
    Mr.Hope <span @click="handler">{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "十分帅" }),
  methods: {
    handler() {
      alert(this.message);
    },
  },
};
</script>
<style>
.box 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
22
23
24
25
26
一个使用浏览器不支持解析语言 Demo
# 标题

十分帅
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
代码
::: normal-demo 一个使用浏览器不支持解析语言 Demo

```md
# 标题

十分帅
```

```ts
const message: string = "Mr.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
上次编辑于: 2022年5月31日 03:15
贡献者: Mr.Hope , Mr.Hope