vite-plugin-doc

$3

vite-plugin-doc 是基于 vite 的插件机制实现对 Markdown 文件内容进行转换。核心通过 marked 结合 highlight.js 实现代码高亮和美化，并且还可以让你的 React Component 组件代码运行在 Markdown 文件里，享受 vite 2.0 带来的极速编译体验预览效果哦！

$3

``shell


通过 npm 安装

npm i vite-plugin-doc -D

通过 yarn 安装

yarn add vite-plugin-doc --dev
`

$3

只需在 vite.config.js 配置文件内引入 vite-plugin-doc 插件，您就可以在 React 代码里引用 Markdown 文件。（此外，通过设置 mode 可以切换 pc 端 或者 mobile 移动端两种渲染模式）

`js
import viteDoc from "vite-plugin-doc";

export default defineConfig({
plugins: [
viteDoc({
mode: "pc", // 默认值 mobile
className: "custom-classname", // 自定义文档类名
}),
resolve: {
alias: {
"you-component-name": path.resolve(__dirname, ./src/components), // 组件库别名
},
},
],
});
`

#### React 引入

`tsx
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Md from "./button.md"; // 直接作为路由渲染

ReactDOM.render(


,
document.getElementById("root")
);
`

#### button.md 内容

``


Button 按钮

$3

支持函数组件写法。注意：如果要渲染 React Components 组件，导出组件名称必须是 Example，否则只会进行代码高亮处理。

`jsx
import { Button } from "you-component-name";

const Example = () => {
const [nums, setNums] = useState(1);
return (



);
};
export default Example;
`

$3

支持类组件写法。注意：如果要渲染 React Components 组件，导出组件名称必须是 Example，否则只会进行代码高亮处理。

`jsx
import { Button } from "you-component-name";

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
nums: 10,
};
}
render() {
return (



);
}
}
export default Example;
`

API

$3

| 参数 | 说明 | 类型 | 默认值 |
| ------------ | -------------------------------------------------- | -------- | --------- |
| type | 类型，可选值为 primary info warning danger | _string_ | default |
| size | 尺寸，可选值为 large small mini | _string_ | normal |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 | _string_ | - |
| icon | 图标名称 | _string_ | - |
| iconSize | 加载图标大小 | _string_ | 16px |
| iconPosition | 图标展示位置，可选值为 right | _string_ | left |

$3

| 事件名 | 说明 | 回调参数 |
| ---------- | ---------------------------------------- | ------------------- |
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_ |
| touchstart | 开始触摸按钮时触发 | _event: TouchEvent_ |

$3

| 名称 | 说明 |
| ------- | -------- |
| default | 按钮内容 |
``

$3

#### pc 端渲染效果展示

#### mobile` 移动端渲染效果展示