Closed ericfennis closed 1 year ago
What's the issue here? Syntax highlighting won't work with interpolated code. It's mentioned in the docs.
@brc-dd yeah I know. But doesn't mean it is expected behavior
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 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.
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: https://github.com/shikijs/shiki/issues/22, https://github.com/shikijs/shiki/pull/109
@brc-dd hmm that maybe will work. But will increase bundle size ofc. Will think of this. Thanks!
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
.
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?
You just need to generate the same html as we generate, rest is handled automatically. (No need of custom css or scripts for interactivity.)
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:
:::
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