Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xbmlz/vite-plugin-solid-markdown
📄 Compile Markdown to Solid component
https://github.com/xbmlz/vite-plugin-solid-markdown
markdown mdx-js solidjs vite vite-plugin
Last synced: 27 days ago
JSON representation
📄 Compile Markdown to Solid component
- Host: GitHub
- URL: https://github.com/xbmlz/vite-plugin-solid-markdown
- Owner: xbmlz
- License: mit
- Created: 2022-12-14T10:12:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T06:55:41.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T07:53:09.075Z (about 1 month ago)
- Topics: markdown, mdx-js, solidjs, vite, vite-plugin
- Language: TypeScript
- Homepage: https://vite-plugin-solid-markdown.netlify.app
- Size: 364 KB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-solid-markdown
[![NPM version](https://img.shields.io/npm/v/vite-plugin-solid-markdown)](https://www.npmjs.com/package/vite-plugin-solid-markdown)
[![License](https://img.shields.io/npm/l/vite-plugin-solid-markdown)](https://npm-stat.com/charts.html?package=vite-plugin-solid-markdown)
[![Downloads](https://img.shields.io/npm/dm/vite-plugin-solid-markdown)](LICENSE)Compile Markdown to SolidJS component.
- Use Markdown as Solid components
- Use Solid components in Markdown## Install
Install
```bash
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()`
```ts
// 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
```jsx
import ReadMe from '../../README.md'
export default function Home() {
return (
)
}```
## Use Solid Components inside Markdown
You can even use Solid components inside your markdown, for example
```mdx
import Counter from '~/components/Counter'```
## Frontmatter
Frontmatter will be parsed and inject into Solid's instance data `frontmatter` field.
For example:
```md
export const name = 'My Cool App'
export const title = 'Hello ' + name + '!'# This is {name}
```Will be rendered as
```html
This is My Cool App
```It will also be passed to the wrapper component's props if you have set `wrapperComponent` option.
## Options
```ts
// 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](./src/types.ts) for more advanced options.
See [Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) for more rehype plugins.
See [Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) for more remark plugins.
## Example
See the [/example](./example).
Or the pre-configured starter template [Vitesse](https://github.com/xbmlz/vitesse-solid).
## TypeScript Shim
```ts
declare module '*.md' {
import type { Component } from 'solid-js'
const Component: Component
export default Component
}
```## License
MIT License © 2020-PRESENT [xbmlz](https://github.com/xbmlz)