@stefanprobst/markdown-loader

markdown-loader

Webpack loader for markdown.

How to use

Add the loader to the webpack configuration:

// webpack.config.js
module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.md$/
        use: [{
          loader: require.resolve('@stefanprobst/markdown-loader')
          options: {}
        }]
      }
    ]
  }
}

The loader makes the generated html available as the default export, and frontmatter on the data named export.

import html, { data } from '@/contents/faq.md'

// Example for rendering in React
export default function FaqPage() {
  return (
    <main>
      <h1>{data.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }}>
    </main>
  )
}

Options

• allowDangerousHtml: allow inline html in markdown (default: false).
• sanitize: when allowing inline html, sanitize unsafe markup (default: true).
• sanitationSchema: whan allowing inline html, sanitize with custom schema (default: github schema)
• remarkPlugins: a list of additional remark plugins (or [plugin, pluginOptions] tuple), e.g. remarkPlugins: [require('remark-smartypants'), [require('remark-footnotes'), { inlineNotes: true }]]