AndyHunt.me

CV and personal site of Andy Hunt

You can use highlight.js to highlight Statamic markdown output

Posted: Sunday 21 February 2021 @ 16:16:51

Statamic 3 uses the league/CommonMark Markdown parser, which outputs fenced code blocks as a code element inside a pre element. If that fenced code block specifies the language in the info string, it will output the language as a class name on the code element. For example the following markdown

    ```php
    <?php echo "foo";
    ```

will result in the following HTML

<pre>
    <code class="language-php"><?php echo "foo";</code>
</pre>

highlight.js is able to search for code blocks when initialized, and highlight based on a class name

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute

The class names output by the markdown parser are the same as the ones used by highlight.js