vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.55k stars 2.05k forks source link

Shiki code extensions not working when using a different theme than default #4087

Open everdrone opened 1 month ago

everdrone commented 1 month ago

Describe the bug

The feature allowing // [!code --], // [!code focus] etc is seemingly disabled when the theme isn't the default "github" theme from Shiki.

Reproduction

Add a theme to the markdown configuration:

markdown: {
    theme: { dark: "rose-pine", light: "rose-pine-dawn" },
}

And add a code block with a transformation

```js
export default {
  data () {
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added' // [!code ++]
    }
  }
}

### Expected behavior

The effects work with other themes other than the default one

### System Info

```Text
System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
    Memory: 33.50 GB / 63.14 GB
  Binaries:
    Node: 20.15.0 - ~\AppData\Local\fnm_multishells\736048_1722274229696\node.EXE
    npm: 10.7.0 - ~\AppData\Local\fnm_multishells\736048_1722274229696\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
    Firefox: 128.0.3

Additional context

No response

Validations

brc-dd commented 1 month ago

Something seems wrong with rose-pine related themes. Other themes are working fine.

brc-dd commented 1 month ago

Ah, rose-pine is splitting comment node into separate tokens. It's same as #3503 (https://github.com/antfu/shikiji/issues/110#issuecomment-1912281613). Please create an issue at https://github.com/shikijs/shiki.