Skip to content

use a meta string to highlight lines #4704

Open
@Fro-Q

Description

@Fro-Q

Describe the bug

The feature appears to be working correctly. However, I've noticed that VitePress implements its own additional processing for the meta highlight functionality, which could potentially be replaced by Shiki's built-in transformerMetaHighlight.

The core issue that led to this being reported as a bug stems from how VitePress handles line number metadata. When syntax like {1,3} is used, the braces are stripped during processing and only the numbers are preserved in token.info:

https://github.com/vuejs/vitepress/blob/19faa16169b44f52bedf1401b4a97b2a8ffdeacb/src/node/markdown/plugins/highlightLines.ts#L45C5-L45C30

Subsequently, the actual highlighting implementation operates on the bare 1,3 format rather than the documented {1,3} syntax:

https://github.com/vuejs/vitepress/blob/19faa16169b44f52bedf1401b4a97b2a8ffdeacb/src/node/markdown/plugins/highlight.ts#L27C3-L27C68

This implementation discrepancy with the official documentation causes transformerMetaHighlight to fail when attempting to match the expected {1,3} pattern.

Reproduction

  1. Fork and clone VitePress repo.
  2. Comment attrsToLines() function (line 26 - 48), line 124 and line 155.
  3. Add import of transformerMetaHighlight from @shikijs/transformers and use it in const transformers (line 43).
  4. Run docs server and navigate to "Markdown Extensions - Line Highlighting in Code Blocks". The lines are not highlighted apparently.

Expected behavior

The line numbers meta inside the braces is expected to be matched instead of ones without brace.

shiki's transformerMetaHighlight can be used to implement the feature.

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M2
    Memory: 95.88 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    npm: 11.1.0 - ~/.nvm/versions/node/v22.13.0/bin/npm
    pnpm: 9.15.4 - ~/.nvm/versions/node/v22.13.0/bin/pnpm
  Browsers:
    Chrome: 135.0.7049.96
    Safari: 18.0.1

Additional context

I will create a PR right away.

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions