Syntax highlighting on web page with highlight.js

How to highlight blocks of code on a web page? The easiest way to do it is by using highlight.js! Here's how to use it step by step. 

First - add this script to your <head> section: 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Then - include one of the highlighting styles you want to use. On this blog I'm using atom-one-ligh 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/atom-one-light.min.css" />
This is the list of all styles available. 

Simply replace the name of the style in the code above. Keep the .min extension though.
Now - if you want to write some highlighted code - put it between following tags: 
<pre><code>// Put some code here.</code></pre>
The library will try to automatically detect the language to color, but you can help it by giving it the proper class: 
<pre><code class="cpp">// Put some c++ code here.</code></pre>
This is the list of all supported languages with their class names. 

When you paste your code into this block remember that some special characters like < and > must be written using HTML character entities code like &lt; and &gt; 

You can play a little with highlighting on JSFiddle.