Code Demo
About 3 min
Let you insert code demos in your Markdown file.
Config
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
plugins: {
mdEnhance: {
demo: true,
},
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
demo: true,
},
},
}),
};
Syntax
You should use the following syntax:
::: [type]-demo Optional title text
```html
<!-- ↑ use available ones -->
<!-- your code here -->
<!-- you can have multiple code block, but each language must appear only once. -->
```
```json
// json block is for config
{
// your config here (optional)
}
```
:::
Tips
The json block is optional, for config please see config.
The plugin support three types:
- normal
- vue
- react
Normal
Syntax:
::: normal-demo Optional title text
```html
<!-- html code -->
```
```js
// js code
```
```css
/* css code */
```
```json
// config (optional)
{
"jsLib": [
...
],
"cssLib":[
...
]
}
```
::::
Vue
Syntax:
::: vue-demo Optional title text
```vue
<!-- ↑ you can also use html-->
<template>
<!-- vue template -->
</template>
<script>
export default {
// vue component
};
</script>
<style>
/* style */
</style>
```
```json
// config (optional)
```
:::
React
Syntax:
::: react-demo Optional title text
```js
export default class App extends React.Component {
// your react component
}
```
```css
/* your css content */
```
```json
// config (optional)
```
:::
Available Languages
You can use different language in your demo block.
When you set language which can not run on browsers, since the plugin is not able to resolve them, so demo display will be disabled. The plugin will only show the code and 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
andls
in code block.
Available CSS languages:
"css"
(default)"less"
"scss"
"sass"
"stylus"
You can also use
styl
in code block.
Demo
Demo
<h1>VuePress Theme Hope</h1>
<p>is <span id="very">very</span> powerful!</p>
document.querySelector("#very").addEventListener("click", () => {
alert("Very powerful");
});
span {
color: red;
}
Code
::: normal-demo Demo
```html
<h1>VuePress Theme Hope</h1>
<p>is <span id="very">very</span> powerful!</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("Very powerful");
});
```
```css
span {
color: red;
}
```
:::
A function-based React Demo
const { useState } = React;
export default () => {
const [message, setMessage] = useState(" powerful");
const handler = () => {
setMessage(` very${message}`);
};
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={handler}>
{message}
</span>!
</div>
);
};
.box #powerful {
color: blue;
}
Code
::: react-demo A function-based React Demo
```js
const { useState } = React;
export default () => {
const [message, setMessage] = useState(" powerful");
const handler = () => {
setMessage(` very${message}`);
};
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={handler}>
{message}
</span>!
</div>
);
};
```
```css
.box #powerful {
color: blue;
}
```
:::
A class-based React Demo
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: " powerful" };
}
handler() {
this.setState((state) => ({
message: ` very${state.message}`,
}));
}
render() {
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={this.handler.bind(this)}>
{this.state.message}!
</span>
</div>
);
}
}
.box #powerful {
color: blue;
}
Code
::: react-demo A class-based React Demo
```js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: " powerful" };
}
handler() {
this.setState((state) => ({
message: ` very${state.message}`,
}));
}
render() {
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={this.handler.bind(this)}>
{this.state.message}!
</span>
</div>
);
}
}
```
```css
.box #powerful {
color: blue;
}
```
:::
A Vue Composition Demo
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
const { ref } = Vue;
export default {
setup() {
const message = ref("powerful");
const handler = () => {
message.value = "very " + message.value;
};
return {
message,
handler,
};
},
};
</script>
<style>
.box span {
color: red;
}
</style>
Code
::: vue-demo A Vue Composition Demo
```vue
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
const { ref } = Vue;
export default {
setup() {
const message = ref("powerful");
const handler = () => {
message.value = "very " + message.value;
};
return {
message,
handler,
};
},
};
</script>
<style>
.box span {
color: red;
}
</style>
```
:::
A Vue Option Demo
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
export default {
data: () => ({ message: "powerful" }),
methods: {
handler() {
this.message = "very " + this.message;
},
},
};
</script>
<style>
.box span {
color: red;
}
</style>
Code
::: vue-demo A Vue Option Demo
```vue
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
export default {
data: () => ({ message: "powerful" }),
methods: {
handler() {
this.message = "very " + this.message;
},
},
};
</script>
<style>
.box span {
color: red;
}
</style>
```
:::
A demo using language not supported by browsers
# Title
is very powerful!
const message: string = "VuePress Theme Hope";
document.querySelector("h1").innerHTML = message;
h1 {
font-style: italic;
+ p {
color: red;
}
}
Code
::: normal-demo A normal demo
```md
# Title
is very powerful!
```
```ts
const message: string = "VuePress Theme Hope";
document.querySelector("h1").innerHTML = message;
```
```scss
h1 {
font-style: italic;
+ p {
color: red;
}
}
```
:::