Code Block Highlighting is broken

[AzonInc]

Describe the bug

Heya, I'm experiencing a weird issue with Code Blocks which started by the beginning of this year after updating to a newer version from 1.3.2.
The Highlighting used to work fine with an older version of vitepress but now it seems to be broken.

Result right now:

The affected file is located here: https://github.com/AzonInc/Doorman/blob/master/docs/en/guide/firmware/additions.md

Reproduction

Create a Code Block using this MD:

binary_sensor: // [!code ++] // [!code focus]
  - platform: tc_bus // [!code ++] // [!code focus]
    name: "Custom Command" // [!code ++] // [!code focus]
    type: open_door // [!code ++] // [!code focus]
    address: 0 // [!code ++] // [!code focus]
    web_server: // [!code ++] // [!code focus]
      sorting_group_id: sorting_group_listeners // [!code ++] // [!code focus]

Expected behavior

// [!code ++] // [!code focus] shouldn't be visible and also not randomly applied.

System Info

System:
    OS: Windows 11 10.0.26120
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 9.89 GB / 31.91 GB
  Binaries:
    Node: 21.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
    pnpm: 6.11.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 135.0.7049.116
    Edge: Chromium (136.0.3240.29)
  npmPackages:
    vitepress: ^2.0.0-alpha.5 => 2.0.0-alpha.5

Additional context

Am I doing anything wrong or is it really broken?

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]

You should use yaml style comments in yaml. If you were using some language with C-like comment style then // [!code... would've worked fine.

```yaml
binary_sensor: # [!code ++] [!code focus]
  - platform: tc_bus # [!code ++] [!code focus]
    name: "Custom Command" # [!code ++] [!code focus]
    type: open_door # [!code ++] [!code focus]
    address: 0 # [!code ++] [!code focus]
    web_server: # [!code ++] [!code focus]
      sorting_group_id: sorting_group_listeners # [!code ++] [!code focus]
```

Older versions were using different transformer implementation which used bunch of regexes to parse stuff instead of relying on shiki tokens.

In case of values like tc_bus // [!code ++] [!code focus] probably stuff is getting broken into multiple highlighted tokens.
In case of properties like binary_sensor: // [!code ++] [!code focus] it wasn't.
Also, when writing multiple markers in same line, you shouldn't write // or # multiple times.

[AzonInc]

Thanks a lot for clarification :) That worked.
However i still have a problem with comments itself.

Example:

# Extend the doorbell_pattern event entity [!code ++] [!code focus]
# Add a new apartment_special event type [!code ++] [!code focus]
event: # [!code ++] [!code focus]
  - id: !extend apartment_doorbell_pattern # [!code ++] [!code focus]
    event_types: # [!code ++] [!code focus]
      - "apartment_special" # [!code ++] [!code focus]

# Extend the apartment_doorbell / entrance_doorbell entity [!code ++] [!code focus]
# and add your new special pattern [!code ++] [!code focus]
binary_sensor: # [!code ++] [!code focus]
  - id: !extend apartment_doorbell # [!code ++] [!code focus]
    on_multi_click: # [!code ++] [!code focus]
      # Special Pattern [!code ++] [!code focus]
      - timing: # [!code ++] [!code focus]
          # Press twice with no more than one second between each press. [!code ++] [!code focus]
          - ON for at most 0.5s # [!code ++] [!code focus]
          - OFF for at most 1s # [!code ++] [!code focus]
          - ON for at most 0.5s # [!code ++] [!code focus]
          - OFF for at least 2s # [!code ++] [!code focus]
        then: # [!code ++] [!code focus]
          - logger.log: "Special pattern detected!" # [!code ++] [!code focus]
          - event.trigger: # [!code ++] [!code focus]
              id: apartment_doorbell_pattern # [!code ++] [!code focus]
              # Use the previously defined new event type here [!code ++] [!code focus]
              event_type: apartment_special # [!code ++] [!code focus]

Results in:

[brc-dd]

Hmm, seems like the fix of shikijs/shiki#934 didn't handle all cases. For now you can do:

# Extend the doorbell_pattern event entity // [!code ++] [!code focus]
# Add a new apartment_special event type // [!code ++] [!code focus]
event: # [!code ++] [!code focus]
  - id: !extend apartment_doorbell_pattern # [!code ++] [!code focus]
    event_types: # [!code ++] [!code focus]
      - "apartment_special" # [!code ++] [!code focus]

# Extend the apartment_doorbell / entrance_doorbell entity // [!code ++] [!code focus]
# and add your new special pattern // [!code ++] [!code focus]
binary_sensor: # [!code ++] [!code focus]
  - id: !extend apartment_doorbell # [!code ++] [!code focus]
    on_multi_click: # [!code ++] [!code focus]
      # Special Pattern // [!code ++] [!code focus]
      - timing: # [!code ++] [!code focus]
          # Press twice with no more than one second between each press. // [!code ++] [!code focus]
          - ON for at most 0.5s # [!code ++] [!code focus]
          - OFF for at most 1s # [!code ++] [!code focus]
          - ON for at most 0.5s # [!code ++] [!code focus]
          - OFF for at least 2s # [!code ++] [!code focus]
        then: # [!code ++] [!code focus]
          - logger.log: "Special pattern detected!" # [!code ++] [!code focus]
          - event.trigger: # [!code ++] [!code focus]
              id: apartment_doorbell_pattern # [!code ++] [!code focus]
              # Use the previously defined new event type here // [!code ++] [!code focus]
              event_type: apartment_special # [!code ++] [!code focus]

I'll create an issue on shiki repo.

[brc-dd]

Please track shikijs/shiki#1007 instead.