code-block代码块插件

vuepress-plugin-code-block是一个基于vuepress@next版本的主题插件，他会帮助你再编写组件文档的时候增加vue示例。

目前的示例模板是按照ant-design-vue去实现的，感兴趣的小伙伴可以自定义实现。

目前还在开发阶段，希望大家在使用的过程中出现的bug或者问问题，欢迎提交issue和PR。

安装

在安装次插件之前，请确保您已经安装了vuepress@next版本

1
2npm i -D @yanyu-fe/vuepress-plugin-code-block
3
4yarn add -D @yanyu-fe/vuepress-plugin-code-block
5
6pnpm add -D @yanyu-fe/vuepress-plugin-code-block
7

使用

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

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

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

编写组件例子

• 普通vue文件支持

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

• tsx(jsx)文件支持

目前已经支持了tsx文件

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

显示代码块

引入之后只显示代码块，不需要转换为示例

1
2<demo src="./demo/test.tsx" raw></demo>
3
4<demo src="./demo/test.vue" raw></demo>
5

其他语言使用demo组件的处理方法

目前对于其他的语言如ts/js/html/css等文件进行处理，目前只能转换为代码块显示

1
2<demo src="./demo/test.ts"></demo>
3

demo属性支持

参数	类型	默认值	描述
raw	boolean	false	是否显示源代码块
title	string	-	标题
desc	string	-	描述
src	string	-	示例绝对路径

目前规划的属性较少，有小伙伴可以参考自定义

演示

演示站点目前还在筹划中。。。