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: 30 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)