How to use Google’s Prettify to add syntax highlighting to code snippets

Click here to learn the faster way.

As this blog was going to have posts on programming (as obvious from the name of this blog and About page), I would most likely need to use code snippets as examples, because it isn’t fun to discuss about programming without any mention of source code. Despite the fact that not all programming blogs have syntax highlighting enabled for their code snippets, it is quite ugly in look to see the code without proper formatting and syntax highlighting.

With the use of Google’s JavaScript module called Prettify, you can easily highlight your code. The following is an example of how your code will look like when using this module:

The above example is the famous Hello, World program in C++. You can see that the code is highlighted in the fashion of vim text editor (more on that later).

So how can I use this awesome feature in my programming blog?

You simply need to copy the HTML/CSS/JavaScript code from the trunk of Prettify to your HTML page. To make sure you don’t end up copying the wrong code, I copied and pasted the required code (thanks to this post):

Paste the following before </header>:

Paste the following in the <style> tag:

Note: If you are using the Tumblr platform for your blog/site, then just copy the CSS code in your “Custom CSS”. Do not mess with the <style> tag in HTML customization page!

Once the library is properly installed, you can pre-format and highlight your code by simply writing the code snippets in <pre> and <code> blocks as follows:

You don’t need to specify the programming language; Google’s Prettify figures it out itself! The <pre> tag is for pre-formatting the code and <code> is for highlighting it, so make sure to use both <pre> and <code> tag when adding a source snippet in your post.

HTML Encoding

One thing that you need to keep in mind is that you must change all the angle brackets in your code to &lt; and &gt; which means you need to change all of your < to &lt; and > to &gt; in the code. I use this online encoder to encode my code to the proper HTML.

Themes

I use the Sunburst style, so the CSS code that I posted will give you the Sunburst style as well. I prefer this style because its look is similar to vim text editor, which I use as my default text editor on Linux, but you can use different themes for your own taste.

This procedure for adding syntax highlighting can be used anywhere the customization of HTML is available such as Tumblr. See this stand-alone HTML page example.

Faster way to load Google’s Prettify

Previously we hard coded the whole JavaScript and CSS for styling. The quickest way to add Google’s Prettify is to simply load run_prettify.js via one URL.

You need to specify the parameters; I specified lang parameter and skin parameter. Note that to use syntax highlighting with this method, you need use prettypink class.

See this stand-alone HTML page example.

Did this post teach you something you didn’t know before? Please let me know in the comments section below!

div vs span (HTML) – What’s the difference?

Beginners learning the HTML and web designing / development often ask the difference between these two HTML tags, especially if they are learning by looking at the HTML code, as they both seem to do the same job of defining a section of HTML code as a class or an ID, which can later be styled using CSS (Hint: CSS is used for the presentation of HTML code).

Here, in this tutrorial, I will tell you the differences between them and which is appropriate for different cases.

div vs span (HTML) – What’s the difference?

div – Document Division Element

<div> tag is used for defining a division or a section in an HTML page as a class or an ID, which then can be formatted / styled with CSS. It divides the page into a section! Consider the following example:

Here, we have defined a class “green-section” with <div> tag. The defined class “green-section” was earlier styled within <style> tag to change the text color to green. Thus, you can see that we used <div> tag to define a paragraph as the one with green text.

Through it, we can separate different sections of a website. For instance, you can define left / right widgets section in your blog with <div>, change the size of widgets, etc. It is generally used with block-level content.

Note that <div> creates a line around the section, so you don’t need to use <p> for the text. Following is its default CSS value:

span – Inline Element

It is used for defining an inline element within a section (i.e., <div> enclosed text, etc.) as a class or an ID. It is used for spanning the element!

Continuing from the previous example, we will now add a <span> tag to define a new element within the <div> defined section to change our text color to blue:

Here you can see that I’ve added a <span> tag to define a new class “blue-text” for changing the text color to blue through CSS. <span> doesn’t create a line around the element, so it is suitable for defining a sub-section of a section. It is normally used to change the property of some text in a paragraph to make it prominent. Infolinks script changes the contextual text to ads through span element.

Note that both <div> and <span> should be used in the places where normal tags (<em>, <strong>, etc.) are not enough. Overusing them can result in an ugly and hard-to-manage code.

Following is the stand-alone example of HTML which you can copy / paste into your text editor, save it to index.html and then open the file in your browser to see its usage:

Conclusion

In this tutorial, I have showed you the difference between these two tags and its appropriate use.
If you have any question regarding these tags or HTML, then why not leave comments in the comments section below so that I can make you happy?