Package Exports

markdown-to-react-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markdown-to-react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

markdown-to-react-loader

A Webpack loader for converting Markdown files to React components (JSX).

Currently supports ES6 imports and syntax highlighting.

This loader was built for the purpose of documenting React Components, but can be used for other static documents you want to convert to HTML.

It turns this:

# Hello, World

Its great to be here!

Into this:

import React, { Fragment } from 'react';
const Markdown = () => (
  <Fragment>
    <h1>Hello, World</h1>
    <p>Its great to be here!</p>
  </Fragment>
);
export default Markdown;

Note: Requires React 16.2+

Installation

yarn add markdown-to-react-loader

Usage

Update your Webpack config. Because this loader outputs JSX its recommended to use the babel-loader after to compile the ES6 how you want.

{
  test: /\.md$/,
  use: [
    'babel-loader',
    'markdown-to-react-loader',
  ],
},

Then you can use the loader like:

HelloWorld.md

# Hello, World

Its great to be here!

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld.md';

ReactDOM.Render(<HelloWorld />, document.getElementById('app'));

Imports

You can write ES6 imports inline using front matter.

HelloWorldWithImport.md

---
imports: |
  import { SomeComponent } from './SomeComponent';
---

# Hello, World

Heres a component rendered inline:

<SomeComponent />

Syntax Highlighting

Syntax highlighting is done using PrismJS and is picked up automatically by tagging code blocks:

CodeSample.md

# Code Sample

```javascript
console.log('This will be marked for highlighting
```