npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@moesif/react-markdown-loader

v1.0.0

Published

Webpack GitHub-flavored Markdown (GFM) loader

Downloads

4

Readme

:sparkles: 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 @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
          ]
        }
      }
    ]
  }
};

License

MIT © Hugo Manrique