Torchlight

https://torchlight.dev/docs
Admin
Torchlight is a VS Code-compatible syntax highlighting HTTP API that processes code on a backend...
Tokens:29,586
Snippets:246
Trust Score:8.2
Update:8 months ago
Show doc for...
Tokens:
Raw
### Torchlight Configuration File Example (JavaScript)

Source: https://torchlight.dev/docs/clients/cli

A comprehensive example of a Torchlight configuration file written in JavaScript. It demonstrates how to set the API token, cache directory, theme, host, and various global and highlight-specific options.

```javascript
1module.exports = {
2    // Your token from https://torchlight.dev 
3    token: process.env.TORCHLIGHT_TOKEN,
4 
5    // The Torchlight client caches highlighted code blocks. Here you
6    // can define which directory you'd like to use. You'll likely
7    // want to add this directory to your .gitignore. Set to
8    // `false` to use an in-memory cache. You may also
9    // provide a full cache implementation.
10    cache: 'cache',
11 
12    // Which theme you want to use. You can find all of the themes at
13    // https://torchlight.dev/docs/themes. 
14    theme: 'material-theme-palenight',
15 
16    // The Host of the API.
17    host: 'https://api.torchlight.dev',
18 
19    // Global options to control block-level settings.
20    // https://torchlight.dev/docs/options 
21    options: {
22        // Turn line numbers on or off globally.
23        lineNumbers: false,
24 
25        // Control the `style` attribute applied to line numbers.
26        // lineNumbersStyle: '',
27 
28        // Turn on +/- diff indicators.
29        diffIndicators: true,
30 
31        // If there are any diff indicators for a line, put them
32        // in place of the line number to save horizontal space.
33        diffIndicatorsInPlaceOfLineNumbers: true,
34 
35        // When lines are collapsed, this is the text that will
36        // be shown to indicate that they can be expanded.
37        // summaryCollapsedIndicator: '...',
38    },
39 
40    // Options for the highlight command.
41    highlight: {
42        // Directory where your un-highlighted source files live. If
43        // left blank, Torchlight will use the current directory.
44        input: '',
45 
46        // Directory where your highlighted files should be placed. If
47        // left blank, files will be modified in place.
48        output: '',
49 
50        // Globs to include when looking for files to highlight.
51        includeGlobs: [
52            '**/*.htm',
53            '**/*.html'
54        ],
55 
56        // String patterns to ignore (not globs). The entire file
57        // path will be searched and if any of these strings
58        // appear, the file will be ignored.
59        excludePatterns: [
60            '/node_modules/',
61            '/vendor/'
62        ]
63    }
64}
```

--------------------------------

### Install Torchlight CLI Client with NPM

Source: https://torchlight.dev/docs/clients/cli

Installs the Torchlight CLI client package using NPM. This is the first step to using the client in your project.

```bash
npm i @torchlight-api/torchlight-cli
```

--------------------------------

### Torchlight Configuration File Example

Source: https://torchlight.dev/docs/clients/laravel

An example of the `torchlight.php` configuration file. It shows settings for cache driver, theme, API token, Blade component registration, API host, and global rendering options like line numbers and diff indicators.

```php
<?php

return [
    // The Torchlight client caches highlighted code blocks. Here
    // you can define which cache driver you'd like to use.
    'cache' => env('TORCHLIGHT_CACHE_DRIVER'),

    // Which theme you want to use. You can find all of the themes at
    // https://torchlight.dev/themes. 
    'theme' => env('TORCHLIGHT_THEME', 'material-theme-palenight'),

    // Your API token from torchlight.dev. (Torchlight is completely free for personal and open source projects.)
    'token' => env('TORCHLIGHT_TOKEN'),

    // If you want to register the blade directives, set this to true.
    'blade_components' => true,

    // The Host of the API.
    'host' => env('TORCHLIGHT_HOST', 'https://api.torchlight.dev'),

    // Global options to control blocks-level settings.
    // @see https://torchlight.dev/docs/options 
    'options' => [
        // Turn line numbers on or off globally
        'lineNumbers' => true,

        // Control the `style` attribute applied to line numbers.
        // 'lineNumbersStyle' => '',

        // Turn on +/- diff indicators.
        'diffIndicators' => true,

        // If there are any diff indicators for a line, put them
        // in place of the line number to save horizontal space.
        'diffIndicatorsInPlaceOfLineNumbers' => true,

        // When lines are collapsed, this is the text that will
        // be shown to indicate that they can be expanded.
        // 'summaryCollapsedIndicator' => '...',
    ]
];
```

--------------------------------

### Complete Jigsaw bootstrap.php with Torchlight

Source: https://torchlight.dev/docs/clients/jigsaw

This is an example of a complete `bootstrap.php` file for Jigsaw, including the necessary code to boot the Torchlight extension alongside other potential Jigsaw event listeners.

```php
<?php

use App\Listeners\GenerateSitemap;
use TightenCo\Jigsaw\Jigsaw;

/** @var $container \Illuminate\Container\Container */
/** @var $events \TightenCo\Jigsaw\Events\EventBus */

/**
 * You can run custom code at different stages of the build process by
 * listening to the 'beforeBuild', 'afterCollections', and 'afterBuild' events.
 *
 * For example:
 *
 * $events->beforeBuild(function (Jigsaw $jigsaw) {
 *     // Your code here
 * });
 */

$events->afterBuild(GenerateSitemap::class);

\Torchlight\Jigsaw\TorchlightExtension::make($container, $events)->boot();

```

--------------------------------

### Install Torchlight CLI Client with Yarn

Source: https://torchlight.dev/docs/clients/cli

Installs the Torchlight CLI client package using Yarn. This is an alternative to NPM for package management.

```bash
yarn add @torchlight-api/torchlight-cli
```

--------------------------------

### Install Torchlight Jigsaw Client via Composer

Source: https://torchlight.dev/docs/clients/jigsaw

This command installs the Torchlight Jigsaw client package using Composer, a dependency manager for PHP. Ensure Composer is installed and accessible in your environment.

```bash
composer require torchlight/torchlight-jigsaw
```

--------------------------------

### Install Torchlight CommonMark Client for Statamic

Source: https://torchlight.dev/docs/clients/statamic

Installs the Torchlight CommonMark PHP client using Composer. This also installs the Laravel client, which is necessary for Statamic integration.

```bash
composer require torchlight/torchlight-commonmark
```

--------------------------------

### Install Remark Torchlight Client with NPM

Source: https://torchlight.dev/docs/clients/remark

Installs the Torchlight Remark client package using npm. This is the first step to integrating Torchlight syntax highlighting into your Remark markdown processor.

```bash
npm i remark-torchlight
```

--------------------------------

### Install Torchlight Ibis Client with Composer

Source: https://torchlight.dev/docs/clients/ibis

This command installs the Torchlight Ibis client package using Composer. Ensure you have Composer installed and are in the root directory of your book project.

```bash
composer require torchlight/torchlight-ibis
```

--------------------------------

### Install Torchlight for Laravel

Source: https://torchlight.dev/docs/clients/livewire

This command installs the Torchlight package for Laravel using Composer. It's the initial step for integrating Torchlight's syntax highlighting capabilities into your Laravel application.

```bash
composer require torchlight/torchlight-laravel
```

--------------------------------

### Boot Torchlight Extension in Jigsaw bootstrap.php

Source: https://torchlight.dev/docs/clients/jigsaw

After installation, this PHP code snippet is added to your Jigsaw project's `bootstrap.php` file to register and boot the Torchlight extension, enabling its functionality.

```php
\Torchlight\Jigsaw\TorchlightExtension::make($container, $events)->boot();
```

--------------------------------

### Install Remark Torchlight Client with Yarn

Source: https://torchlight.dev/docs/clients/remark

Installs the Torchlight Remark client package using Yarn. This is an alternative to npm for adding the Torchlight syntax highlighting functionality to your Remark markdown processor.

```bash
yarn add remark-torchlight
```

--------------------------------

### Demonstrate Git Diffs with Shorthand ++/-- in PHP

Source: https://torchlight.dev/docs/annotations/diffs

This example demonstrates the shorthand notation `[tl! ++]` for additions and `[tl! --]` for removals in PHP code. This provides a more concise way to mark lines for Torchlight's diff highlighting, achieving the same visual and class-based output as the full keywords.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        SomeOtherHighlighter::class, // [tl! --]
        TorchlightExtension::class, // [tl! ++]
    ]
]
```

--------------------------------

### Torchlight Configuration File Example

Source: https://torchlight.dev/docs/clients/jigsaw

This PHP array defines the configuration settings for Torchlight within a Jigsaw project. It includes options for theme selection, API token, Blade component registration, API host, cache path, request timeout, and global code block options.

```php
return [
    // Which theme you want to use. You can find all of the themes at
    // https://torchlight.dev/themes, or you can provide your own. 
    'theme' => 'material-theme-palenight',

    // Your API token from https://torchlight.dev. You can set it 
    // as an ENV variable (shown below), or just hardcode it if
    // your repo is private.
    'token' => getenv('TORCHLIGHT_API_TOKEN'),

    // If you want to register the blade directives, set this to true.
    'blade_components' => true,

    // The Host of the API.
    'host' => 'https://api.torchlight.dev',

    // If you want to specify the cache path, you can do so here. Note
    // that you should *not* use the same path that Jigsaw uses,
    // which is `cache` at the root level of your app.
    'cache_path' => 'torchlight_cache',

    // Because of the way Jigsaw works as a static site generator, all the
    // code blocks for your entire site will be sent as one request. We
    // increase the timeout to 15 seconds to cover for that.
    'request_timeout' => 15,

    // Global options to control blocks-level settings. 
    // https://torchlight.dev/docs/options 
    'options' => [
        // Turn line numbers on or off globally.
        'lineNumbers' => true,

        // Control the `style` attribute applied to line numbers.
        // 'lineNumbersStyle' => '',

        // Turn on +/- diff indicators.
        'diffIndicators' => true,

        // If there are any diff indicators for a line, put them
        // in place of the line number to save horizontal space.
        'diffIndicatorsInPlaceOfLineNumbers' => true,

        // When lines are collapsed, this is the text that will
        // be shown to indicate that they can be expanded.
        // 'summaryCollapsedIndicator' => '...',
    ]
];

```

--------------------------------

### Specify Code Block Theme

Source: https://torchlight.dev/docs/clients/commonmark-php

This example demonstrates how to apply a specific theme to a code block by adding `theme:theme-name` after the language identifier.

```markdown
```php theme:winter-is-coming-dark
echo "Winter is coming, dark!";
```

```js theme:winter-is-coming-blue
console.log("Winter is coming, blue!")
```
```

--------------------------------

### Torchlight Configuration Options Object

Source: https://torchlight.dev/docs/clients/remark

Provides a comprehensive example of the configuration options object for Torchlight. It includes settings for token, cache, theme, API host, and various block-level options like line numbers and diff indicators.

```json
{
    // Your token from https://torchlight.dev 
    token: 'my-test-token',

    // The Torchlight client caches highlighted code blocks. Here you
    // can define which directory you'd like to use. You'll likely
    // want to add this directory to your .gitignore. Set to
    // `false` to use an in-memory cache. You may also
    // provide a full cache implementation.
    cache: 'cache',

    // Which theme you want to use. You can find all of the themes at
    // https://torchlight.dev/docs/themes. 
    theme: 'material-theme-palenight',

    // The Host of the API.
    host: 'https://api.torchlight.dev',

    // Global options to control block-level settings.
    // https://torchlight.dev/docs/options 
    options: {
        // Turn line numbers on or off globally.
        lineNumbers: false,

        // Control the `style` attribute applied to line numbers.
        // lineNumbersStyle: '',

        // Turn on +/- diff indicators.
        diffIndicators: true,

        // If there are any diff indicators for a line, put them
        // in place of the line number to save horizontal space.
        diffIndicatorsInPlaceOfLineNumbers: true,

        // When lines are collapsed, this is the text that will
        // be shown to indicate that they can be expanded.
        // summaryCollapsedIndicator: '...',
    },
}
```

--------------------------------

### Demonstrate Git Diffs with Add/Remove Keywords in PHP

Source: https://torchlight.dev/docs/annotations/diffs

This example shows how to use the `[tl! add]` and `[tl! remove]` keywords within a PHP code block to indicate line additions and removals for Torchlight syntax highlighting. Torchlight applies specific foreground/background colors and CSS classes (`line-add`, `line-remove`, `has-diff-lines`, etc.) to the highlighted lines.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        SomeOtherHighlighter::class, // [tl! remove]
        TorchlightExtension::class, // [tl! add]
    ]
]
```

--------------------------------

### Specify Code Block Language

Source: https://torchlight.dev/docs/clients/commonmark-php

This example shows how to specify the programming language for syntax highlighting in a code block by adding the language name after the opening backticks.

```markdown
```php
echo "This is php!";
```

```js
console.log("This is javascript!")
```
```

--------------------------------

### Collapse N Lines with Torchlight (PHP)

Source: https://torchlight.dev/docs/annotations/collapsing

This example shows how to collapse a specified number of lines following an annotation using Torchlight. The `[tl! collapse:N]` syntax, where N is the number of lines to collapse, is used. This is useful for concisely hiding repetitive or less critical code sections.

```php
return [
 1    'heading_permalink' => [ // [tl! collapse:5]
 2        'html_class' => 'permalink',
 3        'id_prefix' => 'user-content',
 4        'insert' => 'before',
 5        'title' => 'Permalink',
 6        'symbol' => '#',
 7    ],
 8
 9    'extensions' => [
10        // Add attributes straight from markdown.
11        AttributesExtension::class,
12
13        // Add Torchlight syntax highlighting.
14        TorchlightExtension::class,
15    ]
16]

```

```php
return [
 1    'heading_permalink' => [ ...
 2        'html_class' => 'permalink',
 3        'id_prefix' => 'user-content',
 4        'insert' => 'before',
 5        'title' => 'Permalink',
 6        'symbol' => '#',
 7    ],
 8    
 9    'extensions' => [
10        // Add attributes straight from markdown.
11        AttributesExtension::class,
12    
13        // Add Torchlight syntax highlighting.
14        TorchlightExtension::class,
15    ]
16]

```

--------------------------------

### Change Line Number Start in Torchlight Block

Source: https://torchlight.dev/docs/options/line-numbers

Shows how to change the starting line number for a code block using the `lineNumbersStart` option in the Torchlight comment. This re-indexes the lines for the specific block.

```php
// torchlight! {"lineNumbersStart": 99}
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        TorchlightExtension::class,
    ]
]
```

```php
99return [
100    'extensions' => [
101        // Add attributes straight from markdown.
102        AttributesExtension::class,
103
104        // Add Torchlight syntax highlighting.
105        TorchlightExtension::class,
106    ]
107]
```

--------------------------------

### Highlighting specific lines in PHP code with Torchlight

Source: https://torchlight.dev/docs/index

This example demonstrates how to use Torchlight's annotation syntax within PHP code comments to highlight specific lines. Torchlight automatically strips these annotations, including the comment syntax, from the final rendered code.

```php
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]
```

--------------------------------

### Applying Custom Classes, IDs, and Tailwind Modifiers (Torchlight)

Source: https://torchlight.dev/docs/annotations/classes

This example showcases the flexibility of Torchlight in applying custom classes, IDs, and Tailwind CSS classes, including negative and prefixed variants, as well as JIT syntax. It illustrates various combinations for styling code elements.

```torchlight
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]
```

--------------------------------

### PHP Configuration for Default Open Collapse Ranges

Source: https://torchlight.dev/docs/annotations/collapsing

This PHP code configures Torchlight extensions, specifically setting a 'heading_permalink' to be open by default. It demonstrates how to include custom configurations within the Torchlight extension setup.

```php
return [
    'heading_permalink' => [
        'html_class' => 'permalink',
        'id_prefix' => 'user-content',
        'insert' => 'before',
        'title' => 'Permalink',
        'symbol' => '#',
    ], 

    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        TorchlightExtension::class,
    ]
]
```

```php
return [
    'heading_permalink' => [ ...
        'html_class' => 'permalink',
        'id_prefix' => 'user-content',
        'insert' => 'before',
        'title' => 'Permalink',
        'symbol' => '#',
    ], 

    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        TorchlightExtension::class,
    ]
]
```

--------------------------------

### Enable Diff Indicators (Inline) in Torchlight.dev

Source: https://torchlight.dev/docs/options/diffs

This example demonstrates enabling diff indicators at the block level by passing `diffIndicators: true` to the Torchlight API. The indicators appear inline with the line numbers.

```php
// 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]
```

--------------------------------

### Torchlight Diff Indicator Example

Source: https://torchlight.dev/docs/options/line-numbers

A code snippet showing a diff indicator within Torchlight, highlighting changes with inserted and removed lines. It's advised to avoid explicit color declarations to respect the theme's color scheme.

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

--------------------------------

### Apply ID to a specific line using Torchlight annotation

Source: https://torchlight.dev/docs/annotations/ranges

This example demonstrates how to use the Torchlight annotation to apply an HTML ID to a specific line within a code block. It shows how to target a line by counting down from the current position.

```php
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;
```

--------------------------------

### Replace Placeholder with User Token (PHP)

Source: https://torchlight.dev/docs/clients/laravel

An example of a post-processor that replaces a placeholder string ('user_auth_token') within a code block's highlighted content with the authenticated user's token. It includes logic to retrieve the token or use a default.

```php
use Torchlight\Block;

class InjectAuthToken implements PostProcessor
{
    public function process(Block $block) 
    {
        $token = Auth::check() ? Auth::user()->token : 'token';

        // Replace the placeholder with the user's token.
        $block->highlighted = str_replace(
            'user_auth_token', $token, $block->highlighted
        );
    }
}
```

--------------------------------

### Adding Torchlight Extension with Custom Classes and IDs (PHP)

Source: https://torchlight.dev/docs/annotations/classes

This snippet demonstrates how to add the Torchlight extension to your configuration, enabling custom classes and IDs for syntax highlighting. It shows the basic setup for including the extension and applying attributes directly from markdown.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. [tl! highlight .animate-pulse]
        TorchlightExtension::class, // [tl! highlight .font-bold .italic .animate-pulse #pulse]
    ]
]
```

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. 
        TorchlightExtension::class, 
    ]
]
```

--------------------------------

### Example JavaScript Counter Component

Source: https://torchlight.dev/docs/themes

This JavaScript code snippet shows a basic counter component. It includes an event listener to increment a counter when a button is clicked and updates the button's text to display the current count. The counter stops at 10.

```javascript
const btn = document.getElementById('btn')
let count = 0

function render() {
    btn.innerText = `Count: ${count}`
}

btn.addEventListener('click', () => {
    // Count from 1 to 10.
    if (count < 10) {
        count += 1
        render()
    }
})
```

--------------------------------

### Applying an ID to a Specific Line Range (Torchlight)

Source: https://torchlight.dev/docs/annotations/classes

This example demonstrates how to apply an HTML ID to a specific line within a range, using Torchlight's range modifiers. It shows how to target a line N lines down and apply a unique ID, ensuring it's applied correctly.

```torchlight
 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;
```

--------------------------------

### Set Per-Block Torchlight Options

Source: https://torchlight.dev/docs/options

Illustrates how to override global Torchlight options for a specific code block. This is achieved by adding a comment as the first line of the block, starting with `torchlight!` followed by valid JSON containing the desired options. This example disables line numbers for the block.

```php
// torchlight! {"lineNumbers": false}
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        TorchlightExtension::class,
    ]
]

```

--------------------------------

### Initialize Torchlight Configuration with Custom Path

Source: https://torchlight.dev/docs/clients/cli

Initializes the Torchlight configuration file at a custom specified path. This allows for more flexible project structures.

```bash
# Custom configuration file location
npx torchlight init --path config/torchlight.config.js
```

--------------------------------

### Initialize Torchlight with Custom Path

Source: https://torchlight.dev/docs/clients/cli

Initializes the Torchlight configuration file at a specified custom path. This allows users to manage their configuration files in a dedicated location.

```bash
1# Custom configuration file location
2npx torchlight init --path config/torchlight.config.js
```

--------------------------------

### Configure Remark Torchlight Plugin from File

Source: https://torchlight.dev/docs/clients/remark

Illustrates configuring the `remark-torchlight` plugin by specifying a configuration file path. This allows for externalizing Torchlight settings, making the code cleaner.

```javascript
export default async function markdownToHtml(markdown) {
    return await remark()
        .use(html)
        .use(torchlight, {
            // Read from a config file. 
            config: 'torchlight.config.js'
        })
        .process(markdown)
        .toString()
}
```

--------------------------------

### Initialize Torchlight Configuration File

Source: https://torchlight.dev/docs/clients/cli

Creates a default Torchlight configuration file named `torchlight.config.js` in the current directory. This command is used to set up Torchlight for your project.

```bash
npx torchlight init
```

--------------------------------

### Initialize Torchlight Configuration

Source: https://torchlight.dev/docs/clients/cli

Initializes the Torchlight configuration file in the current directory. This command generates a default configuration file that can be further customized.

```bash
1npx torchlight init
```

--------------------------------

### Disable Diff Indicators in Torchlight.dev

Source: https://torchlight.dev/docs/options/diffs

This example shows how to disable diff indicators, resulting in standard line coloring without '+' or '-' symbols. It's configured by default in Torchlight.dev.

```php
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]
```

--------------------------------

### Enable Diff Indicators (Separate Column) in Torchlight.dev

Source: https://torchlight.dev/docs/options/diffs

This example shows how to enable diff indicators and display them in a separate column by setting `diffIndicatorsInPlaceOfLineNumbers: false`. This preserves line numbers while providing distinct indicator columns.

```php
// 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]
```

--------------------------------

### Torchlight Autolink Range Modifiers

Source: https://torchlight.dev/docs/annotations/autolinks

This example illustrates the various range modifiers supported by the `autolink` annotation in Torchlight. These modifiers allow for precise selection of lines to apply the autolinking functionality, from single lines to specific ranges.

```text
autolink          -- This line only

autolink:start    -- The start of an open ended range
autolink:end      -- The end of an open ended range

autolink:10       -- This line, and the 10 following lines
autolink:-10      -- This line, and the 10 preceding lines

autolink:1,10     -- Start one line down, highlight 10 lines total
autolink:-1,10    -- Start one line up, highlight 10 lines total
```

--------------------------------

### Configure Remark Torchlight Plugin with API Token and Theme

Source: https://torchlight.dev/docs/clients/remark

Shows how to configure the `remark-torchlight` plugin with an API token and a specific theme. The configuration is passed as an options object with a `config` key containing `token` and `theme`.

```javascript
export default async function markdownToHtml(markdown) {
    return await remark()
        .use(html)
        .use(torchlight, { 
            // All API configuration goes under `config`.
            config: {
                token: 'my-token',
                theme: 'material-theme-palenight'
            }
        })
        .process(markdown)
        .toString()
}
```

--------------------------------

### Diff Indicators Without Line Numbers in Torchlight.dev

Source: https://torchlight.dev/docs/options/diffs

This example illustrates the scenario where diff indicators are enabled, line numbers are turned off, and indicators are displayed in place of line numbers. The indicators will appear within the line number classes.

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

--------------------------------

### Highlight Code with Custom Configuration Path

Source: https://torchlight.dev/docs/clients/cli

Highlights code blocks using a specified Torchlight configuration file. This overrides the default configuration file lookup.

```bash
# Use a custom path.
npx torchlight --config config/torchlight.js
```

--------------------------------

### Component Attribute Quote Handling (Blade)

Source: https://torchlight.dev/docs/clients/laravel

Provides examples of correct and incorrect usage of quotes within the `contents` attribute of a Torchlight code component. It highlights a Laravel limitation where the same quote type cannot be used for both the outer attribute and the inner content.

```blade
{{-- This will work, double quotes on the outside, single on the inside. --}}
<x-torchlight-code contents="{{ base_path('webpack.mix.js') }}" language='js' />

{{-- This will NOT work, single quotes for both out and inside. --}}
<x-torchlight-code contents='{{ base_path('webpack.mix.js') }}' language='js' />
```

--------------------------------

### Shorthand for Line Highlighting

Source: https://torchlight.dev/docs/annotations/highlighting

Uses '~~' as a shorthand for the 'highlight' annotation, simplifying the process of marking lines for highlighting.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown. [tl! ~~:1]
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        TorchlightExtension::class,
    ]
]
```

```php
return [
    'extensions' => [
        // Add attributes straight from markdown. 
        AttributesExtension::class,

        // Add Torchlight syntax highlighting.
        TorchlightExtension::class,
    ]
]
```

--------------------------------

### Nullify content using reindex with range modifiers

Source: https://torchlight.dev/docs/annotations/reindex

Illustrates how to use annotation range modifiers with `reindex(null)` to effectively nullify or remove specific content. This example targets the 5th line down and applies the nullification to 5 lines.

```text
 1// This is a long bit of text, hard to reindex the middle. [tl! reindex(null):5,5]
 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; // [tl! highlight:-7,3]
```

--------------------------------

### Apply Custom Highlight Classes

Source: https://torchlight.dev/docs/annotations/highlighting

Allows applying custom CSS classes like '.highlight' or '.foobar.bazbuz' instead of the theme's default highlight color.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown. [tl! .highlight]
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. [tl! .foobar.bazbuz]
        TorchlightExtension::class,
    ]
]
```

--------------------------------

### Applying Range Modifiers for Highlighting (PHP)

Source: https://torchlight.dev/docs/annotations/classes

This snippet demonstrates how to use Torchlight's range modifiers to apply highlighting to specific lines or ranges of lines. It shows how to specify start and end points, as well as relative line counts for highlighting.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. [tl! .bg-gray-900:-1,4 .animate-pulse:1]
        TorchlightExtension::class,
    ]
]
```

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. 
        TorchlightExtension::class,
    ]
]
```

--------------------------------

### Highlight Code with Custom Input and Output Directories

Source: https://torchlight.dev/docs/clients/cli

Highlights code blocks by reading from a specified input directory and writing the processed files to a specified output directory. This prevents in-place modification.

```bash
# Look in the `source` folder, output to the `build` folder.
npx torchlight --input source --output build
```

--------------------------------

### Publish Torchlight Configuration for Statamic

Source: https://torchlight.dev/docs/clients/statamic

Publishes the Torchlight configuration file to your Statamic project using the Artisan command. This allows for customization of Torchlight settings.

```bash
php artisan torchlight:install
```

--------------------------------

### Apply Torchlight Syntax Highlighting with Shorthand Focus (PHP)

Source: https://torchlight.dev/docs/annotations/focusing

This PHP code snippet shows the shorthand method for applying the focus annotation using `**` instead of `focus`. Similar to the full 'focus' annotation, it integrates Torchlight syntax highlighting and requires the `AttributesExtension`.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. [tl! **]
        TorchlightExtension::class, // [tl! **]
    ]
]
```

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. 
        TorchlightExtension::class, 
    ]
]
```

--------------------------------

### Publish Torchlight Configuration File

Source: https://torchlight.dev/docs/clients/jigsaw

This command publishes the Torchlight configuration file to your Jigsaw project's root directory. This allows you to customize settings like themes, API tokens, and other options.

```bash
./vendor/bin/jigsaw torchlight:install
```

--------------------------------

### Torchlight Range Modifier Cheat Sheet

Source: https://torchlight.dev/docs/annotations/classes

A quick reference guide for Torchlight's range modifiers, explaining how to highlight individual lines, open-ended ranges, and specific line counts before or after the current line. It also covers applying ranges to multiple lines.

```torchlight
 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
```

--------------------------------

### Add HTML Markup with Post-Processor (PHP)

Source: https://torchlight.dev/docs/clients/laravel

Shows how to use a post-processor to wrap a token within HTML markup (e.g., a `<mark>` tag with a specific class). This allows for JavaScript targeting and enhancement of specific code elements without the markup being escaped.

```php
use Torchlight\Block;

class InjectAuthToken implements PostProcessor
{
    public function process(Block $block) 
    {
        $token = Auth::check() ? Auth::user()->token : 'token';

        // Wrap the token in a `mark` tag and give it a class
        // so JavaScript can target it and enhance it.
        $token = "<mark class='user-auth-token'>{$token}</mark>";

        // Replace the placeholder with the user's token.
        $block->highlighted = str_replace(
            'user_auth_token', $token, $block->highlighted
        );
    }
}
```

--------------------------------

### Integrate Torchlight Syntax Highlighting (PHP)

Source: https://torchlight.dev/docs/themes

This PHP code snippet demonstrates how to integrate Torchlight syntax highlighting by adding the TorchlightExtension to your project's extensions. It assumes the necessary extensions are available in the current scope.

```php
return [
    'extensions' => [
        // Add attributes straight from markdown.
        AttributesExtension::class,

        // Add Torchlight syntax highlighting. 
        TorchlightExtension::class,
    ]
]
```

--------------------------------

### Standard Shell Language Highlighting

Source: https://torchlight.dev/docs/languages

This code snippet demonstrates the default syntax highlighting for the 'shell' language, as provided by Torchlight.dev. It showcases a 'curl' command with its parameters, highlighting the standard interpretation of shell syntax.

```shell
1curl https://api.stripe.com/configurations?example1=foo&example2=bar \
2    -d "business_profile[privacy_policy_url]"="https://example.com/privacy" \
3    -d "business_profile[terms_of_service_url]"="https://example.com/terms" \
4    -d "features[invoice_history][enabled]"=true

```

--------------------------------

### Reindex Line Numbers Relatively (Decrement)

Source: https://torchlight.dev/docs/annotations/reindex

Illustrates relative line number adjustments using `reindex(-N)`. This example decrements the line number, which is particularly useful in diffs or when maintaining relative spacing between highlighted code blocks. It ensures that the numbering remains logical even after code additions or removals.

```php
1// torchlight! {"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 reindex(-1)]
10    ]
11]
```

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

--------------------------------

### Plain Text Highlighting with Inline Torchlight Annotations

Source: https://torchlight.dev/docs/annotations

Demonstrates using Torchlight's inline 'focus' annotation on plain text. For plain text, any line can be annotated as if it were a comment.

```plaintext
1spring sunshine
2the smell of waters
3from the stars
4
5deep winter [tl! focus:2]
6the smell of a crow
7from the stars
8
9beach to school
10the smell of water
11in the sky
```

--------------------------------

### Wrapping Code Blocks in <pre> Tags

Source: https://torchlight.dev/docs/clients/laravel

Shows how to wrap the `<x-torchlight-code>` component within `<pre>` tags for proper block-level formatting, similar to standard HTML practices for code presentation.

```blade
<pre><x-torchlight-code language='php'>
    echo "Hello World!";
</x-torchlight-code></pre>
```
Tokens:
Raw