@shikijs/transformers: extend matchAlgorithm with a start index

[Fro-Q]

Clear and concise description of the problem

When attempting to add a transformer notation within an HTML snippet, it is currently impossible to highlight specific lines, such as lines 2–3, in cases like this:

<div
  class="test"
  style="color: white"
>
  test case
</div>

Suggested solution

Introduce a matchAlgorithm that supports matching lines with both a start and end index. Currently, the match must begin from the line containing the comment. For example, // [!code highlight:5] on line 3 results in a match of lines 3–7. Instead, we could allow specifying a range, such as // [!code highlight:2-5], which would match lines 4–7.

If the start index is not explicitly provided, the default value remains 1, ensuring no breaking changes.

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

[Fro-Q]

This feature has already been implemented. If this request is approved, I will submit the PR as soon as possible.

Here’s an example of how it works when matchAlgorithm is set to 'v3'

```js
// [!code highlight:2-4]
console.log('nothing')
console.log('highlighted')
console.log('highlighted')
console.log('highlighted')

// [!code ++:3-4]
console.log('nothing')
console.log('nothing')
console.log('diff add')
console.log('diff add')

console.log('nothing')  // [!code --:2-4]
console.log('diff remove')
console.log('diff remove')
console.log('diff remove')

// no breaking changes
console.log('error')  // [!code error:3]
console.log('error')
console.log('error')
console.log('nothing')
```

It will be rendered as:

This image should be self-explanatory. The CSS code is omitted for brevity.