webpack-md2jsonml-loader

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