feat(rehype): support inline codes

[fuma-nama]

Description

Support to highlight inline codes with code{:language} syntax.

It isn't enabled by default to avoid problems when people upgrading from older versions of Shiki.
The output is basically same as normal code blocks but with pre replaced by a span element.

<span class="shiki ...">
<code>...</code>
</span>

Linked Issues

#660

Additional context

Should we give additional information to transformers, or allow to pass different options for inline code highlighting?

[netlify]

✅ Deploy Preview for shiki-next ready!

Name	Link
🔨 Latest commit	4d81712
🔍 Latest deploy log	https://app.netlify.com/sites/shiki-next/deploys/66c745f3308bd9000832406f
😎 Deploy Preview	https://deploy-preview-751--shiki-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for shiki-matsu ready!

Name	Link
🔨 Latest commit	4d81712
🔍 Latest deploy log	https://app.netlify.com/sites/shiki-matsu/deploys/66c745f32394780008f7c60e
😎 Deploy Preview	https://deploy-preview-751--shiki-matsu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jcayzac]

Using the proposed syntax code{:language} makes the plugin incompatible with MDX.

[fuma-nama]

Hmm it should work on both markdown, MDX, and probably the markdown syntax of Vitepress too.

`console.log("Hello World"){:js}`

[jcayzac]

Is this just for lang? How do you pass the rest of the meta string? e.g. js /Hello/ when using transformerMetaWordHighlight ?

[fuma-nama]

It doesn't work with transformers, I would just suggest to use code blocks if you want to use them.

[jcayzac]

It doesn't work with transformers, I would just suggest to use code blocks if you want to use them.

Why not making it work?

Using code blocks for inline code isn't really an option.

[fuma-nama]

It should be discussed in a separate issue with enough details on how transformers can be re-implemented for inline codes, and it makes no sense to use transformers like line highlight, focus on an inline code. Twoslash, notation transformers cannot even work without multiline code blocks, I'd say it's probably useless and further discussion is needed.

For now, it's better to avoid changes on transformer API

[codecov]

Codecov Report

Attention: Patch coverage is 94.06780% with 7 lines in your changes missing coverage. Please review.

Project coverage is 94.58%. Comparing base (bbf37b1) to head (4d81712).
Report is 1 commits behind head on main.

Files	Patch %	Lines
packages/rehype/src/core.ts	92.70%	7 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #751      +/-   ##
==========================================
+ Coverage   94.52%   94.58%   +0.05%     
==========================================
  Files          64       65       +1     
  Lines        3874     3931      +57     
  Branches      859      870      +11     
==========================================
+ Hits         3662     3718      +56     
- Misses        207      208       +1     
  Partials        5        5              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jcayzac]

@fuma-nama

it makes no sense to use transformers like line highlight, focus on an inline code.

I use transformerMetaWordHighlight in inline code (I pass the meta programmatically, using a component, not through rehype).

I don't understand the point about avoiding changes on transformer API being better. That's my point exactly. There's nothing special about inline code.

[fuma-nama]

Because this PR is about the Rehype integration of Shiki, you can also contribute by opening a PR.