Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattjennings/mdsvexamples
Render your Svelte code blocks in MDSveX
https://github.com/mattjennings/mdsvexamples
markdown mdsvex svelte
Last synced: about 8 hours ago
JSON representation
Render your Svelte code blocks in MDSveX
- Host: GitHub
- URL: https://github.com/mattjennings/mdsvexamples
- Owner: mattjennings
- Created: 2022-03-21T14:00:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-04T21:43:02.000Z (over 1 year ago)
- Last Synced: 2023-08-04T21:44:05.088Z (over 1 year ago)
- Topics: markdown, mdsvex, svelte
- Language: JavaScript
- Homepage:
- Size: 354 KB
- Stars: 28
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# mdsvexamples
Render your Svelte code blocks in MDSveX
````
# Button
An example of how to use our Button component
```svelte example
import Button from '$lib/Button.svelte'
Button
```
````
## Getting Started
```bash
npm install mdsvexamples
```
## Setup
There are two plugins that you need to add: a remark plugin and a vite plugin.
There are plugins provided for esbuild and rollup as well, as it uses [unplugin](https://github.com/unjs/unplugin), but I have not tested these so YMMV
### MDSveX
Add the remark plugin to your MDSveX config
```js
// mdsvex.config.js
import { defineMDSveXConfig as defineConfig } from 'mdsvex'
import examples from 'mdsvexamples'
const config = defineConfig({
extensions: ['.svelte.md', '.md', '.svx'],
smartypants: {
dashes: 'oldschool'
},
remarkPlugins: [examples],
rehypePlugins: []
})
export default config
```
### Vite
Add the vite plugin to your vite config
```js
// vite.config.js
import { defineConfig } from 'vite'
import examples from 'mdsvexamples/vite'
export default defineConfig({
plugins: [examples]
})
export default config
```
## Usage
Add `example` to your Svelte code block and it will be rendered
````
```svelte example
Button
```
````
Imports also work!
````
```svelte example
import Button from '../lib/Button.svelte'
Button
```
````
## Customization
Examples can take various configurations. The defaults for all can be set in the remark plugin, but you can
also provide them per-example as "meta" tags in the code block.
```js
{
remarkPlugins: [
[
examples,
{
defaults: {
foo: true,
bar: 'baz'
}
}
]
]
}
```
````
```svelte example foo bar="baz"
...
```
````
### Wrapper
Example code blocks are rendered with a [Svelte component](./src/lib/Example.svelte). You can provide your own if you wish to customize its look or behaviour.
```js
{
remarkPlugins: [
[
examples,
{
defaults: {
Wrapper: '/src/lib/Example.svelte',
// or if the component is a named export
Wrapper: ['some-package', 'CustomExample'] // -> import { CustomExample } from 'some-package'
}
}
]
]
}
```
When provided as code block meta, it can be relative to the file
````
```svelte example Wrapper="./Example.svelte"
...
```
````
```html
// the source of the example, if you want it
export let src
// all meta tags of the code block
export let meta
```
### csr
Forces the example to only be imported & rendered client-side. This is useful for examples that consume
libraries that may have issues server-side.
````
```svelte example csr
import BrowserOnlyComponent from '../lib/BrowserOnlyComponent.svelte'
```
````
### hideScript
Hides `` tags from being shown in the displayed code. This will also remove it from
the `src` prop if you have a custom Example component.
````
```svelte example hideScript
<script>
console.log("Hello World!")
Button
```
````
### hideStyle
Hides `` tags from being shown in the displayed code. This will also remove it from
the `src` prop if you have a custom Example component.
````
```svelte example hideStyle
<button>Button</button>
<style>
button {
background: green;
}
```
````