Markdown Src Loader

A loader for webpack that lets you import files in Markdown format.

Installation

Using npm:

$ npm install markdown-src-loader --dev

or Yarn:

$ yarn add markdown-src-loader --dev

Usage

webpack.config.js

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(md)$/,
      use: [{
        loader: "markdown-src-loader",
        options: {
          /* your options here */
        }
      }]
    }]
  }
};

Example

file.js

import md from "./file.md";
// => # markdown-src-loader\n rule

or specify the render property in the rule's options in your webpack.config.js.

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(md)$/,
      use: [{
        loader: "markdown-src-loader",
        options: {
           render: src => `Parse ${src} Parse`
        }
      }]
    }]
  }
};

import md from "./file.md";
// => Parse # markdown-src-loader\n rule Parse

Using markdown class library to output formatted result.

MarkdownIt Demo

// webpack.config.js
const MarkdownIt = require("markdown-it");
const md = new MarkdownIt();
 
module.exports = {
  module: {
    rules: [{
      test: /\.(md)$/,
      use: [{
        loader: "markdown-src-loader",
        options: {
          render: md.render.bind(md)
        }
      }]
    }]
  }
};

import md from "./file.md";
// => <h1>markdown-raw-loader!</h1>\n rule

Marked Demo

// webpack.config.js
const marked = require("marked");
 
module.exports = {
  module: {
    rules: [{
      test: /\.(md)$/,
      use: [{
        loader: "markdown-src-loader",
        options: {
          render: marked
        }
      }]
    }]
  }
};

import md from "./file.md";
// => <h1>markdown-raw-loader!</h1>\n rule

other target export

module.exports = {
  module: {
    rules: [{
      test: /\.(md)$/,
      use: [{
        loader: "markdown-src-loader",
        options: {
          exportTarget: "commonjs2" // ["commonjs" | "commonjs2" | "es6"], default: "commonjs2"
        }
      }]
    }]
  }
};

License

MIT