vite-plugin-solid-markdown

Compile Markdown to SolidJS component.

• Use Markdown as Solid components
• Use Solid components in Markdown

Install

Install

1npm i vite-plugin-solid-markdown -D # yarn add vite-plugin-solid-markdown -D

Add it to vite.config.js

⚠️ Note: md() should be placed before solid()

1// vite.config.js
2import solid from 'solid-start/vite'
3import { defineConfig } from 'vite'
4import md from 'vite-plugin-solid-markdown'
5
6export default defineConfig({
7  plugins: [
8    md(),
9    solid({
10      extensions: ['.mdx', '.md'],
11    }),
12  ],
13})

And import it as a normal Solid component

Import Markdown as Solid components

1
2import ReadMe from '../../README.md'
3
4export default function Home() {
5  return (
6    <div>
7      <ReadMe />
8    </div>
9  )
10}
11

Use Solid Components inside Markdown

You can even use Solid components inside your markdown, for example

1import Counter from '~/components/Counter'
2
3<Counter />

Frontmatter

Frontmatter will be parsed and inject into Solid's instance data frontmatter field.

For example:

1export const name = 'My Cool App'
2export const title = 'Hello ' + name + '!'
3
4# This is {name}

Will be rendered as

1<h1>This is My Cool App</h1>

It will also be passed to the wrapper component's props if you have set wrapperComponent option.

Options

1// vite.config.js
2import solidPlugin from 'solid-start/vite'
3import { defineConfig } from 'vite'
4import Markdown from 'vite-plugin-solid-markdown'
5import remarkPrism from 'remark-prism'
6
7export default defineConfig({
8  plugins: [
9    solidPlugin({
10      extensions: ['.mdx', '.md'],
11    }),
12    Markdown({
13      wrapperClasses: 'prose prose-sm m-auto text-left',
14      remarkPlugins: [remarkPrism],
15      // more options will be added in the future
16    }),
17  ],
18})

See the tsdoc for more advanced options.

See Rehype plugins for more rehype plugins.

See Remark plugins for more remark plugins.

Example

See the /example.

Or the pre-configured starter template Vitesse.

TypeScript Shim

1declare module '*.md' {
2  import type { Component } from 'solid-js'
3  const Component: Component
4  export default Component
5}

License

MIT License © 2020-PRESENT xbmlz