Package Exports

@arco-design/arco-markdown-loader
@arco-design/arco-markdown-loader/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arco-design/arco-markdown-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

arco-markdown-loader

This is a Webpack loader, will translate markdown to react component.

And if you specify demo folder, it will generate demo effect and code preview.

Install

npm i @arco-design/arco-markdown-loader -D

Usage

webpack documentation: Loaders

Within your webpack configuration object, you'll need to add the md2react-doc-loader to the list of modules, like so:

You should put babel-loader before md2react-doc-loader, because md2react-doc-loader's output is ES6 format and contains jsx.

import React from 'react';
import ReactDOM from 'react-dom';
import MD from './README.md';

ReactDOM.render(<MD />, document.getElementById('container'));

module: {
  rules: [
    {
      test: /\.md$/,
      exclude: /(node_modules)/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            ...
          }
        },
        {
          loader: '@arco-design/arco-markdown-loader',
          options: {
            demoDir: 'demo',
            templateDir: 'src/templates',
            babelConfig: {
              ...
            }
          }
        }
      ]
    }
  ]
}

Options

demoDir [string]

default: demo

Specify demo dir, relative to your entry md file.

autoHelmet [object]

Add helmet to each page.

then:

{
  test: /\.md$/,
  use: [
    {
      loader: 'babel-loader',
      options: babelConfig,
    },
    {
      loader: '@arco-design/arco-markdown-loader',
      options: {
        babelConfig,
      },
    },
  ],
},

preprocess [function]

Preprocess the file content, you should return new file content string in this function.

babelConfig [object]

See Babel config.

For compile markdown jsx.

LICENSE

MIT @PengJiyuan