markdown-complete-loader
A Webpack loader for Markdown rendering using markdown-it.
Installation
npm install --save-dev markdown-complete-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: "markdown-complete-loader"
}
]
}
};
Options
All markdown-it options are available, together with some loader specific options.
- configFile: optionally, you can specify path to a JS or JSON file that will serve as loader options.
-
wrapper: a html node such as
<section>to be used for wrapping the rendered output. This feature is provided for integration with single file components, such as Vue's. -
preset: the markdown-it initialization preset to use. Can be
'commonmark','default', or'zero' -
html: if
true, it enables HTML tags to be used in the source -
xhtmlOut: if
true, it uses '/' to close single tags (
). This is only for full CommonMark compatibility. -
breaks: if
true, it converts '\n' in paragraphs into
-
langPrefix: a string such as
'language-'used for CSS language prefix for fenced blocks. Can be useful for external highlighters. -
linkify: if
true, it autoconverts URL-like text to links -
typographer: if
true, it enables some language-neutral replacement + quotes beautification -
quotes: a string such as
'“”‘’', specifying double + single quotes replacement pairs, when typographer enabled, and smartquotes on. Could be either a String or an Array. For example, you can use'«»„“'for Russian,'„“‚‘'for German, and['«\xA0', '\xA0»', '‹\xA0', '\xA0›']for French (including nbsp). - plugins: an array of plugins that can be used for markdownIt.
- onInit: a callback function that allows you to manipulate the markdown-it instance after it has been initialized.
- onRender: a callback function that allows you to manipulate the returned HTML string after it has been rendered.
-
highlight: a highlighter function. Should return escaped HTML, or '' if the source string is not changed and should be escaped externally. f result starts with
<pre...internal wrapper is skipped.
module.exports = {
module: {
rules: [
{
test: /\.md$/,
loader: "markdown-complete-loader",
options: {
configFile: 'path/to/config.js'
wrapper: '<section>',
html: false,
xhtmlOut: false,
breaks: false,
langPrefix: 'language-',
linkify: false,
typographer: false,
quotes: '“”‘’',
plugins: [],
onInit: function (md) {
return md;
},
onRender: function (result) {
return result;
},
highlight: function (str, lang) {
return '';
}
}
}
]
}
};Plugins
You can specify what markdownIt plugins to use inside your loader options object or config file.
module.exports = {
module: {
rules: [
{
test: /\.md$/,
loader: "markdown-complete-loader",
options: {
plugins: [
require('markdown-it-attrs')
]
}
}
]
}
};Config File
Inside your configuration file you can use all of the loader options specified above. Specify a config file path using the configFile loader option.
module.exports = {
wrapper: '<section>',
html: false,
xhtmlOut: false,
breaks: false,
langPrefix: 'language-',
linkify: false,
typographer: false,
quotes: '“”‘’',
plugins: [
require('markdown-it-attrs')
],
onInit: function (md) {
return md;
},
onRender: function (result) {
return result;
},
highlight: function (str, lang) {
return '';
}
};Vue Loader Usage
To use it as a Vue template language <template lang='md'>, provide the following configuration for your vue loaders:
loaders['md'] = {
loader: "markdown-complete-loader",
options: {}
};