Package Exports

frontmatter-markdown-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (frontmatter-markdown-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

frontmatter-markdown-loader

Webpack Loader for: FrontMatter (.md) -> Markdown + Meta -> HTML + Meta (+ Vue template)

Instllation

$ npm i -D frontmatter-markdown-loader

$ yarn add -D frontmatter-markdown-loader

Configuration

Configure the loader for Markdown files like:

{
  test: /\.md$/,
  loader: 'frontmatter-markdown-loader'
}

Then you can get frontmatter attributes and compiled markdown.

import fm from "something.md"

fm.attributes //=> FrontMatter attributes
fm.body //=> Markdown source
fm.html //=> Compiled Html

Options

Use your own markdown compiler

{
  test: /\.md$/,
  loader: 'frontmatter-markdown-loader'
  options: {
    markdown: (body) => {
      return compileWithYourMDCompiler(body)
    }
  }
}

As default, compiling markdown body with markdown-it with allowing HTML. So behave as same as:

const md = require('markdown-it')

...

{
  test: /\.md$/,
  loader: 'frontmatter-markdown-loader'
  options: {
    markdown: (body) => {
      return md.render(body)
    }
  }
}

Vue template

The loader could compile HTML section of files as Vue template.

{
  test: /\.md$/,
  loader: 'frontmatter-markdown-loader'
  options: {
    vue: true
  }
}

This returns functions by compiled template as string render, staticRenderFns which are Vue component requires.

import fm from "something.md"

fm.vue.render //=> render function as string
fm.vue.staticRenderFns //=> List of staticRender function as string

so, you can use them in your Vue component:

import OtherComponent from "OtherComponent.vue"

export default {
  data: {
    templateRender: null
  },

  components: {
    OtherComponent // If markdown has `<other-component>` in body, will work :)
  }

  render: function (createElement) {
    return this.templateRender ? this.templateRender() : createElement("div", "Rendering");
  },

  created: function () {
    this.templateRender = new Function(fm.vue.render)();
    this.$options.staticRenderFns = new Function(fm.vue.staticRenderFns)();
  },
}

This component renders the compiled markdown including workable OtherComponent 🎉

Also you can give the class name of body html with options.vue.root.

{
  test: /\.md$/,
  loader: 'frontmatter-markdown-loader'
  options: {
    vue: {
      root: 'dynamicContent'
    }
  }
}

Inspired/Refered

License

MIT Copyright Kengo Hamasaki