https://github.com/jneidel/gfm-loader
Webpack loader to apply gfm styles to html transformed via markdown-loader
https://github.com/jneidel/gfm-loader
gfm github-flavored-markdown markdown node-module webpack-loader
Last synced: 9 months ago
JSON representation
Webpack loader to apply gfm styles to html transformed via markdown-loader
- Host: GitHub
- URL: https://github.com/jneidel/gfm-loader
- Owner: jneidel
- License: mit
- Created: 2018-05-22T19:35:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-17T13:21:56.000Z (about 6 years ago)
- Last Synced: 2025-07-03T00:13:25.250Z (9 months ago)
- Topics: gfm, github-flavored-markdown, markdown, node-module, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# gfm-loader
> Webpack loader to apply gfm styles to html transformed via markdown-loader
[](https://github.com/jneidel/gfm-loader/blob/master/license)
[](https://www.npmjs.com/package/gfm-loader)
Webpack loader to wrap markdown which has been been transformed to html in a `` tag and apply gfm (github flavored markdown) styles.
## Install
[](https://www.npmjs.com/package/gfm-loader)
```
$ npm install gfm-loader
```
## Usage
In webpack config (read loaders from bottom to top):
```js
{
rules: [
{
test: /\.md$/,
use : [
`file-loader?name=`, // Save to given path
`gfm-loader`, // Wrap html in body, apply gfm styles
"extract-loader", // Extract html
"html-loader", // Load html
"markdown-loader", // Transfrom md -> html
]
}
]
}
```
## Example
**See: [`examples/webpack.config.js`](examples/webpack.config.js)**
Rendered example (with `border=true`):
## API
### gfm-loader[?gfm=&style=&js=&border=true]
**gfm:**
Default: https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css
`href` for the gfm stylesheet.
```js
`gfm-loader?gfm=build/css/gfm.css`
```
**style:**
`href` for an additional stylsheet.
To customize gfm styles.
```js
`gfm-loader?gfm=build/css/gfm.css&style=build/css/bundle.css`
```
**js:**
`src` for an additional script file for customization.
```js
`gfm-loader?js=build/js/bundle.js`
```
**border:**
Include styles for a Github style border around the body.
See example image above.
```js
`gfm-loader?gfm=build/css/gfm.css&style=build/css/bundle.css&border=true`
```
## Changelog
**2.1.0:**
- Add parameter `js`
- Add UTF-8 as encoding
**2.0.0:**
- Rename parameter `href` to `gfm`
- Add parameters `style` and `border`
## Related
- [setup-webpack](https://github.com/jneidel/setup-webpack) - Simplifies eg. markdown transpilation; the module this loader was built for
## License
MIT © [Jonathan Neidel](https://jneidel.com)