Syntax highlighting not working for Vue interpolated code blocks

[ericfennis]

Describe the bug

We wrote a markdown code group to dynamically generate code for each framework. Unfortunately, the syntax highlighting is not working when using Vue interpolated code blocks, which is known and mentioned in the docs.

Reproduction

Create an array or object with code examples to fill each code block

The markdown:

<script setup>
const codeExample = {..}
</script>

::: code-group

```html-vue [HTML]
{{codeExample.html.code}}
```

```jsx-vue [React]
{{codeExample.react.code}}
```

```vue-vue [Vue]
{{codeExample.vue.code}}
```

```svelte-vue [Svelte]
{{codeExample.svelte.code}}
```

```jsx-vue [Preact]
{{codeExample.preact.code}}
```

```jsx-vue [Solid]
{{codeExample.solid.code}}
```

```tsx-vue [Angular]
{{codeExample.angular.code}}
```

```html-vue [Font]
{{codeExample.font.code}}
```

```html-vue [Flutter]
{{codeExample.flutter.code}}
```
:::

Visual Result

Expected behavior

Expected result:

System Info

System:
    OS: macOS 13.3
    CPU: (12) arm64 Apple M2 Max
    Memory: 784.03 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.4
  npmPackages:
    vitepress: 1.0.0-alpha.73 => 1.0.0-alpha.73

Additional context

In the documentation, this is mentioned: "Note that this might prevent certain tokens from being syntax highlighted properly."
Source: https://vitepress.dev/guide/using-vue#unescape-in-code-blocks
But none of the code blocks are syntax highlighted.

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

What's the issue here? Syntax highlighting won't work with interpolated code. It's mentioned in the docs.

[ericfennis]

@brc-dd yeah I know. But doesn't mean it is expected behavior

[ericfennis]

I see you labeled the issue as "Won't fix". But can you maybe explain why it's not possible. Are there technical limitations why syntax highlighting is broken when using Vue interpolation? Or did you only labeled it as unfixed because it is written in de docs that it is not working?

[LinusBorg]

1. Reporting a bug for a known and documented behavior will result in the report being closed, because there is no bug. If anything, this should have been a feature request.
2. It's not going to be fixed because markdown conversion to HTML (and code-blocks as part of that) happens before the result is being evaluated as a Vue component template (at which point interpolation would happen). So syntax highlighting happens before interpolation, and that is kind of an architectural foundation that we cannot re-work easily.

[ericfennis]

@LinusBorg yeah maybe it should be feature request then. Sorry for that.

Thanks for the explanation. I understand now what the problem is.

Do you maybe know a workaround? How I can dynamically render code-snippets with syntax highlighting.

[brc-dd]

You can try creating a component that takes the code as text and highlights + renders it as code block 👀

Using shiki should be possible on the browser IMO: shikijs/shiki#22, shikijs/shiki#109

[ericfennis]

@brc-dd hmm that maybe will work. But will increase bundle size ofc. Will think of this. Thanks!

[brc-dd]

Yeah it will add around 100-200kB to the bundle size. How are you getting that codeExample object? If that has no client-side dependency, you can use data loading to render the code directly in the server and pass it as string to the md file and use it with v-html.

[ericfennis]

Yeah we using the dat loading feature with Parma as well. Using v-html also good option. Maybe I can use the internal code highlighter from vitepress to do this. Do you think it will be hard to get the tabs/codegroups working as well?

[brc-dd]

You just need to generate the same html as we generate, rest is handled automatically. (No need of custom css or scripts for interactivity.)