vite-plugin-md-to-html

0.0.18 verified Mon Apr 27 auth: no javascript

Vite plugin to convert Markdown files to HTML strings at build time, with front-matter extraction, optional syntax highlighting via highlight.js, and relative image path resolution. Version 0.0.18 is the latest stable release, with monthly updates. Differentiators: zero-config setup for plain HTML output (no framework coupling), built-in image resolution for Vite asset handling, and optional build-time syntax highlighting. Targets developers using Vite who want to import .md files as HTML strings without a frontend framework.

Common errors

error Cannot find module './test.md' or its corresponding type declarations. ↓

cause TypeScript cannot resolve .md imports without a type declaration.

fix

Add /// <reference types='vite-plugin-md-to-html/types' /> to a global.d.ts file.

error [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. ↓

cause Vite fails to parse .md file if the plugin is not properly configured in config.

fix

Ensure the plugin is added to the vite.config.js/ts plugins array.

error Uncaught TypeError: Failed to resolve module specifier 'vite-plugin-md-to-html'. Relative references must start with either '/', './', or '../'. ↓

cause The package is not installed or not imported correctly.

fix

Run npm install --save-dev vite-plugin-md-to-html and verify import path.

Warnings

breaking In versions before v0.0.14, image path resolution only worked in CSR, not SSR/SSG. ↓

fix Upgrade to v0.0.14 or later for SSR/SSG support.

deprecated The option 'markdownIt' is passed through to markdown-it but is not officially typed in PluginOptions until later versions. ↓

fix Use the 'markdownIt' option and ensure you have the correct type definitions.

gotcha Images in markdown are not resolved by default; you must enable 'resolveImageLinks' option. ↓

fix Set resolveImageLinks: true in plugin options.

gotcha Syntax highlighting CSS is not included; you must import a highlight.js stylesheet separately. ↓

fix import 'highlight.js/styles/github.css';

Install

npm install vite-plugin-md-to-html

yarn add vite-plugin-md-to-html

pnpm add vite-plugin-md-to-html

Imports

vitePluginMdToHTML

wrong

import vitePluginMdToHTML from 'vite-plugin-md-to-html'

correct

import { vitePluginMdToHTML } from 'vite-plugin-md-to-html'

Named export, not default. TypeScript types are included.

attributes
wrong
```
import attributes from './test.md'
```
correct
```
import { attributes } from './test.md'
```
attributes is a named export from the compiled markdown module. Default export is the HTML string.

PluginOptions

import type { PluginOptions } from 'vite-plugin-md-to-html'

TypeScript only; available since v0.0.14.

Quickstart

Shows Vite plugin setup with image resolution and syntax highlighting, plus importing .md to get HTML string and frontmatter attributes.

// vite.config.ts
import { defineConfig } from 'vite';
import { vitePluginMdToHTML } from 'vite-plugin-md-to-html';

export default defineConfig({
  plugins: [
    vitePluginMdToHTML({
      resolveImageLinks: true,
      syntaxHighlighting: true
    })
  ]
});

// src/main.ts
import html, { attributes } from './test.md';

document.title = attributes.title ?? '';
document.querySelector('#app')!.innerHTML = html;

type Frontmatter = {
  title?: string;
  // ... other fields
};