Retain raw value to enable reactivity within a code block

[mstibbard]

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!

[PeppeL-G]

If I understand you right, then the answer is no; markdown runs on the server, long before client-side Svelte code runs, so for syntax high-lightening to work, Markdown needs to know all the code in the fenced code block already on the server-side. And it can't be dynamically updated once your Svelte code is executed by the user's web browser, because there Markdown is not running.

However, you can still in your Svelte component use client-side JS to include a runtime of Markdown yourself and run it each time the input changes.

Another suggestion is to write <pre class="{svelte_gen_val}"><code class="{svelte_gen_val}">pnpm create svelte{projectName}</code></pre> directly in the markdown file. Markdown will leave this as it is (since it sees it as HTML code), so Svelte will then pick up and use the {name} syntax. But for more complex examples this is probably not a good solution, because the dynamic code in the fenced code block has to be parsed by Markdown for Markdown to be able to generate correct HTML code for the syntax high-lightening.