VuePress 代码块插件：让你的文档活起来

原创于 2025-03-17 17:13:39 发布 · 435 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #开源

开源与工具专栏收录该内容

1 篇文章

订阅专栏

VuePress 代码块插件：让你的文档活起来

对vuepress-plugin-demoblock-plus 进行VuePress 2.x 代码块插件适配（原作者该仓库已经停止维护），让你的文档不再是静态的代码展示，而是可以即时运行和交互的技术平台。

🌟 这个插件解决了什么问题？

写技术文档时，我们经常需要展示各种代码示例。但传统的代码块只能展示代码本身，读者需要复制到本地才能看到实际效果，这样既不直观，也打断了阅读体验。有了这个插件，你可以：

直接在文档中运行 Vue 组件示例
一键展开/收起源代码
随时复制代码到本地使用

✨ 主要特性

🚀 完整支持 VuePress 2.x（已在 2.0.0-rc.7 版本验证）
💻 在 Markdown 中直接写 Vue 示例，所见即所得
📦 一键收起/展开/复制代码，操作更便捷
🎨 支持自定义组件和第三方组件展示
🔧 配置简单，开箱即用

🔧 快速开始

安装插件

使用你喜欢的包管理器安装插件：

npm install vuepress-plugin-codeblock-next
# 或者使用 yarn
yarn add vuepress-plugin-codeblock-next
# 或者使用 pnpm
pnpm add vuepress-plugin-codeblock-next

配置插件

在你的 VuePress 配置文件中添加插件：

import { demoblockPlugin } from 'vuepress-plugin-codeblock-next'

export default {
  plugins: [
    demoblockPlugin({
      // 在这里添加你的配置选项
    })
  ]
}

🎯 使用示例

有了这个插件，你可以在 Markdown 文件中这样展示你的 Vue 组件：

::: demo 这是一个简单的按钮示例
```vue
<template>
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
```
:::