使用vuepress实现code block代码块

Hello 各位小伙伴儿们，前段时间公司使用vue在做组件库的时候，需要实现demo效果，我也是对比了一些element的实现方式和vite-plugin-code-block这几款插件的实现方式，发现不是很满足我们目前的需求，所以在此契机下，做了一个vuepress-plugin-code-block插件，插件的主题是参照antd的方式实现的。目前已经应用到了公司内部的项目中。 注：本身项目是基于vuepress@next版本去实现的目前只兼容了vuepress@next版本，并未对1.x的版本做兼容，感兴趣的小伙伴儿可以一起参与进来，我们共同成长。

安装

npm i -D @yanyu-fe/vuepress-plugin-code-block

yarn add -D @yanyu-fe/vuepress-plugin-code-block

pnpm add -D @yanyu-fe/vuepress-plugin-code-block

使用

在.vuepress文件夹下创建一个config.ts文件，配置如下：

import { defineUserConfig } from "vuepress";
import { codeBlockPlugin } from "@yanyu-fe/vuepress-plugin-code-block";
export default defineUserConfig({
  title: "文档",
  plugins: [codeBlockPlugin()],
});

注册完成后，我们就可以直接在markdown中使用啦！

基本用法

目前已经支持了vue、tsx、jsx文件的转义，会自动转换成组件的方式。使用如下：

<demo src="./demo/test.vue" title="测试demo" desc="这是一个测试的`demo`"></demo>
<demo src="./demo/test.tsx" title="测试demo" desc="这是一个测试的`demo`"></demo>

引入代码块文件

我们还支持其他类型的文件的代码块的转换如ts、html等文件自动转换成代码块并输出出来。如下：

<demo src="./demo/test.ts"></demo>

vue组件文件以代码块显示

我们还增加了一个属性raw，如果我们需要将组件的文件以代码块的方式输出，那么我们可以直接加上raw属性。

<demo src="./demo/test.tsx" raw></demo>

至此这是插件目前支持的功能，后期还会继续扩展，感兴趣的小伙伴儿们可以参与进来共同开发。

PS: 嘿，读到最后了，给我们的项目star呗~