@hugmanrique/react-markdown-loader

✨ 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 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

😉 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
          ]
        }
      }
    ]
  }
};

License

MIT © Hugo Manrique