#Focusing Lines

The focus annotation adds a line-focus class to the line, and a has-focus-lines class to your code tag.

Used in conjunction with the CSS below, every line that you've applied [tl! focus] to will be sharp and clear, and the rest will be blurry and dim. If a user hovers over the code block, everything will come into focus.

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

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

#Shorthand

As an alternative to focus, you can use **.

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

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

#Ranges

The focus annotation supports the entire set of range modifiers to help you quickly annotate a whole set of lines.

Check out the range docs for more details, but here is a quick cheat sheet.

 1focus          -- This line only
 2
 3focus:start    -- The start of an open ended range
 4focus:end      -- The end of an open ended range
 5
 6focus:10       -- This line, and the 10 following lines
 7focus:-10      -- This line, and the 10 preceding lines
 8
 9focus:1,10     -- Start one line down, highlight 10 lines total
10focus:-1,10    -- Start one line up, highlight 10 lines total

#CSS

Here is the CSS required to achieve the effect:

 1/*
 2  Blur and dim the lines that don't have the `.line-focus` class,
 3  but are within a code block that contains any focus lines.
 4*/
 5.torchlight.has-focus-lines .line:not(.line-focus) {
 6    transition: filter 0.35s, opacity 0.35s;
 7    filter: blur(.095rem);
 8    opacity: .65;
 9}
10 
11/*
12  When the code block is hovered, bring all the lines into focus.
13*/
14.torchlight.has-focus-lines:hover .line:not(.line-focus) {
15    filter: blur(0px);
16    opacity: 1;
17}