vite-plugin-solid-markdown
Compile Markdown to SolidJS component.
- Use Markdown as Solid components
- Use Solid components in Markdown
Install
Install
npm 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()
// vite.config.js
import solid from 'solid-start/vite'
import { defineConfig } from 'vite'
import md from 'vite-plugin-solid-markdown'
export default defineConfig({
plugins: [
md(),
solid({
extensions: ['.mdx', '.md'],
}),
],
})
And import it as a normal Solid component
Import Markdown as Solid components
import ReadMe from '../../README.md'
export default function Home() {
return (
<div>
<ReadMe />
</div>
)
}
Use Solid Components inside Markdown
You can even use Solid components inside your markdown, for example
import Counter from '~/components/Counter'
<Counter />
Frontmatter
Frontmatter will be parsed and inject into Solid's instance data frontmatter field.
For example:
export const name = 'My Cool App'
export const title = 'Hello ' + name + '!'
# This is {name}
Will be rendered as
<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
// vite.config.js
import solidPlugin from 'solid-start/vite'
import { defineConfig } from 'vite'
import Markdown from 'vite-plugin-solid-markdown'
import remarkPrism from 'remark-prism'
export default defineConfig({
plugins: [
solidPlugin({
extensions: ['.mdx', '.md'],
}),
Markdown({
wrapperClasses: 'prose prose-sm m-auto text-left',
remarkPlugins: [remarkPrism],
// more options will be added in the future
}),
],
})
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
declare module '*.md' {
import type { Component } from 'solid-js'
const Component: Component
export default Component
}
License
MIT License © 2020-PRESENT xbmlz
