https://github.com/jsakas/markdown-to-react-loader
A Webpack loader for converting Markdown files to React components
https://github.com/jsakas/markdown-to-react-loader
markdown react webpack webpack-loader
Last synced: 12 months ago
JSON representation
A Webpack loader for converting Markdown files to React components
- Host: GitHub
- URL: https://github.com/jsakas/markdown-to-react-loader
- Owner: jsakas
- License: mit
- Created: 2018-08-18T07:49:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T03:20:31.000Z (over 3 years ago)
- Last Synced: 2025-03-22T23:03:47.642Z (over 1 year ago)
- Topics: markdown, react, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1 MB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-to-react-loader
### [](https://www.npmjs.com/package/markdown-to-react-loader) [](https://www.npmjs.com/package/markdown-to-react-loader) [](https://travis-ci.org/jsakas/markdown-to-react-loader)
A Webpack loader for converting Markdown files to React components (JSX).
Currently supports imports, syntax highlighting, and extra data.
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:
```markdown
# Hello, World
Its great to be here!
```
#### Into this:
```javascript
import React, { Fragment } from 'react';
const Markdown = () => (
Hello, World
Its great to be here!
);
export default Markdown;
```
Note: Requires React 16.2+
# Installation
```
yarn add --dev markdown-to-react-loader
```
```
npm install --save-dev markdown-to-react-loader
```
# Usage
Because it outputs ES6 and JSX its recommended to use in conjunction with the babel-loader to compile for your targetted environment.
```
yarn add --dev babel-loader @babel/preset-env @babel/preset-react
```
```
npm install --save-dev babel-loader @babel/preset-env @babel/preset-react
```
Update your Webpack config:
```javascript
{
test: /\.md$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/react']
}
},
'markdown-to-react-loader',
],
},
```
Then you can use the loader like:
#### HelloWorld.md
```markdown
# Hello, World
Its great to be here!
```
#### App.js
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld.md';
ReactDOM.Render(, document.getElementById('app'));
```
## Imports
You can write ES6 imports inline using front matter.
#### HelloWorldWithImport.md
```markdown
---
imports: |
import { SomeComponent } from './SomeComponent';
---
# Hello, World
Heres a component rendered inline:
```
## Controlling JavaScript
You can pass simple props to components. However, if you need to write more advanced JavaScript, its recommended to declare it in the imports section.
```markdown
---
imports: |
import { SomeComponent } from './SomeComponent';
const dynamic = () => import('./SomeComponent');
console.log('You can put anything here!');
---
```
Anything added to the `imports` front matter is added between the React import and component declaration in the outputted module.
## 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');
```
## Extra Data
Any front matter that is not under the `imports` key is considered extra data. It is parsed and exported as named exports from the module.
```markdown
---
title: Hello World
slug: /post/1
object:
- foo: bar
- baz: biz
array:
- foo
- bar
---
```
The above front matter is transformed to:
```javascript
const title = "Hello World";
export { title };
const slug = "/post/1";
export { slug };
const object = [{ foo: "bar" }, { baz: "biz" }];
export { object };
const array = ["foo", "bar"];
export { array };
```