md-loader

md-loader

组件文档是如何渲染出来

文档用于描述系统功能,而组件文档描述组件的功能,对于前端组件为了直观体现一般会有一个预览模块,而一般组件文档都是采用markdown编写,而md是文本内容且并没有渲染组件代码的能力,那么这是如何做的呢?

简单的说就是“自定义结构”,像element-ui中对代码的描述为<!--element-demo: YOU_CODE :element-demo—->,中间的YOU_CODE可以放简单的vue组件代码。

这种结构通常都需要单独的提取方式,而提起过程如下:
xx.md -> markdown-it -> 解析结构 -> 提取code -> 转换组件代码 -> render