spatie / commonmark-highlighter

Highlight code blocks with league/commonmark

Highlight your markdown code blocks with league/commonmark

A block renderer for league/commonmark to highlight code blocks using scrivo/highlight.php.

highlight.php is a server side code highlighter written in PHP that currently supports 185 languages. It's a port of highlight.js by Ivan Sagalaev that makes full use of the language and style definitions of the original JavaScript project.

The output html is compatible with highlight.js themes, which you can explore on highlightjs.org.

What are the benefits of using this package over highlight.js?

• Less JavaScript, which means faster page loads
• No more flash of unstyled code blocks

This project was inspired by sixlive/parsedown-highlight.

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/commonmark-highlighter

Usage

Create a custom CommonMark environment, and register the FencedCodeRenderer and IndentedCodeRender as described in the league/commonmark documentation.

use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
use League\CommonMark\Extension\CommonMark\Node\Block\IndentedCode;
use League\CommonMark\MarkdownConverter;
use Spatie\CommonMarkHighlighter\FencedCodeRenderer;
use Spatie\CommonMarkHighlighter\IndentedCodeRenderer;

$environment = new Environment();
$environment->addExtension(new CommonMarkCoreExtension());
$environment->addRenderer(FencedCode::class, new FencedCodeRenderer());
$environment->addRenderer(IndentedCode::class, new IndentedCodeRenderer());

$markdownConverter = new MarkdownConverter($environment);

echo $markdownConverter->convertToHtml($markdown);

The underlying highlight library recommends specifying a subset of languages for the auto-detection. You can pass an array of languages to any of the renderers.

new FencedCodeRenderer(['html', 'php', 'js']);

new IndentedCodeRenderer(['html', 'php', 'js']);

Highlighting specific lines

Line numbers start at 1.

```php - Don't highlight any lines
```php{4} - Highlight just line 4
```php{4-6} - Highlight the range of lines from 4 to 6 (inclusive)
```php{1,5} - Highlight just lines 1 and 5 on their own
```php{1-3,5} - Highlight 1 through 3 and then 5 on its own
```php{5,7,2-3} - The order of lines don't matter
However, specifying 3-2 will not work.

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security

If you've found a bug regarding security please mail [email protected] instead of using the issue tracker.

Postcardware

You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.

We publish all received postcards on our company website.

Credits

• Sebastian De Deyne
• All Contributors

License

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

commonmark-highlighter's Issues

highlighting script tag

hi there,
I don't know if it's package related, but any idea why the "script" tag isn't highlighted correctly?

The code for this (picture):

I save the textarea directly to the db from SimpleMde with markdown data, and on frontend I use github.css style for this example, and use {!! !!} tags to render.

With php I don't have any problem, fully colorize the opening tag.

Highlight line in combination with emojis

If you try to highlight a specific line in combination with an emoji, the emoji will not be shown anymore:

    ```php{2}
    // ✅ ...
    $isUserPending = $user->isStatus('pending');
    ```

Without the {2} the emoji is shown correctly:

    ```php
    // ✅ ...
    $isUserPending = $user->isStatus('pending');
    ```

Have you an idea what this is about @allejo?

PS: Here some info about how I set up the converter:

        $environment = Environment::createCommonMarkEnvironment();
        $languages = ['html', 'php', 'js', 'shell', 'shell'];

        $environment->addBlockRenderer(FencedCode::class, new FencedCodeRenderer($languages));
        $environment->addBlockRenderer(IndentedCode::class, new IndentedCodeRenderer($languages));

        $commonMarkConverter = new CommonMarkConverter([], $environment);

        return $commonMarkConverter->convertToHtml($codeExample);

Add .hljs class to all blocks

Hi
Is it possible to add .hljs class even to blocks with unsupported languages. Currently, unsupported languages (like blade, vue ..etc) display without a background when applying a theme. This will confuse the reader as they appear just like a regular text.

This is without apply the class:

This is with the class applied:

Add line highlighting support

The CommonMark spec allows for any arbitrary content to exist in the info string of a code block. Would you be open to adding support for highlighting specific lines of code within said code block?

```html{2}
<div>
  <p>I wish I wish I was a fish</p>
</div>
```

Proposed Syntax

• html{4} - highlight the 4th line of the code block
• html{4-5} - highlight the 4th through 5th lines of code
• html{1,4-5} - highlight the 1st and 4th through 5th line of code separately

Notice: Infinite loop in Highlight.php

There's an issue for it, but the bottom line is new installations of this library will pull in a version of the highlighter which has an infinite loop when rendering JS code blocks.

I have a branch that fixes it, which I have submitted as a PR; but you might want to tag an older version in the meantime...

Updating to work with Commonmark 1.0.0

Commonmark v1.0.0 changes the League\CommonMark\Block\Renderer\FencedCodeRenderer to be a final class, so it can’t be extended anymore.