Use Markdown as React components; Use Markdown Code Block as Preview components; Support vite 2
npm install vite-plugin-docvite-plugin-doc 是基于 vite 的插件机制实现对 Markdown 文件内容进行转换。核心通过 marked 结合 highlight.js 实现代码高亮和美化,并且还可以让你的 React Component 组件代码运行在 Markdown 文件里,享受 vite 2.0 带来的极速编译体验预览效果哦!
``shell通过 npm 安装
npm i vite-plugin-doc -D
$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` 移动端渲染效果展示