Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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)