PHPackages                             spatie/commonmark-shiki-highlighter - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. spatie/commonmark-shiki-highlighter

ActiveCommonmark-extension[Templating & Views](/categories/templating)

spatie/commonmark-shiki-highlighter
===================================

Highlight code blocks with league/commonmark and Shiki

2.5.2(5mo ago)893.5M↓11.8%157MITPHPPHP ^8.0CI passing

Since Jul 9Pushed 5mo ago1 watchersCompare

[ Source](https://github.com/spatie/commonmark-shiki-highlighter)[ Packagist](https://packagist.org/packages/spatie/commonmark-shiki-highlighter)[ Docs](https://github.com/spatie/commonmark-shiki-highlighter)[ GitHub Sponsors](https://github.com/spatie)[ RSS](/packages/spatie-commonmark-shiki-highlighter/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (7)Versions (14)Used By (7)

Highlight code blocks with league/commonmark and Shiki
======================================================

[](#highlight-code-blocks-with-leaguecommonmark-and-shiki)

[![Latest Version on Packagist](https://camo.githubusercontent.com/9eadc7895c3ac05c19d6b3c147b8eedc53c91d3be501806e9522ec8206210893/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7370617469652f636f6d6d6f6e6d61726b2d7368696b692d686967686c6967687465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/spatie/commonmark-shiki-highlighter)[![Tests](https://github.com/spatie/commonmark-shiki-highlighter/actions/workflows/run-tests.yml/badge.svg)](https://github.com/spatie/commonmark-shiki-highlighter/actions/workflows/run-tests.yml)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/717e4d9fa1fefff446c6b78bb8110910a13f0f585690ac367c44fb87f76292f8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f7370617469652f636f6d6d6f6e6d61726b2d7368696b692d686967686c6967687465722f436865636b253230262532306669782532307374796c696e673f6c6162656c3d636f64652532307374796c65)](https://github.com/spatie/commonmark-shiki-highlighter/actions?query=workflow%3A%22Check+%26+fix+styling%22+branch%3Amaster)[![Total Downloads](https://camo.githubusercontent.com/45c3ae3ba6abdb173b0aecf069bc7d8f1a73ce108d36b8ae9d02ac06e67ace55/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7370617469652f636f6d6d6f6e6d61726b2d7368696b692d686967686c6967687465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/spatie/commonmark-shiki-highlighter)

This package contains a block renderer for [league/commonmark](https://github.com/thephpleague/commonmark) to highlight code blocks using [Shiki PHP](https://github.com/spatie/shiki-php).

This package also ships with the following extra languages, on top of the [100+ that Shiki supports](https://github.com/shikijs/shiki/tree/master/docs/languages.md) out of the box:

- Antlers
- Blade

If you're using Laravel, make sure to look at our [spatie/laravel-markdown](https://github.com/spatie/laravel-markdown) package which offers easy integration with Shiki in laravel projects.

Support us
----------

[](#support-us)

[![](https://camo.githubusercontent.com/1737157c118c05e4fddbb2d963e6bf82689c4c5d51664670b3710cfd6a9aa5c5/68747470733a2f2f6769746875622d6164732e73332e65752d63656e7472616c2d312e616d617a6f6e6177732e636f6d2f636f6d6d6f6e6d61726b2d7368696b692d686967686c6967687465722e6a70673f743d31)](https://spatie.be/github-ad-click/commonmark-shiki-highlighter)

We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).

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](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require spatie/commonmark-shiki-highlighter
```

In your project, you must have v1 of the JavaScript package [`shiki`](https://github.com/shikijs/shiki) installed, otherwise the `` element will not be present in the output.

You can install it via npm

```
npm install shiki@^1.3.0
```

or Yarn

```
yarn add shiki@^1.3.0
```

Usage
-----

[](#usage)

Here's how we can create a function that can convert markdown to HTML with all code snippets highlighted. Inside the function will create a new `MarkdownConverter` that uses the `HighlightCodeExtension` provided by this package.

```
use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\MarkdownConverter;
use Spatie\CommonMarkShikiHighlighter\HighlightCodeExtension;

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

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

    return $markdownConverter->convertToHtml($markdown);
}
```

Alternatively, you can inject an already instantiated `Shiki` instance into the `HighlightCodeExtension`:

```
use Spatie\ShikiPhp\Shiki;
use Spatie\CommonMarkShikiHighlighter\HighlightCodeExtension;

$environment->addExtension(new HighlightCodeExtension(shiki: new Shiki()));
```

Using themes
------------

[](#using-themes)

The `$theme` argument on `HighlightCodeExtension` expects the name of [one of the many themes](https://github.com/shikijs/shiki/blob/master/docs/themes.md) that Shiki supports.

Alternatively, you can use a custom theme. Shiki [supports](https://github.com/shikijs/shiki/blob/master/docs/themes.md) any [VSCode themes](https://code.visualstudio.com/docs/getstarted/themes). You can load a theme simply by passing an absolute path of a theme file to the `$theme` argument.

Marking lines as highlighted, added, deleted and focus
------------------------------------------------------

[](#marking-lines-as-highlighted-added-deleted-and-focus)

You can mark lines using the Markdown info tag as highlighted or focused. You can prefix lines with `+ ` or `- ` to mark them as added or deleted. In the first pair of brackets, you can specify line numbers that should be highlighted. In an optional second pair you can specify which lines should be focused on.

```
```php{1,2}{3}