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 代码解析时尝试按顺序解析这些后缀名 |

标记规范

1. 代码模块

#### 按钮类型

---

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

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

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

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

License

MIT