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.
npm install @mr.python/vite-plugin-remark-rehypeThis 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.
``ts
import { defineConfig } from "vite";
import vitePluginMiddleware from "vite-plugin-remark-rehype";
export default defineConfig({
plugins: [
vitePluginMiddleware(),
],
});
`
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;
}
`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],
}),
],
});
`
`ts`
import html from './test.md'
document.getElementById('markdown').innerHTML = html
You can directly browse http://localhost:5173/markdown.md` and it will be processed and served.