vite-plugin-remark-rehype

tl;dr

This plugin allows you to import markdown files, add remark/rehype plugins to process the markdown files prior import as well as viewing markdown files directly from the vite dev server.

How to use

``ts
import { defineConfig } from "vite";
import vitePluginMiddleware from "vite-plugin-remark-rehype";

export default defineConfig({
plugins: [
vitePluginMiddleware(),
],
});
`

Adding type support

In your tsconfig.json

`json
{
"compilerOptions": {
"types": ["vite-plugin-remark-rehyp/types"]
}
}
`

Or you can add a .d.ts file in your project root containing

`ts
declare module "*.md" {
const html: string;
export default html;
}
`

Configuring Remark/Rehype

`ts
import { defineConfig } from "vite";
import vitePluginMiddleware from "../dist";

import remarkA11yEmoji from "@fec/remark-a11y-emoji";
import rehypeSanitize from "rehype-sanitize";

export default defineConfig({
plugins: [
vitePluginMiddleware({
remarkPlugins: [remarkA11yEmoji],
rehypePlugins: [rehypeSanitize],
}),
],
});
`

$3

`ts
import html from './test.md'
document.getElementById('markdown').innerHTML = html
`

$3

You can directly browse http://localhost:5173/markdown.md` and it will be processed and served.