Webpack-md2jsonml-loader NPM

`markdown to jsonML loader`

Using mark-twain to convert markdown to jsonMl, work on webpack.

Features

convert markdown to jsonMl
Support code highlight
Support parse demo code

Getting Started

To begin, you'll need to install webpack-md2jsonml-loader:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: 'webpack-md2jsonml-loader',
        options: {
          clsPrefix: 'ku',
        },
      },
    ],
  },
};

Options

Name	Type	Default	Description
`clsPrefix`	`{String}`	`md`	样式名称前缀
`tocMaxDepth`	`{Number}`	`2`	提取 toc 最大深度
`tocKeepElem`	`{Boolean}`	`false`	是否在标题中保存元素
`demoBabelConfig`	`{Object}`	`babel-preset-react-app`	demo 代码解析 babel 配置
`demoResolveExtensions`	`{Array<string>}`	`['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json', '.css']`	demo 代码解析时尝试按顺序解析这些后缀名

标记规范

代码模块

#### 按钮类型

---

按钮有七种类型：主按钮、副按钮、次按钮、虚框按钮、主文按钮、次文按钮、危险按钮。
<demo cols="4" src="./path.js">

上面的 markdown 内容会转换为一下的数据

{
  title: ['h4', ' 按钮类型'];
  content: [
    'p',
    '按钮有七种类型：主按钮、副按钮、次按钮、虚框按钮、主文按钮、次文按钮、危险按钮。',
  ];
  attributes:{
    cols:4,
    src:'/User/*/path.js'
  }
}

demo 标签中的属性只有src属性为必填属性，并且src在转换时会自动转换为绝对路径,此外还可以为 demo 添加自定义属性比如：theme="dark" 等