{"repo":"mattjennings/mdsvexamples","free":true,"listed":false,"github":"https://github.com/mattjennings/mdsvexamples","clone":"git clone https://github.com/mattjennings/mdsvexamples.git","description":"Render your Svelte code blocks in MDSveX","language":"JavaScript","stars":38,"topics":["svelte","mdsvex","markdown"],"license":null,"category":"productivity","readme_excerpt":"mdsvexamples Render your Svelte code blocks in MDSveX svelte example import Button from '$lib/Button.svelte' Button Getting Started 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, but I have not tested these so YMMV MDSveX Add the remark plugin to your MDSveX config Vite Add the vite plugin to your vite 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. svelte example foo bar=\"baz\" ... Wrapper Example code blocks are rendered with a Svelte component. You can provide your own if you wish to customize its look or behaviour. When provided as code block meta, it can be relative to the file svelte example Wrapper=\"./Example.svelte\" ... 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 console.log(\"Hell","default_branch":null,"files":null,"tree":[],"storefront":"/r/mattjennings","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/mattjennings/mdsvexamples/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}