Torchlight.dev — The VS Code Compatible Syntax Highlighting API.

Diff Indicators

If you haven't taken a look at how to annotate diff lines, head over to the annotations before reading here.

In this section we'll be covering controlling the +/- indicators that you may or may not prefer to show on your site.

Here is an example of a diff, with no indicators.

1return [
2 'extensions' => [
3 // Add attributes straight from markdown.
4 AttributesExtension::class,
5 
6 // Add Torchlight syntax highlighting.
7 SomeOtherHighlighter::class,
8 TorchlightExtension::class,
9 ]
10]

Notice that the colors of the lines just change to the standard colors you expect to see.

If you'd like to show the +/- indicators, you can do so by turning them on at the block level, or globally in your client's configuration.

For these examples we'll do it at the block level so we can see how it works.

Let's change the behavior by sending diffIndicators: true to the API.

1// torchlight! {"diffIndicators": true}
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6
7 // Add Torchlight syntax highlighting.
8 SomeOtherHighlighter::class, // [tl! remove]
9 TorchlightExtension::class, // [tl! add]
10 ]
11]

Take a look where the line numbers are and notice the indicators:

1return [
2 'extensions' => [
3 // Add attributes straight from markdown.
4 AttributesExtension::class,
5 
6 // Add Torchlight syntax highlighting.
- SomeOtherHighlighter::class,
+ TorchlightExtension::class,
9 ]
10]

(Note: If you'd like to reindex the line numbers after a diff, you can do that!)

Standalone Indicators

By default we swap them in place of the line numbers, but you can also disable that behavior by using the extremely descriptive, verbose option diffIndicatorsInPlaceOfLineNumbers.

1// torchlight! {"diffIndicators": true, "diffIndicatorsInPlaceOfLineNumbers": false}
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6
7 // Add Torchlight syntax highlighting.
8 SomeOtherHighlighter::class, // [tl! remove]
9 TorchlightExtension::class, // [tl! add]
10 ]
11]
1 return [
2 'extensions' => [
3 // Add attributes straight from markdown.
4 AttributesExtension::class,
5  
6 // Add Torchlight syntax highlighting.
7- SomeOtherHighlighter::class,
8+ TorchlightExtension::class,
9 ]
10 ]

Now the line numbers remain, and the indicators get their own column.

Each standalone indicator has the diff-indicator class applied, along with one of the following:

  • diff-indicator-add - For lines that were added
  • diff-indicator-remove - For lines that were removed
  • diff-indicator-empty - For lines that were unchanged

Without Line Numbers

In the scenario where you:

  • turn on diff indicators
  • turn off line numbers
  • turn on diff indicators in place of line numbers (this is the default)

Your indicators will still show up in the line-number classes, not the standalone classes mentioned above.

return [
'extensions' => [
// Add attributes straight from markdown.
AttributesExtension::class,
 
// Add Torchlight syntax highlighting.
- SomeOtherHighlighter::class,
+ TorchlightExtension::class,
]
]

The reason we have chosen this approach is so that you don't have to add the diff-indicator styles ever when you choose to put your indicators in the line number column.

A Hammerstone, LLC Product.
Built with Love & Care by Aaron in Dallas, Texas.