Highlight your code syntax with Prism.js

Many of web developers have private blog or just their own website. And truly many of us write useful scripts and features in different programming languages. If you are one of us, ask yourself: "Is my code in posts easy readable?". Well, if your answer is YES you will probably know some syntax highlighter or any other way to shape your code in color or to make it better readable. But if your answer is NO, then you are doing something wrong. Take a look at your code again. If it is only dark text on light background or vice-versa, it is definitely bad readable. It can be easy readable, if you write short simple code but what if you write code more than one page long? It will be most likely messy. You can improve this by adding syntax highlighter to your website.

Syntax highlighter

What the hell is syntax highlighter? Yes, this is the best time to ask. The syntax highlighter is system which can improve readibility of code written in web page post. We are talking about web pages but you can put highlighter in all projects where you want to show users some code. Highlighter simply highlights special keywords, string values, numbers, logical and mathematical operators (...and other important information) with some specific colors (e.g. this, function, return... etc.). It's not so hard to imagine that. Every better code editor you are using to code websites uses own syntax highlighter.

Ok, this last paragraph was probably just wasting your time because you know what syntax highlighter is. But if you are still interested in what syntax highlighting is and how it works, you can read all about it on Wikipedia here.

Confession

I have to confess... I made my own syntax highlighter. Well, very lightweight. And dumb. And lame. But for my defense it was my first highlighting "system". Once again... my first 😄 so don't judge me, please. Ok. Here it is.

Yes, you're right. Small amount of regular expressions highlighting just a few keywords from JavaScript (and others languages using them). And yes, it is in JavaScript. How ironic that my highlighting code is highlighted by other highlighting system 😄. It is very simple and it works. But for me it was not sufficient. In every programmer's life comes a moment, when he/she must use some external library. Nobody has time for coding all own scripts. And trust me, if you try to resolve something, there are many others programmers in the world trying to resolve exactly the same problem. Yes, they are.

Look! A Prism

Once upon a time I browsed the web and suddenly... Prism. No, really! I can't explain how I get to the Prism, but it was probably on Lea Verou web page. She is handy and smart person. I don't know her personaly, but seriously guys, check out her website http://lea.verou.me or you can follow her on Twitter - @LeaVerou. She also made a Dabblet and many other projects.

The Prism is highlighting system for websites written in JavaScript and CSS. It is easily usable, lightweight, fast and extensible tool for code syntax highlighting. You have already seen it in action above. Nice, clean theme, easy to read. All you need.

When I first saw the Prism I was sceptical. But when the creator of JavaScript, Brendan Eich started to use Prism in his blog I told myself, that I have to try it. I did. Prism, ladies and gentlemen, it is absolutely wonderful.

How to use it?

Go to the Prism project webpage, click on the download button, select what you want and then download JS and CSS files (big buttons at the bottom). If you download it, you will have to do last two things.

First thing you have to do is to include the prism.css and prism.js files you downloaded in your page (so obvious).

The last thing is simple but important. If you want to use code highlighting you have to use <CODE> tag. And for different languages there are different rules. So you have to define that there is some specific language using CSS class "language-{*language*}". For example if you want to highlight css code, then your CSS class will be "language-css". For JavaScript it will be "language-javascript". Easy.