@shikijs/transformers: add transformerFold

[typed-sigterm]

Clear and concise description of the problem

Just like folding in Monaco Editor:

It's useful when the codeblock is large.

Can we have this?

Suggested solution

Add a transformer transformerFold to @shikijs/transformers

**Shiki Style Syntax**:

```ts
// [!code fold:start] variables
let a = 1

// [!code fold:start] variable b
let b = 1
// [!code fold:end]

// [!code fold:end]

console.log(a, b)
```

**Monaco Style Syntax**:

```ts
// #region variables
let a = 1

// #region variable b
let b = 1
// #endregion

// #endregion

console.log(a, b)
```

Render to:

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]

That's interesting, I love that idea! I would love to see how you implement it, let's see the PR!

[typed-sigterm]

I'm sorry that I'm preparing for 中考 and may not have time to implement this :(

[Fro-Q]

I will try to implement this one.

[Codingmaster123fe]

I think that will work in my opinion because I had the same issue to

[candle-admin]

This would be super useful!

[Fro-Q]

I’ve implemented this feature, but the approach is somewhat unconventional, and the code is a bit messy due to limited technical skills. So there won’t be a PR. However, you can check out this repo and use it in VitePress as a customTransformer.

If anyone has a better implementation or would like to discuss my messy approach further, feel free to reach out.

[typed-sigterm]

Maybe <details> can be used to avoid injecting JS.