markdown-jsx-loader
v3.0.2
Published
Webpack loader that parses markdown as JSX
Downloads
3,998
Maintainers
Readme
markdown-jsx-loader
Webpack loader that parses markdown as JSX
Installation
$ npm install --save markdown-jsx-loader
Usage
{ loader: 'markdown-jsx', test: /\.jsx\.md$/ }
Simple:
// webpack.config.js
return {
...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: 'markdown-jsx-loader'
}
]
}
]}
}
...
}
Advanced:
The following example demonstrates how to adjust the markdown (marked) and JSX renderer can be adjusted to include custom JSX components; in this case a component for icons called Icon
.
// webpack.config.js
const marked = require('marked');
const mdRenderer = new marked.Renderer();
mdRenderer.heading = (text) => {
return `
<h${level}>
<Icon id='thumbs-up' />
${text}
</h${level + 1}>
`;
};
const jsxRenderer = (contents, resourcePath, options) => (`
import React from 'react';
import Icon from 'path/to/component/from/md/Icon';
export default () => (<div>${contents}</div>);
`);
return {
...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: 'babel-loader'
},
{
loader: 'markdown-jsx-loader',
options: {
renderer: mdRenderer,
render: jsxRenderer
}
}
]
}
]
}
...
}
Notes
HTML elements in Markdown:
GitHub-flavored Markdown supports HTML elements, which can feature the align
attribute. Unfortunately JSX does not support align
and will throw a warning. You can either ignore the warning or customize the marked render to remove align
. E.g.:
// webpack.config.js
const marked = require('marked');
const mdRenderer = new marked.Renderer();
mdRenderer.html = html =>
mdRenderer.constructor.prototype.html(
html.replace(/align=("|')[^"']*("|')/g, '')
);
// (*) See note below.
mdRenderer.paragraph = paragraph =>
mdRenderer.constructor.prototype.paragraph(
paragraph.replace(/align=("|')[^"']*("|')/g, '')
);
...
Note: Marked is not perfect and seems to contain some bugs. One of them unfortunately is that HTML tags like a
are not recognized as HTML but instead as a paragraph, therefore we have to add the align
-replacer to both, html and paragraph, transform functions.
You might run into more issues such as missing tbody
elements when having custom HTML tables. It's therefore wise to keep the use of custom HTML elements to a minimum if possible.