vite-remark-html

vite-remark-html

Process markdown with remark-html

Basically, when you import a .md file, you'll get back a JS module with an HTML string as its default export. There are various options to customize the HTML output.

 

Usage

import remarkHtml from 'vite-remark-html'

export default {
  plugins: [remarkHtml()],
}

Filter options

Markdown files can be filtered, in case you only want a subset to be processed by this plugin. For more details, see here.

remarkHtml({
  exclude: /\/node_modules\//
})

HTML options

All options listed here are also supported.

remarkHtml({
  allowDangerousHtml: true
})

Using the HTML

In your client code, you can use import or dynamic import() to load the HTML string.

import html from './test.md'
// or
const htmlPromise = import('./test.md').then(module => module.default)

Then you can use that as the innerHTML of another element.

document.getElementById('markdown').innerHTML = html
// or
<div dangerouslySetInnerHtml={{ __html: html }} />

Try the demo to see it in action.

TypeScript usage

In your tsconfig.json

{
  "compilerOptions": {
    "types": ["vite-remark-html/client"]
  }
}

This lets you import .md files with type-checking support.