Idea: Start/Stop Transformer blocks

[richardgill]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

This suggestion applies to any common transformers which support range.

I'll use // [!code highlight] as an example.

When using @shikijs/transformers there are 3 options for highlighting many (N) lines of code:

a)

console.log('highlight') // [!code highlight]
console.log('highlight') // [!code highlight]
console.log('highlight') // [!code highlight]

• This requires N comments.
• This doesn't work well with some code formatters like prettier which unconditionally moves comments.
• Users must remember to add more comments when they add more lines of code they want to highlight (feels ~ok though)

b)

// [!code highlight:4]
console.log('highlight') 
console.log('highlight') 
console.log('highlight')

• Requires 1 comment ✅
• Works with code formatter ✅
• If a user adds more code it's easy to forget to change 4 -> 5 (brittle)

c)

```ts {1-3}
console.log('highlight') 
console.log('highlight') 
console.log('highlight')
```

• Requires 1 meta ✅
• Works with code formatter ✅
• If a user adds more code it's easy to forget to change 1-3 -> 1-4 (brittle)
• Not every code block has a meta

Idea: Start and Stop blocks.

Inspiration: // prettier-ignore-start and // prettier-ignore-end: https://prettier.io/docs/en/ignore.html#range-ignore

// [!code highlight-start]
console.log('highlight') 
console.log('highlight') 
console.log('highlight')
// [!code highlight-end]

• Requires 2 lines of code ✅
• Works with code formatter ✅
• If a user adds more code it works

New transformer: transformerStartEndRange

Usage:

  transformers: [
    startEndTransformer(['highlight']), // must go before transformerNotationHighlight
    transformerNotationHighlight()
  ]

This transformer transforms code like this:

// [!code highlight-start]
console.log('highlight') 
console.log('highlight') 
console.log('highlight')
// [!code highlight-end]

Becomes:

// [!code highlight:4]
console.log('highlight') 
console.log('highlight') 
console.log('highlight')

Then transformerNotationHighlight can do it's normal thing.

It works with any existing transformer which accepts a 'range' e.g. :4 as a parameter.

PR

I've written this transformer in a project I'm working on, If you'd accept a PR for this transformer let me know and I'll hopefully be able to create a PR for it 👍

Let me know what naming conventions etc. you'd like (my proposal introduces a - but that might not be what you had in mind)

Reproduction

idea, no repro

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests