New: Learn Statamic on Laracasts!

Markdown Highlight

Addon by

Markdown Highlight Main Screenshot


Latest Version

Markdown Highlight

Markdown Syntax Highlighting for Statamic 3.

This Addon provides pre-rendered syntax highlighting based on Shiki, so no need for any extra JavaScript to get some color in your code samples!



Require it using Composer.

composer require rias/statamic-markdown-highlight

In your project, you should have the JavaScript package shiki installed. You can install it via npm

npm install shiki

or Yarn

yarn add shiki

Using Markdown Highlight


Add the fieldtype to your fieldset.

    display: Main
        handle: code
          type: markdown_highlight
          display: Code

For other options, this fieldtype extends the default Statamic Markdown fieldtype.

Highlighting lines and other functionalities

Under the hood this package uses spatie/commonmark-shiki-highlighter, you can read those docs to see what else is possible.

Change default shiki theme

You need to publish the config file.

php artisan vendor:publish --tag=statamic-markdown-highlight-config --force

Go to config/statamic/markdown-highlight.php.

'theme' => 'github-light', // change this 

Check supported themes shiki themes.

Brought to you by Rias