This is a picture of me.

Simon Buckley

SMNBKLY.CO


Fancy Code Highlighting With Prism

21 January 2019

In my initial post, I highlighted (pardon the pun) the syntax highlighting library, Prism.

Implemented here on this blog, Prism is a small and developer friendly tool built with CSS and JavaScript. Once configured, it beautifies your code snippets using one of eight different theme options. As a fan of Sublime Text’s Monokai colour scheme, I opted for the Okaidia theme.

Once you’ve chosen your theme, you now choose the languages to include in the script. Prism supports 160 languages, from CSS to R, from JSON to PowerShell. Pick as many (or as few) as you think you’ll need on your website. Each language adds only a kilobyte or two to the download size.

Download the relevant JavaScript and CSS files, and I’ll explain below I’ll explain how to implement Prism, making use of Kirby’s features and some JavaScript to make sure the Prism files aren’t downloaded on pages that don’t need them. If you don’t care how it’s done, and just want to see the code, skip straight to the bottom.

Step One: Use Kirby to check the page template (optional)
Using Kirby’s intendedTemplate method, we can make sure the Prism JavaScript and CSS files aren’t downloaded in templates we are certain we won’t need them. In my case, I’ll only be using Prism in my blog posts for now, so I added the below code to my footer.php, included in every template on my site.

<?php if($page->intendedTemplate() == 'post'): ?>

<?php endif ?>

Step Two: JavaScript to check for code elements
Inside the PHP if statement above, I placed the code below. This code checks the current document for a <code> element. The document.querySelector() supports any CSS selector.

var code = document.querySelector('code');
if(code !== null) {

}

Step Three: Create the link and script tags with JavaScript
Inside the above JavaScript if statement, we need to construct the <script> and <link> tags, and append them to the <body> element. The code below makes use of Kirby’s url helper, so if you’re not using Kirby, replace this helper with either a relative or absolute link to your resources, depending on your needs.

// replace the PHP with a url of your choice if you're not using Kirby
var cssFile = "<?php echo url('assets/css/prism.css'); ?>";
var link = document.createElement( "link" );
link.href = cssFile.substr( 0, cssFile.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "body" )[0].appendChild( link );

// replace the PHP with a url of your choice if you're not using Kirby
var jsFile = "<?php echo url('assets/js/prism.js'); ?>";
var script = document.createElement( "script" );
script.src = jsFile.substr( 0, jsFile.lastIndexOf( "." ) ) + ".js";
script.async = "async";
script.type = "text/javascript";
document.getElementsByTagName( "body" )[0].appendChild( script );

And with that, your website’s syntax highlighting should be beautiful, readable, and user friendly. See below for the entire code.

The entire code

<?php if($page->intendedTemplate() == 'post'): ?>
    <script async type="text/javascript">
        var code = document.querySelector('code');
        if(code !== null) {
            var cssFile = "<?php echo url('assets/css/prism.css'); ?>";
            var link = document.createElement( "link" );
            link.href = cssFile.substr( 0, cssFile.lastIndexOf( "." ) ) + ".css";
            link.type = "text/css";
            link.rel = "stylesheet";
            link.media = "screen,print";
            document.getElementsByTagName( "body" )[0].appendChild( link );

            var jsFile = "<?php echo url('assets/js/prism.js'); ?>";
            var script = document.createElement( "script" );
            script.src = jsFile.substr( 0, jsFile.lastIndexOf( "." ) ) + ".js";
            script.async = "async";
            script.type = "text/javascript";
            document.getElementsByTagName( "body" )[0].appendChild( script );
        }
    </script>
<?php endif ?>
Web Design JavaScript

This post was last updated on 8 October 2019