search

shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.09k stars 53 forks source link

Adding language ID to the `class` attribute #166

Open hasparus opened 2 years ago

hasparus commented 2 years ago

👋 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

orta commented 2 years ago

Yep, I think this is totally reasonable 👍🏻