Extended YAML loader
xyaml-webpack-loader loads YAML files with custom schema. Out of the box it supports:
It also supports rollupjs.
Install
npm i -D xyaml-webpack-loader# or yarn add -D xyaml-webpack-loader
Configure Webpack
// webpack.config.jsmoduleexports = // ... module: rules: type: 'json' test: /\.yaml$/ use: 'xyaml-webpack-loader' options: // default configuration markdown: use: 'markdown-it-headinganchor': {} // you can specify `false` to disable plugin 'markdown-it-attrs': leftDelimiter: '@{'
You can configure markdown-it
parser to use any modules, by specifying them in use
option.
Configure rollup
// rollup.config.js; 'markdown-it-attrs': leftDelimiter: '@{' } } }) }
Example YAML
# about-us.page.yml title: About usmeta: title: About keywords: About description: About descriptioncontent: !md | # Pay attention to the !md prefix My first paragraph * some bullet points * another bullet point [//some.site.com) ### Additional information * Other bullet points * Final words
Example Usage
; console // rendered HTML string
Use parser
You can also use parser programatically:
const parse = ;const fs = ; const content = ;
Advanced Markdown configuration
Some markdown-it
plugins accept more than single options argument (e.g., markdown-it-container). In such cases, we can specify an array of options:
const options = markdown: // default configuration, no need to provide use: 'markdown-it-container': 'image' // other options here ;
Or if we need to call the same plugin multiple times, we can use a function:
const options = markdown: // default configuration, no need to provide { ; // apply default plugins parser; parser; } ;