twoslash icon indicating copy to clipboard operation
twoslash copied to clipboard

Adding language ID to the `class` attribute

Open hasparus opened this issue 3 years ago • 1 comments

👋 Hello. Firstly, thank you for shiki-twoslash. It's amazing.

I'd like to post this as a humble feature request.


Problem

Knowing the language of the code snippet in CSS may be quite useful in a few cases.

AFAIK it's not possible right now with remark-shiki-twoslash without a second pass with a rehype plugin?

Possible Solution

The remark plugin could accept a configuration option to set attributes of the pre element at the root of the code block. This would later be used in preOpenerFromRenderingOptsWithExtras in shiki-twoslash.

Workaround

I used pnpm patch to quickly add opts.langId to the classList in preOpenerFromRenderingOptsWithExtras.

https://github.com/shikijs/twoslash/blob/eb286da4548f964a800bde1dc6c2051993b2cafc/packages/shiki-twoslash/src/renderers/plain.ts#L12-L18

hasparus avatar Oct 13 '22 09:10 hasparus

Yep, I think this is totally reasonable 👍🏻

orta avatar Oct 13 '22 09:10 orta