axe-markdown-loader

axe-markdown-loader

Allows you to import .md files directly into React.

Mainly targetted for easier generation of component documentation, but can also be used simply to import Markdown files.

Requirements:

• Webpack
• React 16.2.0 or greater

Features

• Import markdown using ES6 import statements
• Render React components in your markdown
  • Optional: show React component's javascript source below render
• Apply CSS + SCSS to page directly from within your Markdown files using fence block.
• Import other React components, or even any other modules into your markdown files.

Basic Usage Example

import SomeMarkdownFile from "./SomeMarkdownFile.md";

const YourReactComponent = () => (
	<div>
	    <SomeMarkdownFile
	        propVar={3344}
	        propString="Ipsum lorem ;)"
	        propFunc={() => {
	        	console.log('hello')}
	        }
	    />
	</div>
);

export default YourReactComponent;

Installation

npm install axe-markdown-loader --save-dev

or if you use yarn:

yarn add axe-markdown-loader --dev

And add it to your webpack module/rules configuration:

{
	test: /\.md/ ,
	loader: ['babel-loader', 'axe-markdown-loader'] ,
	exclude: /node_modules/
}

example webpack.config.js:

module.exports = {
    entry:'./src/entry',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /\.md/, exclude: /node_modules/, loader: ['babel-loader', 'axe-markdown-loader'] },
        ]
    }
};

Markdown Guide

Basic Example

# A title

```jsx
<div className="the-best-class-ever">
    Hello
</div>
```                                                       .

Screenshot:

Showing the source code of a React component

Add "show-source" next to fence block language name:

# A title

```jsx show-source
<div>Hello</div>
```                                                       .

Screenshot:

Importing modules / other React components

---
imports:
   'reduce': 'reduce-object'
   'TestComponent': './TestComponent'
---

```jsx show-source
<TestComponent
    someProp="lorem ipsum"
/>
```                                                       .

Screenshot:

Showing only the source without the render:

Add "no-render" next to fence block:

---
imports:
   'reduce': 'reduce-object'
   'TestComponent': './TestComponent'
---

```jsx show-source no-render
<TestComponent
    someProp="lorem ipsum"
/>
```                                                       .

Screenshot:

Applying CSS to page:

The following will turn the page's background red:

# Paint it red!
```scss show-source
body {
    background: red;
}
```                                                       .

Screenshot:

Using SCSS:

Feel free to use SCSS syntax:

# Paint it red!
```scss show-source
body {
    $bg-color: red;

    background: $bg-color;
    
    div {
        background: $bg-color;
    }
}
```                                                       .

Screenshot:

Don't apply, just show the source!

Add "no-render" if you don't want to apply your scss styles

```scss show-source no-render
body {
    background: red;
}
```                                                       .

Screenshot:

Use just CSS (without SCSS):

Use a "css" fence block:

body {
    background:red;
}

Writing Markdown fence blocks

When writing markdown examples, use ~~~ to open/close your fence blocks

# Writing markdown fence blocks

```md show-source
# Title

## The subtitle

~~~css
body {
    background:red;
}
~~~
```                                                       .

Screenshot:

License

MIT