MDsveX
MDsveX copied to clipboard
Retain raw value to enable reactivity within a code block
Is it possible to retain a raw value within a code block so that it gets processed by Svelte?
I am writing some interactive guides using markdown. The user inputs some data which yields some change within the code block. A contrived example would be:
<script>
$: projectName = 'mdsvex'
</script>
What project would you like to create?
<input type="text" bind:value={projectName} />
```bash
pnpm create svelte {projectName}
```
By default the above would yield
<pre><code>pnpm create svelte {projectName}</code></pre>
And what I'd like it to yield is
<pre class="{svelte_gen_val}"><code class="{svelte_gen_val}">pnpm create svelte mdsvex</code></pre>
Is there a way to get the benefits of syntax highlighting while also being able to interpolate values within the code block?
My current workaround is to manually create the interactive code blocks with <pre><code>
etc. I am hoping there is a smarter way!