Feature Request: twoslash-like for UnoCSS

[litingyes]

Clear and concise description of the problem

Is it possible to provide a twoslash-like function for unocss code snippets? Otherwise, it is inconvenient to intuitively view the effective CSS style in the non-editor state.

Suggested solution

Not yet, but it could be

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• 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]

You can write a twoslash implementation following the protocol and reuse @shikijis/twoslash package: https://github.com/twoslashes/twoslash/tree/main/packages/twoslash-protocol

For example, here is an implementation for ESLint: https://github.com/twoslashes/twoslash/tree/main/packages/twoslash-eslint

I don't have the bandwidth to work on this right now, so feel free to give it a shot if anyone wants to try.

[litingyes]

You can write a twoslash implementation following the protocol and reuse @shikijis/twoslash package: https://github.com/twoslashes/twoslash/tree/main/packages/twoslash-protocol

For example, here is an implementation for ESLint: https://github.com/twoslashes/twoslash/tree/main/packages/twoslash-eslint

I don't have the bandwidth to work on this right now, so feel free to give it a shot if anyone wants to try.

OK, I will try it during the National Day holiday.