commonmark-loader

A Webpack loader for Markdown rendering using Commonmark.


Installation

~~~
npm install --save-dev markdown-loader
~~~

Usage

Use the following loader configuration in your webpack.config.js file (webpack 2.x and later):

~~~
module.exports = {
module: {
rules: [
{
test: /\.md$/,
loader: "commonmark-loader"
}
]
}
};
~~~

Options

All commonmark options are available, together with some loader specific options.

- wrapper: a html node such as

to be used for wrapping the rendered output. This feature is provided for integration with single file components, such as Vue's.
- sourcepos: if true, source position information for block-level elements will be rendered in the data-sourcepos attribute (for HTML) or the sourcepos attribute (for XML).
- smart: if true, straight quotes '" will be made curly, -- will be changed to an en dash, --- will be changed to an em dash, and ... will be changed to ellipses.
- safe: if true, raw HTML will not be passed through to HTML output (it will be replaced by comments), and potentially unsafe URLs in links and images (those beginning with javascript:, vbscript:, file:, and with a few exceptions data:) will be replaced with empty strings.
- softbreak: specify raw string to be used for a softbreak.
- esc: specify a function to be used to escape strings.

~~~
module.exports = {
module: {
rules: [
{
test: /\.md$/,
loader: "commonmark-loader",
options: {
sourcepos: true,
safe: true,
smart: true,
softbreak: '
',
esc: function(str) { return str; }
}
}
]
}
};
~~~

$3

To use it as a Vue template language