unplugin-solid-marked

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

Import a Markdown or MDX file and get back a SolidJS component, in Vite, Rollup, Rolldown, webpack, Rspack, esbuild or Farm. On Vite you can use vite-plugin-solid-marked instead.

📖 Full documentation

Install

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

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

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

Usage

The plugin emits JSX, so it has to run before the Solid JSX transform. See unplugin for the full list of bundler entry points.

import solidMarked from 'unplugin-solid-marked';
import solid from 'vite-plugin-solid';

// Vite
export default {
  plugins: [solidMarked.vite({}), solid()],
};

// Rollup, webpack, ...
solidMarked.rollup({});
solidMarked.webpack({});

.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.

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