快速开始
提示
本章节文档与vitepress-demo-plugin除了依赖名称不同外完全一致。如果你想迁移依赖简单的搜索替换即可。
安装
选择你喜欢的包管理器进行安装：
bash
npm install vitepress-better-demo-plugin -Dbash
yarn add vitepress-better-demo-plugin -Dbash
pnpm add vitepress-better-demo-plugin -D引入插件
在 .vitepress/config.ts 中添加如下代码以引入 vitepressDemoPlugin 插件：
ts
import { defineConfig } from 'vitepress';
import { vitepressDemoPlugin } from 'vitepress-better-demo-plugin';
import path from 'path';
export default defineConfig({
// other configs...
markdown: {
config(md) {
md.use(vitepressDemoPlugin);
},
},
});展示 Vue Demo
在 .md 文件中通过 <demo vue="xxx/path" /> 指定一个 .vue 文件的路径，渲染该 vue 组件并展示其代码：
html
<demo vue="../demos/demo.vue" />其对应的渲染效果如下：
vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
function increment() {
count.value++
}
function decrement() {
count.value--
}
</script>
<template>
<div class="container">
<div class="title">
This is a Vue counter
</div>
<div class="btn-container">
<button class="btn" @click="increment">
+1
</button>
<button class="btn" @click="decrement">
-1
</button>
</div>
<div>Current count: {{ count }}</div>
</div>
</template>
<style scoped>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style> loading
展示 Html Demo
在 .md 文件中通过 <demo html="xxx/path" /> 指定一个 .html 文件的路径，渲染该 html 组件并展示其代码：
html
<demo html="../demos/demo.html" />其对应的渲染效果如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style>
<div class="container">
<div class="title">This is a Html counter</div>
<div class="btn-container">
<button class="btn" id="incrementBtn">+1</button>
<button class="btn" id="decrementBtn">-1</button>
</div>
<div id="countDisplay">Current count: 0</div>
</div>
<script>
let count = 0;
const increment = () => {
count++;
updateCountDisplay();
};
const decrement = () => {
count--;
updateCountDisplay();
};
document
.getElementById('incrementBtn')
.addEventListener('click', increment);
document
.getElementById('decrementBtn')
.addEventListener('click', decrement);
const updateCountDisplay = () => {
document.getElementById(
'countDisplay'
).innerText = `Current count: ${count}`;
};
</script>
</body>
</html> loading
展示 React Demo
提示
如果要在你的 vitepress 站点中展示 React Demo，需要执行如下命令安装对应的依赖：
bash
npm install react react-dom -D通过 <demo react="xxx/path" /> 指定一个 .jsx/.tsx 文件的路径，渲染该 react 组件并展示其代码：
html
<demo react="../demos/demo.tsx" />其对应的渲染效果如下：
tsx
import React, { useState } from 'react';
import styled from '@emotion/styled';
const Container = styled.div`
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
`;
const Title = styled.div`
font-size: 24px;
font-weight: 600;
line-height: 32px;
`;
const Button = styled.button`
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
`;
const ButtonContainer = styled.div`
display: flex;
align-items: center;
column-gap: 24px;
`;
export default function Demo() {
const [count, setCount] = useState<number>(0);
const increment: () => void = () => {
setCount(count + 1);
};
const decrement: () => void = () => {
setCount(count - 1);
};
return (
<Container>
<Title>This is a React counter</Title>
<ButtonContainer>
<Button onClick={increment}>+1</Button>
<Button onClick={decrement}>-1</Button>
</ButtonContainer>
<div>Current count: {count}</div>
</Container>
);
} loading
展示多语法混合 Demo
提示
同上，如果要在你的 vitepress 站点中展示 React Demo，需要执行如下命令安装相应的依赖：
bash
npm install react react-dom -D可以同时在 <demo /> 中指定 vue/react/html 中的多个，以将不同语法的 Demo 展示在一个块中。
html
<demo
vue="../demos/demo.vue"
react="../demos/demo.tsx"
html="../demos/demo.html"
/>其对应的渲染效果如下：
vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
function increment() {
count.value++
}
function decrement() {
count.value--
}
</script>
<template>
<div class="container">
<div class="title">
This is a Vue counter
</div>
<div class="btn-container">
<button class="btn" @click="increment">
+1
</button>
<button class="btn" @click="decrement">
-1
</button>
</div>
<div>Current count: {{ count }}</div>
</div>
</template>
<style scoped>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style>tsx
import React, { useState } from 'react';
import styled from '@emotion/styled';
const Container = styled.div`
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
`;
const Title = styled.div`
font-size: 24px;
font-weight: 600;
line-height: 32px;
`;
const Button = styled.button`
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
`;
const ButtonContainer = styled.div`
display: flex;
align-items: center;
column-gap: 24px;
`;
export default function Demo() {
const [count, setCount] = useState<number>(0);
const increment: () => void = () => {
setCount(count + 1);
};
const decrement: () => void = () => {
setCount(count - 1);
};
return (
<Container>
<Title>This is a React counter</Title>
<ButtonContainer>
<Button onClick={increment}>+1</Button>
<Button onClick={decrement}>-1</Button>
</ButtonContainer>
<div>Current count: {count}</div>
</Container>
);
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style>
<div class="container">
<div class="title">This is a Html counter</div>
<div class="btn-container">
<button class="btn" id="incrementBtn">+1</button>
<button class="btn" id="decrementBtn">-1</button>
</div>
<div id="countDisplay">Current count: 0</div>
</div>
<script>
let count = 0;
const increment = () => {
count++;
updateCountDisplay();
};
const decrement = () => {
count--;
updateCountDisplay();
};
document
.getElementById('incrementBtn')
.addEventListener('click', increment);
document
.getElementById('decrementBtn')
.addEventListener('click', decrement);
const updateCountDisplay = () => {
document.getElementById(
'countDisplay'
).innerText = `Current count: ${count}`;
};
</script>
</body>
</html> loading
标题和描述
你可以通过 title 和 description 属性来指定 demo 的标题和描述：
html
<demo
vue="../demos/demo.vue"
react="../demos/demo.tsx"
html="../demos/demo.html"
title="混合语法 DEMO"
description="这是一个混合 demo 的示例，你可以使用 title 和 description 来指定 demo 的标题和描述"
/>其对应的渲染效果如下：
vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
function increment() {
count.value++
}
function decrement() {
count.value--
}
</script>
<template>
<div class="container">
<div class="title">
This is a Vue counter
</div>
<div class="btn-container">
<button class="btn" @click="increment">
+1
</button>
<button class="btn" @click="decrement">
-1
</button>
</div>
<div>Current count: {{ count }}</div>
</div>
</template>
<style scoped>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style>tsx
import React, { useState } from 'react';
import styled from '@emotion/styled';
const Container = styled.div`
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
`;
const Title = styled.div`
font-size: 24px;
font-weight: 600;
line-height: 32px;
`;
const Button = styled.button`
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
`;
const ButtonContainer = styled.div`
display: flex;
align-items: center;
column-gap: 24px;
`;
export default function Demo() {
const [count, setCount] = useState<number>(0);
const increment: () => void = () => {
setCount(count + 1);
};
const decrement: () => void = () => {
setCount(count - 1);
};
return (
<Container>
<Title>This is a React counter</Title>
<ButtonContainer>
<Button onClick={increment}>+1</Button>
<Button onClick={decrement}>-1</Button>
</ButtonContainer>
<div>Current count: {count}</div>
</Container>
);
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style>
<div class="container">
<div class="title">This is a Html counter</div>
<div class="btn-container">
<button class="btn" id="incrementBtn">+1</button>
<button class="btn" id="decrementBtn">-1</button>
</div>
<div id="countDisplay">Current count: 0</div>
</div>
<script>
let count = 0;
const increment = () => {
count++;
updateCountDisplay();
};
const decrement = () => {
count--;
updateCountDisplay();
};
document
.getElementById('incrementBtn')
.addEventListener('click', increment);
document
.getElementById('decrementBtn')
.addEventListener('click', decrement);
const updateCountDisplay = () => {
document.getElementById(
'countDisplay'
).innerText = `Current count: ${count}`;
};
</script>
</body>
</html> loading
打开 Github 和 Gitlab
你可以在 <demo /> 中通过 github 和 gitlab 属性来指定一个链接，点击时能跳转至对应的链接地址。
html
<demo
vue="../demos/demo.vue"
github="https://github.com/hezhengxu2018/vitepress-better-demo-plugin/blob/main/docs/demos/demo.vue"
/>其对应的渲染效果如下：
vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
function increment() {
count.value++
}
function decrement() {
count.value--
}
</script>
<template>
<div class="container">
<div class="title">
This is a Vue counter
</div>
<div class="btn-container">
<button class="btn" @click="increment">
+1
</button>
<button class="btn" @click="decrement">
-1
</button>
</div>
<div>Current count: {{ count }}</div>
</div>
</template>
<style scoped>
.container {
font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'SimSun',
'sans-serif';
font-size: 14px;
line-height: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.btn-container {
display: flex;
align-items: center;
column-gap: 24px;
}
.btn {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
font-size: 14px;
border-radius: 4px;
line-height: 20px;
padding: 4px 16px;
margin: 12px 0;
}
</style> loading
Gitlab 的使用方式和 Github 一致，只需将 github 属性替换为 gitlab 属性即可。