PhpDev.App
spatie/shiki-php

spatie/shiki-php

Stars: 250

Forks: 19

Pull Requests: 8

Issues: 0

Watchers: 3

Last Updated: 2023-04-28 18:36:02

#php #code #hightlight

Code highlighting with Shiki in PHP

License: MIT License

Languages: PHP, JavaScript

https://freek.dev/2024-how-to-render-markdown-with-perfectly-highlighted-code-snippets

Code highlighting with Shiki in PHP

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Shiki is a beautiful syntax highlighter powered by the same language engine that many code editors use. This package allows you to use Shiki from PHP.

\Spatie\ShikiPhp\Shiki::highlight(
    code: '<?php echo "Hello World"; ?>',
    language: 'php',
    theme: 'github-light',
);

This package also ships with the following extra languages, on top of the 100+ that Shiki supports out of the box:

  • Antlers
  • Blade

Usage in Laravel and league/commonmark

Laravel users can easily use Shiki via our spatie/laravel-markdown package.

If you need a league/commonmark extension to highlight code, head over to spatie/commonmark-shiki-highlighter.

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Installation

You can install the package via composer:

composer require spatie/shiki-php

In your project, you must have the JavaScript package shiki installed, otherwise the <pre> element will not be present in the output.

You can install it via npm

npm install shiki

... or Yarn.

yarn add shiki

Make sure you have installed Node 10 or higher.

Usage

Here's an example where we are going to highlight some PHP code.

use Spatie\ShikiPhp\Shiki;

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

The output is this chunk of HTML which will render 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

Shiki-php allows you to mark certain lines as highlighted, added, deleted and focus. To do this, you can pass in the necessary lines to the highlight method:

use Spatie\ShikiPhp\Shiki;

// Highlighting lines 1 and 4,5,6
Shiki::highlight(
    code: $code,
    language: 'php',
    highlightLines: [1, '4-6'],
);

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

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

// Marking line 1 as focus
Shiki::highlight(
    code: $code,
    language: 'php',
    focusLines: [1],
);

You can then target these classes in your own CSS to color these lines how you want.

PHP 7.4 support

Shiki has a nice and easy syntax in combination with at least PHP 8.

It does support PHP 7.4, but does loose a little bit of it's nice syntax if using it with PHP7.4, as you need to follow the order of the variables.

// As reference
highlight(
    string $code,
    ?string $language = 'php',
    ?string $theme = 'nord',
    ?array $highlightLines = [],
    ?array $addLines = [],
    ?array $deleteLines = [],
    ?array $focusLines = []
)

// Instead of PHP 8 syntax
Shiki::highlight(
    code: $code,
    language: 'php',
    deleteLines: [1],
);

// You need to follow PHP 7.4 syntax
Shiki::highlight(
    $code,
    'php',
    null,
    null,
    [1],
);

Determining available languages

To get an array with all languages that Shiki supports, call getAvailableLanguages

$shiki = new \Spatie\ShikiPhp\Shiki();

$shiki->getAvailableLanguages(); // returns an array
$shiki->languageIsAvailable('php'); // returns true
$shiki->languageIsAvailable('non-existing-language'); // returns false

Determining available themes

To get an array with all themes that Shiki supports, call getAvailableThemes

$shiki = new \Spatie\ShikiPhp\Shiki();

$shiki->getAvailableThemes(); // returns an array
$shiki->themeIsAvailable('github-light'); // returns true
$shiki->themeIsAvailable('non-existing-theme'); // returns false

Using a custom theme

Shiki supports any VSCode themes.

You can load a theme simply by passing an absolute path as the theme parameter.

use Spatie\ShikiPhp\Shiki;

Shiki::highlight(
    code: '<?php echo "Hello World"; ?>',
    language: 'php',
    theme: __DIR__ . '/your-path-to/themes/some-theme.json',
);

Using Node Version Manager

Under the hood, this package runs a node command to render the markdown. If you use NVM during development, then the package will be unlikely to find your version of node as it looks for the node executable in /usr/local/bin and /opt/homebrew/bin - if this is the case, then you should create a symlink between the node distributable in your NVM folder, to that of the usr/local/bin. Such a command might look like this:

sudo ln -s /home/some-user/.nvm/versions/node/v17.3.1/bin/node /usr/local/bin/node

Creating this symlink will allow the package to find your NPM executable. Please note, if you change your NPM version you will have to update your symlinks accordingly.

Testing

You can run all the tests with this command:

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

The Blade syntax highlighting source is taken from this repo.
The Antlers syntax highlighting source is taken from this repo.

Alternatives

If you don't want to install and handle Shiki yourself, take a look at Torchlight, which can highlight your code with minimal setup.

License

The MIT License (MIT). Please see License File for more information.

OPEN ISSUES

See all

RELEASES

See all