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!)
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 addeddiff-indicator-remove
- For lines that were removeddiff-indicator-empty
- For lines that were unchangedIn the scenario where you:
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.