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.

Requirements

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

Follow the Sidecar installation and configuration instructions.

Installation

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' => [
    \Spatie\SidecarShiki\Functions\HighlightFunction::class,
],

Deploy the Lambda function by running:

php artisan sidecar:deploy --activate

Usage

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

use Spatie\SidecarShiki\SidecarShiki;

SidecarShiki::highlight(
    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
SidecarShiki::highlight(
    code: $code,
    language: 'php',
    highlightLines: [1, '4-6'],
);

// Marking line 1 as added
SidecarShiki::highlight(
    code: $code,
    language: 'php',
    addLines: [1],
);

// Marking line 1 as deleted
SidecarShiki::highlight(
    code: $code,
    language: 'php',
    deleteLines: [1],
);

// Marking line 1 as focus
SidecarShiki::highlight(
    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.