How to add code highlighting to your website using prism.js

If you are a blogger on software you are likely going to share some code snippets. Without highlighting code can be hard to read and your point can easily be lost. Highlighting code can also make your blog look more professional. For code highlighting I use a simple library called Prism.js.

Setting it up

It is easy to set up prism.js, head over to their download page and:

Choose a theme (I use the default theme)
Choose the programming/markup languages you want to highlight
Download the CSS and javascript
Add the script and CSS to your website.
Wrap your code snippets in simple html with a class.
Enjoy!

When choosing the languages you want to highlight, do not choose all of them. Choosing all will give you a script of about 500 KB. That may not sound like a lot, but it will slow down your website, especially when it comes to mobile devices. Choose the ones you need and the ones you think you might need soon, you can always remove or add new languages to the script by downloading a new script and replacing the old - this is quite easy!

Adding the scripts and css to your website or blog is different for every platform. If you know about CSS/javascript/HTML you likely already know how to do this. Wordpress for example has great documentation on how to add scripts and css.

The easiest way is to upload the .css and .js files you download from prismjs.com to your website. Your website will likely have other scripts and style sheets in the body or header. This will give you a hint on how to link to these files. It will look something like the below:

<head>
	<!-- Other style sheets -->
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	<!-- Other javascript -->
	<script src="prism.js"></script>
</body>

What do you get?

Once the CSS and javascript is loaded on your website you can start using prism.js. I for example did a post on SQL index hints where I used prism, the HTML that I used is:

<code class="language-sql">
SELECT * FROM People WITH (INDEX(People_Name))
	WHERE [Name] = 'Peter'
</code>

Which results in the following:

SELECT * FROM People WITH (INDEX(People_Name))
	WHERE [Name] = 'Peter'

This looks much better than if I had done nothing, which you can see below:

SELECT * FROM People WITH (INDEX(People_Name))
	WHERE [Name] = 'Peter'

I like prism.js as it is fast, pretty and very easy to set up if you know a little about web development. It also does not overdo the highlighting, keeping focus on what is important.

Other examples

Prism.js can be used for many different programming/mark-up languages. Here are examples of the ones I most frequently use, with snippets from my own blog posts:

C#:

var tupleList = new List<(string Firstname, string Lastname)>
{
    ( "Peter", "Rasmussen" ),
    ( "John", "Doe" )
};

var dictionary = tupleList.ToDictionary(tuple => tuple.Firstname, tuple => tuple.Lastname);

var peterLastname = dictionary["Peter"];
var JohnLastname = dictionary["John"];

Javascript:

const sass = require('node-sass'); //some comment

grunt.initConfig({
	sass:{
		options: {
            outputStyle: 'compressed',
            implementation: sass
		}
    }
});

Sass (scss)

.footer-section{
	position: relative;
    width: 80%;
    max-width: 710px;
    margin: 4rem auto;
    text-align: center;
}

That is it!

If you have any questions feel free to ask them in the comments down below. I likely know nothing about your platform, but I can likely help you figure out the error you are having. Any feedback is as always: welcome! :)