support adding attributes to code blocks

[JounQin]

Describe the bug

https://github.com/vuejs/vitepress/blob/75ca9e4302c65e3bcc9518f7df928318380f6cf6/src/node/markdown/plugins/highlightLines.ts#L30

highlightLinePlugin is used before attrs, and token.info is rewritten.

via https://github.com/vuejs/vitepress/pull/664#discussion_r902203459

Reproduction

Expected behavior

Render data="asdf"

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 13.84 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/Library/Caches/fnm_multishells/95455_1655742557079/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/95455_1655742557079/bin/yarn
    npm: 8.12.1 - ~/Library/Caches/fnm_multishells/95455_1655742557079/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Firefox: 101.0.1
    Safari: 16.0
  npmPackages:
    vitepress: ^1.0.0-alpha.2 => 1.0.0-alpha.2

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

The issue is not due to highlightLinePlugin. I tried removing that. It still don't show attributes on code block. It is working if I remove highlight option altogether. :/

[kiaking]

What is expected to happen here? I mean where should data="asdf" appear? On pre or code or <div class="language-...">? 👀

Is this common feature that markdown attrs plugin supports?

[brc-dd]

@kiaking https://github.com/arve0/markdown-it-attrs#:~:text=And%20fenced%20code%20blocks%3A

[kiaking]

Oh thanks! OK... well yeah seems like we should be supporting this then 😅

How do we combine this with Line Highlighting? Should below work...?

```ts{4}{data=asdf}

[brc-dd]

Don't think they both will play nice with each other. Here is a workaround for that: https://github.com/arve0/markdown-it-attrs/issues/63#issuecomment-390463460 -- or we can probably modify our highlightLinePlugin to use different limiters.

[kiaking]

Nice we have workaround. Yeah and I agree if we were to change anything, we should change highlightLinePlugin syntax. It's a small breaking change but, this is the time to introduce that change.

[JounQin]

I'd like to work on this change if you agree to the current workaround solution.

[kiaking]

Yeah, I think we could try! So the ideal syntax would be...

```ts[4]{data=asdf}

or

```ts {data=asdf} [4]

But I guess we need to do some try and errors and see if this API fits well without any confusing edge cases.

[JounQin]

@kiaking [] could occur in {} at the same time?

```ts {data=[0]}
```

[kiaking]

Well I don't think so...? Is there any use case for it?

[JounQin]

Well I don't think so...? Is there any use case for it?

Oh, sorry, I'm not so familiar with highlightLinePlugin yet, will {data=[0]} be parsed incorrectly? if not, that's great.

Not a real case for now, but it could happen in theory.