#Custom Classes & IDs

You can add your own custom classes by preceding them with a ., or add an ID with a #.

1return [
2    'extensions' => [
3        // Add attributes straight from markdown.
4        AttributesExtension::class,
5
6        // Add Torchlight syntax highlighting. [tl! highlight .animate-pulse]
7        TorchlightExtension::class, // [tl! highlight .font-bold .italic .animate-pulse #pulse]
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]

You can space out your classes like we did above, or just run them all together: .font-bold.italic.animate-pulse#pulse

Torchlight also supports Tailwind + the Tailwind JIT syntax, so you can do pretty much anything you can think of:

1ID only                   // [tl! #id]
2ID + Class                // [tl! #id.pt-4]
3Negative Tailwind classes // [tl! .-pt-4 .pb-8]
4ID + Classes Mixed        // [tl! .-pt-4#id1.pb-8]
5Tailwind Prefixes         // [tl! .sm:pb-8]
6Tailwind JIT              // [tl! .sm:pb-[calc(8px-4px)]]
7Tailwind JIT              // [tl! .pr-[8px]]
8Tailwind JIT + ID         // [tl! .-pt-4.pb-8.pr-[8px] #id]

You can also apply any range modifiers to custom classes.

1return [
2    'extensions' => [
3        // Add attributes straight from markdown.
4        AttributesExtension::class,
5
6        // Add Torchlight syntax highlighting. [tl! .bg-gray-900:-1,4 .animate-pulse:1]
7        TorchlightExtension::class,
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]

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

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

Remember that an HTML ID must be unique on the page, so while it's unlikely that you'd want to apply an ID to a range of lines, you may want to apply it to a line you cannot reach.

For example, to reach four lines down and add an ID of popover-trigger, you could do the following:

 1// Reach down 4 lines, add the ID to one line [tl! #popover-trigger:4,1]
 2return <<<EOT
 3spring sunshine
 4the smell of waters
 5from the stars
 6
 7deep winter
 8the smell of a crow
 9from the stars
10
11beach to school
12the smell of water
13in the sky
14EOT;