Markdown code extensions don't work in some situations

[JMaylor]

Describe the bug

Some of the code markdown extensions do not work when the language is vue.

In particular, [!code ++], [!code --], [!code warning], [!code error] and [!code focus] just show the comments at the end of the line.

Changing the language to something else fixes this, e.g. htmx or ts.

This only seems to happen in the template tags of a vue code block. The highlighting works absolutely fine in the script part. Please see reproduction for code examples, I can't figure out how to escape the triple backtick code blocks here! ☹️

Reproduction

https://stackblitz.com/edit/vite-arupmh?file=docs%2Fexample.md

Expected behavior

The markdown extensions should work correctly and highlight the lines as per the docs.

System Info

System:
  OS: macOS 14.1.2
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 488.47 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
  Yarn: 1.22.10 - /usr/local/bin/yarn
  npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Browsers:
  Chrome: 120.0.6099.234
  Firefox: 112.0.2
  Firefox Developer Edition: 107.0
  Safari: 17.1.2

Additional context

No response

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.

[jrson83]

Having the same issue when language is sh or bash using version 1.1.3.

[mak3]

Having the same issue when language is sh or bash using version 1.1.3.

@jrson83 For bash/sh you can use # [!code focus]
The difference is # instead of //.
Not sure if it's bug or feature, that laguage specific comment is required

For some basic snippets it's working, but it fails when line ends with backslash, so I can't add focus to multiline snippets.