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

Line Numbers

Torchlight add line numbers by default, but you can disable them globally or on the block level by changing the lineNumbers option to false.

Here's an example of the block level change:

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

Changing the Start Number

To change the starting number of a block, you may use the lineNumbersStart option:

1// torchlight! {"lineNumbersStart": 99}
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
99return [
100 'extensions' => [
101 // Add attributes straight from markdown.
102 AttributesExtension::class,
103 
104 // Add Torchlight syntax highlighting.
105 TorchlightExtension::class,
106 ]
107]

Note: we also have a reindex annotation to control the line number line by line.

Changing the Style

By default Torchlight applies a reasonable set of CSS style to your line numbers:

1.line-number {
2 text-align: right;
3 -webkit-user-select: none;
4 user-select: none;
5}

If you want to control that, you can pass in a lineNumbersStyle option.

1// torchlight! {"lineNumbersStyle": "opacity: .5;"}
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1return [
2 'extensions' => [
3 // Add attributes straight from markdown.
4 AttributesExtension::class,
5 
6 // Add Torchlight syntax highlighting.
7 TorchlightExtension::class,
8 ]
9]

There are a couple of things to note when using this option.

The first is that you will likely want to include the -webkit-user-select: none; user-select: none; styles, so that when your visitors copy your code they don't get the line numbers. Because that's the worst.

Copy the code above and notice that the line numbers will be selected, versus the block right above it (Torchlight default).

The other thing to note is that you'll need to be thoughtful when adding color declarations.

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

Torchlight uses the theme's color scheme to handle insert and remove lines, so it's probably best to leave the color declaration off altogether.

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