Code Demo

Mr.Hope ... February 25, 2021 15:37 Markdown
  • Code demo
  • Markdown
About 2 min

Let you insert code demos in your Markdown file.

# Configuration




 




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

# Syntax

You should use the following syntax:

::: demo [type] Optional title text

```html
<span class="token comment"><!-- ↑ use available ones --></span>
<span class="token comment"><!-- your code here --></span>
<span class="token comment"><!-- you can have mutiple code block --></span>
```

```json
<span class="token comment">// json block is for config</span>
<span class="token punctuation">{</span>
  <span class="token comment">// your config here (optional)</span>
<span class="token punctuation">}</span>
```

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

Tips

The json block is optional.

The plugin support three types:

  • normal (default)
  • vue
  • react

# Normal

Syntax:

::: demo Optional title text

```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">// config (optional)</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

Syntax:

::: demo [vue] Optional title text

```vue
<!-- ↑ you can also use html-->
<template>
  <!-- vue template -->
</template>
<script>
export default {
  // vue component
};
</script>
<style>
/* style */
</style>
```

```json
<span class="token comment">// config (optional)</span>
```

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

# React

Syntax:

::: demo [react] Optional title text

```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">// your react component</span>
<span class="token punctuation">}</span>
```

```css
<span class="token comment">/* your css content */</span>
```

```json
<span class="token comment">// config (optional)</span>
```

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

Note

This plugin is not bundling any librarys, so you must import them by setting head in your .vuepress/config.js files.

// .vuepress/config.js
module.exports = {
  head: [
    // react needs React, ReactDOM and 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 only needs 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

We also make an enhance: If you import Babel, then Vue and Normal script will be parsed to es6 using babel.

# Available languages

You can use different language in your demo block.

When you set another language, since the plugin is not able to resolve them, demo display will be disabled, and only codes can be seen. And the plugin will provide you a button to open it in CodePen.

Available HTML languages:

  • "html" (default)
  • "slim"
  • "haml"
  • "markdown"

You can also use md in code block.

Available JS languages:

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

You can also use js, ts, coffee and ls in code block.

Available CSS languages:

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

You can also use styl in code block.

# Demo

<h1>Mr.Hope</h1>
<p>Is <span id="very">very</span> handsome</p>
1
2
document.querySelector("#very").addEventListener("click", () => {
  alert("Very handsome!");
});
1
2
3
span {
  color: red;
}
1
2
3
::: demo A normal 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>Is <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>very<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> handsome<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">"Very handsome!"</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: "very handsome" };
  }
  render() {
    return (
      <div className="box-react">
        Mr.Hope is <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] A 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">"very handsome"</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 is <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 is <span>{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "very handsome" }),
};
</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] A vue demo

```vue
<template>
  <div class="box-vue">
    Mr.Hope is <span>{{ message }}</span>
  </div>
</template>
<script>
export default {
  data: () => ({ message: "very handsome" }),
};
</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
# Title

is very handsome.
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 A normal demo

```md
<span class="token title important"><span class="token punctuation">#</span> Title</span>

is very handsome.
```

```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