Render your Svelte code blocks in MDSveX
Render your Svelte code blocks in MDSveX
```Button
An example of how to use our Button component
`svelte example
`
`bash`
npm install mdsvexamples
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, but I have not tested these so YMMV
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
`
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
`
Add example to your Svelte code block and it will be rendered
``svelte example`
Imports also work!
``svelte example
`
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"
...
`
Example code blocks are rendered with a Svelte component. 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
$3
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
`
$3
Hides
`
Hides
`