nawras93's avatar

Torchlight css

I'm building personal coding blog, so the post content has a regular text and code snippets, I was trying to use torchlight.dev css to highlight the code. So I need a tutorial or example of how to use it with lararvel. I know here is a docs for that but it is not clear for me.

Thanks

0 likes
15 replies
LaryAI's avatar
Level 58

Certainly! To use Torchlight for syntax highlighting in your Laravel application, you'll need to follow these steps:

  1. Install the Torchlight Client: First, you need to install the Torchlight Laravel package via Composer. Run the following command in your terminal:
composer require torchlight/torchlight-laravel
  1. Publish the Config File: After installing the package, you should publish the configuration file with the following Artisan command:
php artisan vendor:publish --provider="Torchlight\TorchlightServiceProvider" --tag=config
  1. Configure Your API Token: Sign up for a Torchlight account (if you haven't already) and obtain your API token. Then, add your Torchlight API token to your .env file:
TORCHLIGHT_TOKEN=your_api_token_here
  1. Use Torchlight in Your Views: In your Blade templates, you can now use the Torchlight directives to highlight your code snippets. Here's an example of how to use it:
@torchlightCode(['language' => 'php'])
// Your PHP code here
@endtorchlightCode

Replace 'php' with the appropriate language identifier for your code snippets.

  1. Cache Your Views: It's a good practice to cache your views for performance. You can do this with the following command:
php artisan view:cache
  1. Include the Torchlight CSS: To style the highlighted code, you need to include the Torchlight CSS in your layout. You can add the following line in the <head> section of your HTML:
<link href="https://unpkg.com/torchlight-api/torchlight.css" rel="stylesheet">

Here's a full example of how you might include a code snippet in a blog post:

@extends('layouts.app')

@section('content')
<article>
    <h1>My Coding Blog Post</h1>
    <p>Here's an example of a code snippet using Torchlight:</p>

    @torchlightCode(['language' => 'javascript'])
    // An example JavaScript function
    function greet(name) {
        console.log('Hello, ' + name + '!');
    }
    @endtorchlightCode
</article>
@endsection

Remember to include the Torchlight CSS link in your layout file.

  1. Clear Your Cache: If you make changes to your views or Torchlight configuration, you may need to clear your cache:
php artisan cache:clear

That's it! Your code snippets should now be beautifully highlighted using Torchlight in your Laravel application. If you encounter any issues, refer to the official Torchlight documentation for more detailed instructions and troubleshooting tips.

nawras93's avatar

@gych I'm already stuck in the following:

Post content has a normal or say regular text mixed with code snippets because I'm using tinyMCE, so how to apply torchlight on code snippets only. Didn't find that in docs.

<x-torchlight-code language='php'>
    echo "Hello World!";
</x-torchlight-code>
gych's avatar

@nawras93 So if I understand it right:

You hava a tinyMCE richtexteditor and via that editor you add code snippets in the post content. Now you want to use torchlight to improve the styling/display of those code snippets, right?

nawras93's avatar

@gych I can but just wanted to figure out how to use different approach for text highlight

gych's avatar

@nawras93 If you really want you can use torchlight with tinyMCE but than you will have to add this functionality yourself.

Here is a small example of how you could do that:

tinymce.init({
  selector: 'textarea#custom-menu-item',
  height: 500,
  toolbar: false,
  menubar: 'custom',
  menu: {
    custom: { title: 'Code', items: 'basicitem nesteditem toggleitem' }
  },
  setup: (editor) => {
    let toggleState = false;

    editor.ui.registry.addMenuItem('basicitem', {
      text: 'PHP',
      onAction: () => editor.insertContent(`<x-torchlight-code language='php'>
   Add your PHP code here
</x-torchlight-code>`)
    });

    editor.ui.registry.addToggleMenuItem('toggleitem', {
      text: 'JS',
      onAction: () => {
        toggleState = !toggleState;
        editor.insertContent(`<x-torchlight-code language='js'>
   JS
</x-torchlight-code>`);
      },
      onSetup: (api) => {
        api.setActive(toggleState);
        return () => {};
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Here is the codepen link: https://codepen.io/gychem/pen/QWoVaoJ

I can't test it myself since I don't have tinyMCE and torchlight installed but this should give you an idea on how to do this.

You can find more info about this customization in the tinyMCE documentation https://www.tiny.cloud/docs/tinymce/latest/creating-custom-menu-items/

If this doesn't work with the blade x components you can attempt to achieve this with the standalone torchlight CLI https://torchlight.dev/docs/clients/cli

nawras93's avatar

@gych Thank you very much 😊 I will give it a try then I will update you.

gych's avatar

@nawras93 Ok Nice! If you have more questions don't hesitate to reach out!

1 like
nawras93's avatar

@gych Not yet, got busy with another project for the next three weeks šŸ˜• But sure I will update you when I do it 🤠

Thanks again.

gych's avatar

@nawras93 Ok no problem, take your time :) Goodluck with the project !

agrocenta's avatar

I am having a similar problem. I followed the steps in https://torchlight.dev/docs/clients/laravel but my code does not get highlighted. When I inspect my code I see

<code data-theme="one-dark-pro" data-lang="shell" class="torchlight" style="background-color: #282c34; --theme-selection-background: #2c313a;"><!-- Syntax highlighted by torchlight.dev --><div class="line"><span style="color:#495162; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #ABB2BF;">composer </span><span style="color: #98C379;">require</span><span style="color: #ABB2BF;"> </span><span style="color: #98C379;">mkocansey/bladewind</span></div></code>```

The background colour on the <code> tag somehow does not take effect. 
gych's avatar

@agrocenta Create new post for your issue, otherwise the op will receive notifications for all the replies on your issue. Its not exactly the same problem.

Please or to participate in this conversation.