Blog Detail


Run a Beautiful Syntax Highlighter Called Shiki with Sidecar cover image

arrow_back Run a Beautiful Syntax Highlighter Called Shiki with Sidecar

Shiki is a beautiful syntax highlighter powered by the same language engine that many code editors use. This package allows you to run Shiki on AWS Lambda through Sidecar. You won’t need to install Node, or any of Shiki’s dependencies, on your server.


This package requires that hammerstone/sidecar has been installed in your Laravel application.

Follow the Sidecar installation and configuration instructions.


You can install the package via composer:

composer require spatie/sidecar-shiki

Optionally, you can publish the config file with:

php artisan vendor:publish --tag="sidecar-shiki-config"

Register the HighlightFunction::class in your sidecar.php config file.

 * All of your function classes that you'd like to deploy go here.
'functions' => [

Deploy the Lambda function by running:

php artisan sidecar:deploy --activate


You can highlight code by calling the \Spatie\SidecarShiki\SidecarShiki::highlight() function.

use Spatie\SidecarShiki\SidecarShiki;

    code: '<?php echo "Hello World"; ?>',
    language: 'php',
    theme: 'github-light',

The output is this chunk of HTML rendered through AWS Lambda which will output beautifully in the browser:

<pre class="shiki" style="background-color: #2e3440ff"><code><span class="line"><span style="color: #81A1C1">&lt;?</span><span style="color: #D8DEE9FF">php </span><span style="color: #81A1C1">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Hello World</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">;</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">?&gt;</span></span></code></pre>

Marking lines as highlighted, added, deleted or focus

use Spatie\SidecarShiki\SidecarShiki;

// Highlighting lines 1 and 4,5,6
    code: $code,
    language: 'php',
    highlightLines: [1, '4-6'],

// Marking line 1 as added
    code: $code,
    language: 'php',
    addLines: [1],

// Marking line 1 as deleted
    code: $code,
    language: 'php',
    deleteLines: [1],

// Marking line 1 as focus
    code: $code,
    language: 'php',
    focusLines: [1],

Using the Commonmark HighlightCodeExtension

Here’s how we can create a function that can convert Markdown to HTML with all code snippets highlighted. Inside the function, we’ll create a new MarkdownConverter that uses the HighlightCodeExtension provided by this package.

The $theme argument on HighlightCodeExtension expects the name of one of the many themes that Shiki supports.

use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\MarkdownConverter;
use Spatie\SidecarShiki\Commonmark\HighlightCodeExtension;

function convertToHtml(string $markdown, string $theme): string
    $environment = (new Environment())
        ->addExtension(new CommonMarkCoreExtension())
        ->addExtension(new HighlightCodeExtension($theme));

    $markdownConverter = new MarkdownConverter(environment: $environment);

    return $markdownConverter->convertToHtml($markdown);

For more details, Visit this package’s documentation and source code on Github

Closing Note

Codebrisk is here to assist you to grow your business and establishing a worthy online presence with our Custom Web Development solutions. Our skilled developers have plenty of experience in CRM software development, SAAS application development, eCommerce web application development, etc. Instead of selling off-the-shelf software, We deliver a customized website solution tailored to our client’s needs. So if you’re interested, you can get in touch with us or get a free quote from us.

Published at : 06-07-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project