@moesif/react-markdown-loader
v1.0.0
Published
Webpack GitHub-flavored Markdown (GFM) loader
Downloads
1
Readme
:sparkles: react-markdown-loader
Transform Markdown with interpolated JS expressions and JSX elements into React component Webpack modules.
Features
- Interpolates JSX expressions and JSX elements between
{{}}
delimiters. - Avoid having to include Markdown rendering and code highlighting libraries on the client bundle.
- Produces ES6+ code which can be run through
babel-loader
. - Supports code highlighting by using rehype-highlight (Check out the tutorial).
- Markdown gets processed through remark and rehype, so you can include any plugins for either of these tools.
You can visit the Docs webpage to check out an example that uses most of these features, including code highlighting.
Getting Started
Install react-markdown-loader using npm
:
npm install --save @hugmanrique/react-markdown-loader
Or via yarn
:
yarn add @hugmanrique/react-markdown-loader
The minimum supported Node version is v6.11.5
.
Let's get started by adding the loader to the webpack.config.js
file:
module.exports = {
...
module: {
rules: [
{
test: /\.md$/,
loader: [
'babel-loader',
'@hugmanrique/react-markdown-loader'
]
}
]
}
};
Then, create a file named hello-world.md
. This will contain the content we want to render:
# GitHub Flavored Markdown
Hi {props.username}! Let's get the whole "linebreak" thing out of the way.
The next paragraph contains two phrases separated by a single newline character:
Roses are red
Violets are blue
## Math is hard
In first grade I learned that 2 + 2 = {{2 + 2}}.
Add the following import to your Component.js
:
import React from 'react';
import HelloWorld from './hello-world.md';
export default class BlogPost extends React.PureComponent {
render() {
return <HelloWorld username={'Anonymous'} />;
}
}
Finally run webpack
and your component will render the Markdown content.
Additional Configuration
Passing Remark and Rehype plugins
Remark is automatically handled by react-markdown-loader using jsxtreme-markdown
, so you can pass any plugins you'd like by adding them to your webpack.config.js
:
{
test: /\.md$/,
loader: [
'babel-loader',
'@hugmanrique/react-markdown-loader'
],
options: {
remarkPlugins: [
require('remark-slug')
]
}
}
As the parsed Markdown is passed into rehype to convert it to HTML nodes, you can also pass any plugins for it the same way:
{
test: /\.md$/,
loader: [
'babel-loader',
'@hugmanrique/react-markdown-loader'
],
options: {
rehypePlugins: [
require('rehype-picture')
]
}
};
Accessing the front matter
To access the front matter variables from your Markdown document, you can use the JSX {{}}
delimiters:
---
title: Hello world
---
# {{ frontMatter.title }}
You can also access them from your project as we export the frontMatter
variable from the produced module. First, create a Markdown document:
---
googleUrl: https://google.com
---
Hi!
Finally, open any JavaScript file on your project and add the frontMatter
variable to your import:
import Document, { frontMatter } from './document.md';
console.log(frontMatter.googleUrl);
// → 'https://google.com'
Examples
Adding code highlighting
react-markdown-loader doesn't support code highlighting out of the box, but it's pretty easy to add it! First, install rehype-highlight
using npm
:
npm install --save rehype-highlight
Or via yarn
:
yarn add rehype-highlight
Next, open your webpack.config.js
and add the rehype plugin:
const highlight = require('rehype-highlight')
module.exports = {
...
module: {
rules: [
{
test: /\.md$/,
loader: [
'babel-loader',
'@hugmanrique/react-markdown-loader'
],
options: {
rehypePlugins: [
highlight
]
}
}
]
}
};
Note: If you want to pass any
rehype-highlight
options, you can pass in an array where the first object is the highlight plugin and the second one is the options array:{ rehypePlugins: [ [ highlight, { prefix: 'code-', ignoreMissing: true } ] ]; }
Adding emojis
:wink: You can replace :emoji:
shortcodes to real UTF-8 emojis by installing remark-emoji
using npm
:
npm install --save remark-emoji
Or via yarn
:
yarn add remark-emoji
Next, open your webpack.config.js
and add the remark plugin:
const emoji = require('remark-emoji')
module.exports = {
...
module: {
rules: [
{
test: /\.md$/,
loader: [
'babel-loader',
'@hugmanrique/react-markdown-loader'
],
options: {
remarkPlugins: [
emoji
]
}
}
]
}
};