yaml-markdown-loader
v3.2.2
Published
Loader that parses markdown to html as well as document meta information defined in yaml format
Downloads
16
Maintainers
Readme
Yaml and Markdown webpack loader.
Why
Sometimes you want to generate a complete html page out of your markdown file, but markdown is just not enough for an html page, you also need a bunch of meta information about your page (like title and etc.), that you want to control somehow. For that purpose you are know able to do it like this:
---
head:
title: Test title
meta-description: Page to get a test information
---
# Test title
your awesome markdown content
The area between two ---
is nothing else as a Yaml and everything below is your actual Markdown.
An output that will be generated is equal to a following JSON object:
{ meta:
{ head:
{ title: 'Test title',
'meta-description': 'Page to get a test information'
}
},
html: '<h1 id="test-title">Test title</h1>\n<p> your awesome markdown content</p>\n'
}
Configuration
Your webpack.config.js
can look like this:
entry: __dirname + '/entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test:/\.md$/, loader:'yaml-markdown'}
]
}
Code Render Extensions
Sometime you want to introduce new languages for markdown code blocks, to achive this you have to provide filename of a custom renderer in loader query
{test: /\.md$/, loader: 'json!yaml-markdown?codeRenderer=customLangExtension'}
and implement a file in a following location: <your_project_folder>/yaml-markdown-loader-extentions/<codeRenderer>.js
The implementation of this file have to provide a function that takes 3 arguments:
- code
- lang
- callback (optional)
export default (code, lang, escaped) => {
return <markup>you need</markup>
}
To Do
- enable markdown custom options