Vite-plugin-flairmd NPM

vite-plugin-flairmd

A Vite plugin to parse complex Markdown files with frontmatter support and extendable parsing features.

Features

Parses Markdown files and converts them to HTML.
Extracts frontmatter as a separate export.
Supports code syntax highlighting.
Extensible with markdown-it plugins.
Configurable options for markdown-it.

Installation

npm install vite-plugin-flairmd --save-dev

Or if you are using yarn or pnpm:

yarn add -D vite-plugin-flairmd
pnpm add -D vite-plugin-flairmd

Usage

Add the plugin to your vite.config.js or vite.config.ts:

// vite.config.js
import { defineConfig } from "vite";
import flairmd from "vite-plugin-flairmd";

export default defineConfig({
  plugins: [
    flairmd({
      // Your custom options here
      themeStyles: "./path/to/theme.css", // Path to your custom theme styles
      highlightThemeStyle: "highlight.js/styles/googlecode.min.css", // Path to highlight.js theme styles
    }),
  ],
});

Now you can import Markdown files in your Vite project:

import { frontmatter, content } from "./path/to/file.md";

console.log(frontmatter); // Parsed frontmatter as an object
console.log(content); // Parsed Markdown content as HTML string

Options

You can pass options to the markdown-it parser:

flairmd({
  // specify style paths or false to disable the default style
  themStyles: false,
  // Custom highlight theme styles
  highlightThemeStyle: false,
  markdownItOptions: {
    // markdown-it options
  },
  markdownItUses: [
    // Array of markdown-it plugins to use
  ],
  markdownItSetup(md) {
    // A function to further customize markdown-it
  },
});

The plugin accepts an options object with the following properties

For more details on markdown-it options, please refer to the markdown-it documentation.