⌘K
Noting Found

View all related articles

Make Authoring Enjoyable Again Using Torchlight Package

Open Source 2 mins read

Table of Content

    Introduction

    If you are a technical writer, you may have used (at least once) in your editor the code tab, or if you prefer to write articles, using Markdown (like me) I'm certain, you used the backticks to write code.

    In today's article, I have great news for you. You can take your highlighted syntax in your blog to the next level, without heavy JavaScript running in the background, or even CSS if you want! Using torchlight package, by @aarondfrancis, and absolutely, for free!

    We're going to see an example, on how to use it in the Laravel framework, but you can use it outside the framework for sure.

    Requisites

    • Knowledge of PHP
    • Basic understanding on the Laravel framework
    • Laravel artisan commands

    Torchlight Clients Support

    Torchlight does not support only Laravel, it supports, Jigsaw, CommonMark PHP, Statamic, Livewire, Standalone CLI, Remark JS, and ibis.

    If you want to check other clients, you may take a look at the Client Section on the docs.

    Installation

    To install torchlight, you need to require the package from composer

    1composer require torchlight/torchlight-laravel

    Get Torchlight Token

    If you wish to use torchlight, you may create a new account to obtain an API Key, and it's unlimited, and do not worry, it won't cost you a dime :)

    After you generate a new API token, you can copy the key, and paste it in the .env file

    1# TORCHLIGHT
    2TORCHLIGHT_TOKEN="torch_xxx"

    Adding the Middleware

    To let the package renders correctly, you may want to put the RenderTorchlight middleware, at the beginning of your middleware list, in app/Kernel.php

    1protected $middleware = [
    2 \Torchlight\Middleware\RenderTorchlight::class,
    3 // ...
    4];

    Configuration

    Next step, is publishing the configuration, if you want to customize themes, line numbers...

    1php artisan torchlight:install

    Torchlight Themes

    Torchlight came with lots of themes included (VS Code themes), and you want to check them out, and select one, you may head to the Theme Section, in the website docs.

    Torchlight Blade Component

    When you are using torchlight in Laravel, you can use the custom blade component, that came with the package, and you can use it inside the blade files.

    1<x-torchlight-code language="php">
    2 echo "Hey There!":
    3</x-torchlight-code>

    You can set the language you are using as a prop, besides the theme also

    1<x-torchlight-code language="python" theme="github-light">
    2 print('Hey There!')
    3</x-torchlight-code>

    You may also, want to render a specific file using the torchlight component, using an absolute path

    1<x-torchlight-code lanauge="js" contents="{{ base_path('vite.config.js') }}"/>

    Like any Laravel component, you can use any attribute you like, such as class, or id... you name it.

    1<x-torchlight-code class="my-5" id="code-1" language="php">
    2 echo "Example with class & id attributes";
    3</x-torchlight-code>

    Using Torchlight By Default

    If you want to use torchlight package as a default, to highlight your code, when parsing .md files, you may do the following:

    Install Markdown Package

    First thing, you may want to install the Laravel Markdown package by @GrahamJCampbell

    1composer require graham-campbell/markdown

    Publish the assets

    1php artisan vendor:publish

    Then chose the right vendor assets.

    Add Torchlight Extension

    After publishing the assets, go to config/markdown.php file, under the extensions key, you may add the TorchlightExtension

    1use Torchlight\Commonmark\V2\TorchlightExtension;
    2return [
    3 ///
    4 
    5 'extensions' => [
    6 League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension::class,
    7 League\CommonMark\Extension\Table\TableExtension::class,
    8 TorchlightExtension::class,
    9 ],
    10];

    After that, you are good to go, and all what you need to do, is using the markdown directive on your blade file, or use the Markdown facade, you want a backend solution.

    You may take a look at the package documentation, to learn more.

    Conclusion

    Alright, this is all what you need to know, to be up & running using torchlight package, but the fun still out there, if you want to get more! If you are interested, you may take a look, and know about all the features that the package provide, such as ANNOTATIONS, line numbers, diff indicators... and many more!

    If you like this articles, follow me on Twitter to learn more about that kind of stuff, and level up your web skills.

    Peace 👌

    Related Tags

    About the Author

    Oussama's Profile Picture
    Oussama
    Full Stack Web Developer | Technical Writer

    Oussama is an experienced full-stack web developer with a strong focus on Laravel. He's passionate about crafting web applications with Filament and the TALL Stack. With 8+ years of experience, and he's a dedicated open-source contributor.

    Comments

    Join our newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    We care about the protection of your data. Read our Privacy Policy.