Labels
Posted by

How to add a syntax highlighting to Blogger code blocks?

 As I have recently created a new Blogger account, I've noticed that the template I picked does not really have any syntax highlighting. It's quite ugly and very disturbing. So one Friday night, I decided to go around looking for a syntax highlighter! 

One of the amazing syntax highlighter I found was Prismjs which supports 275 languages! That's a lot! So in order to use this on our Blogger website, we will need to alter it's source code. To do that, we will have to click on Theme. Then we will need to click on the little drop down arrow right next to the Customize button, after that we will see the source code. 

Then we have to paste this code inside the <head> tag. 

<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type='text/javascript' src="http://prismjs.com/prism.js"></script>

Now let's test if the code we inserted actually worked. In order to use prismjs, we will have to enclose the code in <pre> tags. We will also need to specify the language. In our example below, we are using "lang-java" to indicate that we are using the java language. If you're using another language like groovy, then just replace xxxx in "lang-xxxx" like "lang-groovy" to alter the syntax highlighting. 

<pre class="lang-java">
<code>
public class HelloWorld {

    public static void main(String[] args) {
        // Prints "Hello, World" to the terminal window.
        System.out.println("Hello, World");
    }

}
</code>
</pre>

Other Themes

This is all good! When we click on preview, we see that the code is truly being highlighted! But why is the syntax highlighting still different from the one we see on the prismjs website? It looks like it's default. Well it is. Prismjs has a lot of themes to choose from and if you'd like to highlight a particular language, we will have to select those languages and download the source code, host it and insert it into our template again! That's how easy it is. :)

Funky Theme

<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>

Dark Theme

<link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>

Okaidia

<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>

Twilight

<link rel="stylesheet" href="http://prismjs.com/themes/prism-twilight.css"/>

Solarized Light

<link rel="stylesheet" href="http://prismjs.com/themes/prism-solarizedlight.css"/>

Coy

<link rel="stylesheet" href="http://prismjs.com/themes/prism-coy.css"/>
Labels:

Comments

Post a Comment