Vite-Plugin-Md

A vite plugin for parsing md files based on marked.

Install

npm install @col0ring/vite-plugin-md -D
# or
yarn add @col0ring/vite-plugin-md -D

Usage

import { defineConfig } from 'vite'
import viteMdPlugin from '@col0ring/vite-plugin-md'

export default defineConfig({
  plugins: [
    // ...
    viteMdPlugin()
  ]
})

You can configure the marked renderer：

import { defineConfig } from 'vite'
import marked from 'marked'
import viteMdPlugin from '@col0ring/vite-plugin-md'

const renderer = new marked.Renderer()

// custom component
renderer.text = (text) => {
  return `<span>${text}</span>`
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...
    viteMdPlugin({
      markedOptions: {
        renderer
      }
    })
  ]
})

Use custom component，and you need to use absolute paths (such as alias and node_modules):

import { defineConfig } from 'vite'
import path from 'path'
import marked from 'marked'
import viteMdPlugin from '@col0ring/vite-plugin-md'

function resolve(relativePath: string) {
  return path.resolve(__dirname, relativePath)
}

const renderer = new marked.Renderer()

// use Link instead of a tag
renderer.link = (href, title, text) => {
  return `<Link to="${href}" title="${title}">${text}</Link>`
}

// custom component
renderer.text = (text) => {
  return `<Text>${text}</Text>`
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...
    viteMdPlugin({
      markedOptions: {
        renderer
      },
      imports: `
      import { Link } from 'react-router-dom'
      // import here
      import Text from '@/components/text'
      `
    })
  ],
  resolve: {
    alias: {
      '@src': resolve('./src')
    }
  }
})

Options

markedOptions

• Type: MarkedOptions
• Default: undefined

marked options.

imports

• Type: string
• Default: undefined

The code imported at the top of the markdown component.

native

• Type: boolean
• Default: 'false'

Enable dangerous html to display markdown component.