https://github.com/hipstersmoothie/markdown-it-vanilla-loader
Load markdown files to html in webpack. Uses markdown-it and assumes nothing about your configuration.
https://github.com/hipstersmoothie/markdown-it-vanilla-loader
Last synced: 25 days ago
JSON representation
Load markdown files to html in webpack. Uses markdown-it and assumes nothing about your configuration.
- Host: GitHub
- URL: https://github.com/hipstersmoothie/markdown-it-vanilla-loader
- Owner: hipstersmoothie
- License: apache-2.0
- Created: 2018-06-19T22:43:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T13:29:20.000Z (over 2 years ago)
- Last Synced: 2025-03-15T12:34:11.816Z (about 2 months ago)
- Language: JavaScript
- Size: 207 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/hipstersmoothie/markdown-it-vanilla-loader)
[](https://codecov.io/gh/hipstersmoothie/markdown-it-vanilla-loader/)
[](https://www.npmjs.com/package/markdown-it-vanilla-loader) [](https://www.npmjs.com/package/markdown-it-vanilla-loader)
Markdown-It-Vanilla-Loader
Uses markdown-it to render markdown to HTML and assumes nothing about your configuration.
## Install
```bash
yarn add -D markdown-it-vanilla-loader
```
## Usage
**Input**
```markdown
# Your Markdown File
With some content.
```
**webpack.config.js**
```javascript
module.exports = {
module: {
rules: [
{
test: /\.md$/,
use: [
'html-loader',
{
loader: 'markdown-it-vanilla-loader',
options: {
highlight: (code, language) => {
return language && highlightjs.getLanguage(language)
? highlightjs.highlight(language, code).value
: code;
}
}
}
]
}
]
}
};
```
**Output**
```html
Your Markdown File
With some content.
```
## Options
This loader accepts any options that are allowed on `markdown-it`, those options can be found [here](https://github.com/markdown-it/markdown-it#init-with-presets-and-options).
| Name | Type | Default | Description |
| :------------------------: | :-------: | :-----: | :--------------------------------- |
| **[`plugins`](#fallback)** | `{array}` | `[]` | Plugins to load into `markdown-it` |
### `plugins`
Plugins can be defined in 2 ways.
1. Just a string with no options.
2. An array where the first item is the plugin name and the second item is an object with options for that plugin.
**webpack.config.js**
```javascript
{
loader: 'markdown-it-vanilla-loader',
options: {
plugins: [
// Just a string
'markdown-it-anchor',
// Array with options
[
'markdown-it-anchor',
{
permalink: true,
permalinkSymbol: '',
level: 2
}
]
]
}
}
```
### Example
```
cd example
yarn
yarn build
```