Print variable values in code snippets

[deevannaveed]

Is your feature request related to a problem? Please describe.

Basically I want to add dynamic values in code snippets see the example below, I want the links to have a dynamic version number.

MyMarkDown.md

<script setup>
  import { version } from '../../../packages/myPackage/package.json'
</script>
# Below is a code snippet that will contain our latest version.

```html
<!-- stylesheet -->
<link rel="stylesheet" href="https://mycdn.com/css/{{ version }}/style.min.css" />

<div>Some content</div>

<!-- 🚨 Script must be loaded after the component -->
<script src="https://mycdn.com/js/{{ version }}/script.min.js" ></script>

Describe the solution you'd like

I want to be able to print dynamic values in code snippets as show in the example above.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[kiaking]

Interesting 👀 Not sure how to achieve this, but if anyone knows a good way to do it, I'm curious to know.

[brc-dd]

We are adding v-pre here: https://cs.github.com/vuejs/vitepress/blob/19b0758a04e9fb7863b3a961024dfe1137fbe928/src/node/markdown/plugins/highlight.ts

I have a suggestion, users can do something like this:

```foo-vue
Don't add v-pre if -vue suffix is there.
Also remove suffix from lang so that highlighter don't complaint.
```

```foo
Otherwise add v-pre.
```

[brc-dd]

Okay so this doesn't always work. Since markdown parser is run first, {{ }} syntax may get highlighted so vue won't be able to substitute the values. For example in this result:

<span style="color: #A6ACCD">(</span><span style="color: #89DDFF">{</span><span style="color: #A6ACCD">{ z </span><span style="color: #89DDFF">}</span><span style="color: #A6ACCD">})</span>