代码高亮渲染异常

[Tdahuyou]

Describe the bug

eg.

export default {
  data () {
    return {
      msg1: '1 Highlighted!' // [!code highlight]
      msg2: '2 Highlighted!' // [!code highlight]
      msg3: '3 Highlighted!' // [!code highlight]
    }
  }
}

export default {
  data () {
    return {
      // msg1: '1 Highlighted!' // [!code highlight]
      // msg2: '2 Highlighted!' // [!code highlight]
      // msg3: '3 Highlighted!' // [!code highlight]
    }
  }
}

Reproduction

{
"devDependencies": {
"vitepress": "2.0.0-alpha.2"
},
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
}
}

Expected behavior

在被注释的代码行后面添加 // [!code highlight] 高亮的位置错误。

export default {
  data () {
    return {
      // msg1: '1 Highlighted!' // [!code highlight]
    }
  }
}

System Info

Chrome: 132.0.6834.160

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.

[brc-dd]

Please create an issue at https://github.com/shikijs/shiki. This was reported to us on our Discord earlier too. Seems like this is a possible workaround but looks very unintuitive to write:

```js-vue
export default {
  data () {
    return {
      {{''}}// msg1: '1 Highlighted!' [!code highlight]
    }
  }
}
```