Introduction

Syntax highlighting is used by computer programming blogs to highlight code and present it beautifully to the readers for easy instruction and illustration of certain coding practices or workarounds. Perhaps, you think it’s just such a hard thing to achieve this. Syntax highlighting is simply done using the Prism plugin that you can download and install to your pages to provide the highlighting functionality.

But before, we delve deeper into how to add syntax highlighting to your website using prism. Let’s first present some basic info about our buddy highlighter plugin.

What is Prism

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily. Websites such as codtronic technologies, css tricks, site point, smashing magazine and many others, use prism as their syntax highlighter plugin.

One of the great things about prism especially for those who are concerned with website speed and optimization is that its functionality is customizable. This means you can install only the features you want which usually cuts on the sizes of the downloaded resultant files.

Syntax highlighting using prism

In order to syntax highlight your code using prism, first download it from the prism website. Be warned that the more files you check, the larger the sizes of the resultant files combined.

However, before you hit the download button, include these plugins: line numbers, toolbar and remove initial line feed. These plugins are meant to add functionality for code line numbers, a toolbar that supports the copy button and also removal of unwanted space respectively.

So after downloading the files, include them into your html source code. Assume that the downloaded files are named  prism.css (for default styling) and prism.js (for effects and behavior).

    <!DOCTYPE html>
    <html>
        <head>
            <title>Adding the prism plugin files</title>
            <!-- Add the prism.css file -->
            <link rel="stylesheet" href="prism.css">
        </head>
        <body>
            <!-- Other code for this page -->
            <!-- Add the prism.js javascript file -->
            <script src="prism.js"></script>
        </body>
     </html>

Its worth noting that the script prism.js should be added where it is as you see it. This has optimal site benefits especially when the file size is quite huge. Placing it in the header will mean it will load before the rendering of other elements on the page. This may negatively affect the page load speed for large prism.js file sizes.

Having included the downloaded files in our source code, wrap the code into <pre> and <code> tags. We also add a class, language-xxxx on the <code> element where xxxx stands for any of the included languages.

So, assume we are highlighting code in the Javascript language , xxxx will be javascript and <code> is placed under <pre> as shown below.

    <pre>
        <code class="language-javascript">
             // Formatted code to be syntax highlighted goes here
             // We shall use javascript code since its the one we are highlighting
             function showDropDownMenu()
             {
                 var currentMenuItem = $(this);

                 currentMenuItem.css('color', 'rgba(255, 102, 0, 1)');
                 currentMenuItem.next().show(); // Show drop down menu
              }
        </code>
    </pre>

The <code> element basically informs the browser that we are adding code into it and the preformatted (<pre>) tag instructs the browser to display everything under it just as it was formatted, including white space characters. As a result code will be displayed just as it was in your editor.

Adding copying functionality

The copying functionality which basically supports copying the code to your computer clip board is automatically added when you check these two plugins for inclusion; the tool bar and Copy to Clipboard plugins. You may need to add your own CSS code to style the copy button.

    /* Example CSS code to style the button */
   #content-post .toolbar .copy-to-clipboard-button span {
       display: inline-block;
       height: 30px;
       line-height: 30px;
       width: 50px;
       font-size: 1em;
       font-family: Arial;
    }

In this code, .toolbar and .copy-to-clipboard-button are just classes added by prism which you can use with the <span> element to target the copy button. All functionality is handled by the prism.js file. So no need to write any extra code here.

Adding support for line numbers

In order to add line-numbers to our code, we just need to add a class called line-numbers to our <pre> element as shown below.

<pre class="line-numbers">
    <code class="language-xxxx">
        {code}         
    </code>
</pre>

Removing unwanted spaces

To remove unwanted space from our pre-formatted code, either use the remove initial line feed or the normalize white space plugins. We recommend you to use the normalize white space plugin since remove initial line feed is deprecated. It will be removed any time from now.

But anyway, by default – after it’s addition, the remove initial line feed plugin removes any initial line feed. To disable it, add a class keep initial line feed to your desired <pre> tag.

By default the normalize white space plugin trims all leading and trailing white space of every code block. It also removes extra indents and trailing whitespace on every line. The plugin is disabled for a particular code block by adding the class no-whitespace-normalization to either the <pre> or <code> tag