Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@shikijs/transformers: add transformerFold #861

Open
4 tasks done
typed-sigterm opened this issue Dec 7, 2024 · 1 comment
Open
4 tasks done

@shikijs/transformers: add transformerFold #861

typed-sigterm opened this issue Dec 7, 2024 · 1 comment

Comments

@typed-sigterm
Copy link

Clear and concise description of the problem

Just like folding in Monaco Editor:

image

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:

image

Alternative

No response

Additional context

No response

Validations

Contributes

  • If this feature request is accepted, I am willing to submit a PR to fix this issue
@antfu
Copy link
Member

antfu commented Dec 10, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants