`@shikijs/rehype`: support for inline code

[jeremt]

Clear and concise description of the problem

There is no support for highlighting inline code (similarly to rehype-pretty-code). It would be nice to be able to highlight something like console.log('coucou').

Suggested solution

Apply highlighting when there is something like `console.log('coucou'){:js}`

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• [ ] If this feature request is accepted, I am willing to submit a PR to fix this issue

[antfu]

It would be a good feature to have - however I don't know what syntax we should follow as there is not standard right now. I see people doing

• `code`{lang=js}
• `code`{js}
• `code`{.js}
• `code{:js}`

[souporserious]

In my own parser, I parse a prefix that works similar to normal triple slash code blocks: `js const a = 'a'`

And similarly these can be tagged with a filename: `filename.js const a = 'a'`

The presence of the space is used to determine if it needs highlighting, so this wouldn't be highlighted for example: `js`

The idea was to bring familiarity with how it's already done in code blocks. However, this does unfortunately look weird in raw markdown since it's embedded in the code snippet.

[fuma-nama]

I think `code{:js}` will be better since people migrating from rehype-pretty-code will need it and it shouldn't break existing transformers (theoretically). This doesn't follow the standard markdown format and I'm not sure if any change to Shiki core/transformers is needed to support this feature.