Beautiful Code Snippets Using Prettify.js


Embed beautiful code snippets onto your site with ease using Google’s prettify.js and a set of themes by Dayle Rees ported across to SASS.

Recently, I have been looking for an easy way of including code snippets within my articles. I use Sublime Text for all coding and have it themed using one of the beautiful colour schemes created by Dayle Rees. I wanted something that would look just as nice and so set out to look for a solution.

Dayle's themes can be used with many programs including for use on the web. Each theme has a css stylesheet for use with Google's Prettify.js. Prettify is an easy to use javascript library that can be used to display code from many languages. It first breaks the code into tokens, (keywords, strings, comments, etc.), and then wraps each token in a <span> tag with a corresponding class. Once the code is wrapped in these tags you can just set a colour for each token type.

Installing Prettify.js

You have two options when setting Prettify up. You can use the autoloader by including "https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js" within a src tag in your head section. This will load the entire system and schedule the prettifier to run on page load. Alternatively, you can download the script and serve it yourself. You then need to run the prettyPrint function once the page has finished loading. One way to do this is via the onload handler: <body onload="prettyPrint()">. For more information see the prettify getting started page.

Escaping Special Characters

For prettify to work, you need to escape any special characters that you have in your code snippet. An easy way to do this is to copy and paste your code into this tool. Once you have escaped the code and have Prettify setup then all you have to do is place your code between <code class="prettyprint"> and/or <pre class="prettyprint"> tags. Now whenever the page is loaded, the code is split into tokens and highlighted with whatever colours you decide to use.

SASS

As I mentioned before, each of Dayle's themes comes with a CSS counterpart for use with Prettify output. I recently made the move to using SASS, but at the time of writing this was not an option with Dayle’s colour schemes. I decided to port them over myself and you can find the code here.

Included within this repository are all of Dayle's colour schemes. Each theme contains sass colour variables for every token that Prettify recognises. The main file within the repository is the code.scss file. This loads the desired theme variables and applies the colours along with some basic styling to every code example. Inline code can be highlighted by including it within a <code class="prettyprint"> tag. Blocks of code can be highlighted by including them within <pre class="prettyprint"><code> tags.

Source Code Pro

The default font I use for code snippets is Source Code Pro. This is a great (and open source) font which I also use as my main font within Sublime Text and my terminal. If you do not have this font then it will fall back to other more common monospace fonts.

Examples

Below are some of my favourite styles included in the library.

Snappy Light

<?php
namespace Illuminate\Container;

use Closure;
use ArrayAccess;

class Container implements ArrayAccess
{
    /**
     * An array of the types that have been resolved.
     *
     * @var array
     */
    protected $resolved = array();

    /**
     * Determine if a given type is shared.
     *
     * @param  string  $abstract
     * @return bool
     */
    public function isShared($abstract)
    {
        if (isset($this->bindings[$abstract]['shared']))
        {
            $shared = $this->bindings[$abstract]['shared'];
        }
        else
        {
            $shared = false;
        }

        return isset($this->instances[$abstract]) || $shared === true;
    }

}

Peacocks in Space

<?php
namespace Illuminate\Container;

use Closure;
use ArrayAccess;

class Container implements ArrayAccess
{
    /**
     * An array of the types that have been resolved.
     *
     * @var array
     */
    protected $resolved = array();

    /**
     * Determine if a given type is shared.
     *
     * @param  string  $abstract
     * @return bool
     */
    public function isShared($abstract)
    {
        if (isset($this->bindings[$abstract]['shared']))
        {
            $shared = $this->bindings[$abstract]['shared'];
        }
        else
        {
            $shared = false;
        }

        return isset($this->instances[$abstract]) || $shared === true;
    }

}

Iceberg Contrast

<?php
namespace Illuminate\Container;

use Closure;
use ArrayAccess;

class Container implements ArrayAccess
{
    /**
     * An array of the types that have been resolved.
     *
     * @var array
     */
    protected $resolved = array();

    /**
     * Determine if a given type is shared.
     *
     * @param  string  $abstract
     * @return bool
     */
    public function isShared($abstract)
    {
        if (isset($this->bindings[$abstract]['shared']))
        {
            $shared = $this->bindings[$abstract]['shared'];
        }
        else
        {
            $shared = false;
        }

        return isset($this->instances[$abstract]) || $shared === true;
    }

}

Earthsong

<?php
namespace Illuminate\Container;

use Closure;
use ArrayAccess;

class Container implements ArrayAccess
{
    /**
     * An array of the types that have been resolved.
     *
     * @var array
     */
    protected $resolved = array();

    /**
     * Determine if a given type is shared.
     *
     * @param  string  $abstract
     * @return bool
     */
    public function isShared($abstract)
    {
        if (isset($this->bindings[$abstract]['shared']))
        {
            $shared = $this->bindings[$abstract]['shared'];
        }
        else
        {
            $shared = false;
        }

        return isset($this->instances[$abstract]) || $shared === true;
    }

}

You can browse through all of Dayle's themes here.

comments powered by Disqus