Nomnom Pumpernickle Muffins

    @hugmanrique/react-markdown-loader

    0.0.2 • Public • Published

    ✨ react-markdown-loader

    npm node deps tests coverage license

    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

    Install

    npm i @hugmanrique/react-markdown-loader

    DownloadsWeekly Downloads

    63

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • hugmanrique