vite-plugin-solid-marked

Vite plugin for solid-marked, the MDX/Markdown compiler for SolidJS.

Import a Markdown or MDX file and get back a SolidJS component. This is a thin wrapper around unplugin-solid-marked — use that one for any bundler other than Vite.

📖 Full documentation

Install

npm i solid-js solid-marked
npm i -D vite-plugin-solid-marked vite-plugin-solid

yarn add solid-js solid-marked
yarn add -D vite-plugin-solid-marked vite-plugin-solid

pnpm add solid-js solid-marked
pnpm add -D vite-plugin-solid-marked vite-plugin-solid

Usage

vite.config.js — the Markdown plugin emits JSX, so it has to come before vite-plugin-solid.

import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import solidMarked from 'vite-plugin-solid-marked';

export default defineConfig({
  plugins: [solidMarked({}), solid()],
});

.md, .mdx, .markdown, .mdown, .mkdn, .mkd, .mkdown and .ron files are picked up. Each becomes a module exporting the document, a TableOfContents when it has headings, and frontmatter when it has YAML or TOML frontmatter:

import Doc, { TableOfContents, frontmatter } from './doc.md';

A compiled document resolves its components at render time, so wrap it in an <MDXProvider> — see the solid-marked docs for the full setup, and examples/vite-demo for a runnable project.

Options

| Option | Type | Default | Description | | --------------------- | ----------------------- | ---------------- | ------------------------------------------------------------------------------- | | source | string | 'solid-marked' | Module the generated code imports useMDX from. Point it at your own provider. | | noDynamicComponents | boolean \| 'only-mdx' | false | Controls where <Dynamic> is used in the output. |

TypeScript

/// <reference types="solid-marked/env" />

[!IMPORTANT] This package is ESM-only. Node 20.19+ and 22.12+ can require() it through require(esm); older versions must import it.

Sponsors

License

MIT © lxsmnsyc