Make Code Snippets Look Awesome With Google Code Prettify Syntax Highlighter

Add Comment

Everyone wants their blog/website to look unique as well as stylish. Even while displaying code snippets also you would prefer to stay different which matches to your site theme and look elegant. Lots of methods are there to avail and one of them is Google Code Prettify which make your code look more pretty, easy to use and install.

Google+Code+Prettify

Image Credits : Karolo

Some Features Of GCP :

  • ◾Works on HTML pages.
  • ◾Works even if code contains embedded links, line numbers, etc..
  • ◾Simple API.
  • ◾Does not block page from loading while running.
  • ◾Customizable styles.
  • ◾Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
  • ◾Extensible language handlers for other languages. You can specify the language.
  • ◾Widely used with good cross-browser support. Powers code.google.com and stackoverflow.com

Adding Google Code Prettify To Blogger :

Before doing anything Backup your Template first.

1) Go to blogger template by clicking on Template and then on Edit HTML

Blogger+Template

Now search (Ctrl+F) for </head> tag in the template and copy the below code and paste it above </head> tag.

<!-- Prettify SheToldMe--> 
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' 
rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' 
type='text/javascript'/>

2) Again search for <body> tag and replace it with below line of code

<body onload='prettyPrint()'>

3) That's it. Now whenever you want to add some code in your post, switch to Edit HTML mode, rather than Compose, and add

HTML-Mode

<pre class="prettyprint">
// YOUR CODE HERE
</pre>

means you need put your code in pre tag and use the prettyprint class

Note : * Do not forget to Encode your code here to convert your raw HTML into escaped characters.

You can even tell the pretty print about the language you are using e.g.

<pre class="prettyprint lang-java">
// YOUR CODE HERE
</pre>

A list of all the supported languages and how it works can be found in their READ ME File

Customizing Google Code Prettify To Look More Pretty :

If you are not happy with the default style or theme then don't worry, you can get more themes to choose from the below Gallery.

Google-Code-Prettify-Theme-Default

By default you will be using this prettify style only.

Google-Code-Prettify-Theme-Desert Google-Code-Prettify-Theme-Sunburst Google-Code-Prettify-Theme-Sons-Of-Obsidian Google-Code-Prettify-Theme-Doxy

Click on the style which suit your need and use them by Hosting at your own server.

Must Read >> Host Your External Files In Drop box For Free.

We Still got more themes to choose. Thanks to JMBlog for providing below styles. Click on the style which fits your need and download them.

Google-Code-Prettify-Theme-Vibrant-Ink-From-JMBlog Google-Code-Prettify-Theme-Git-Hub-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Eighties-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Blue-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Bright-From-JMBlog Google-Code-Prettify-Theme-Hemisu-Dark-From-JMBlog Google-Code-Prettify-Theme-Hemisu-Light-From-JMBlog

After downloading and hosting the CSS file at your server. Replace the default style which we used at the starting of the post with your new style as shown in below code.

<link href='YOUR UPLOADED CSS URL' rel='stylesheet' type='text/css'/>

*Replace 'YOUR UPLOADED CSS URL' with your hosted URL.

Final Words :
Hope this article is simple and clear to understand, let me know if I'm unclear or missing any points. Getting Started section is there if you want to explore more. Do tell us which Syntax Highlighter you are familiar or presently using. If you implemented this successfully using this tutorial in your site/blog then thank us by dropping your comments.

How To Backup / Restore / Upload Blogger Template In New Interface

Add Comment

Backup+Restore+Blogger+Template+In+New+Interface

Image Courtesy : Stuart Miles/FreeDigitalPhotos.net

Whenever you want to play with your template to make any new changes then its mandatory and very important to backup your template.


Why should I Backup ?

What happens when you

  Ran in to an error while editing the blogger template.

  Uploaded a new template to test but forgot to backup (seriously! i faced this once).

  Thought to change the styles but on Ctrl+Z also unable to revert back.


Like this so many silly things we come across. So to avoid all those minute mistakes it is better to Backup before or after our new changes.


How To Backup Your Blogger Template :

Step (1) Go to Blogger Dashboard and Click On Template Button.

Blogger+Layout


Step (2) Click on 'Backup/Restore' button which will be on top right corner.

Backup+Restore+Settings


Step (3) Click on 'Download Full Template' button and Save the .xml file.

Backup-Restore-Template

Now you can alter your Blogger template and if you come across with any problems then just revert back to your old saved template which is handy.


How To Restore Your Blogger Template :

Repeat Step (1) and (2)


Step (4) Click on ‘Choose File’ button. Then browse for the backup file which is on our computer, select it and Click on ‘Upload’ button.


How To Upload New Blogger Template :

Repeat Step (1) and (2)


Step (4) Click on ‘Choose File’ button. Then browse for the New Blogger Template file which you downloaded, select it and Click on ‘Upload’ button.


Final Words :

Hope this simple tutorial is clear enough. Feel free to ask if you face any issues, do subscribe and visit us for more topics.

Host Your External Files In Dropbox For Free

Add Comment

Drop box is a free cloud storage service that lets you host your files also. If you hadn't registered yet, then visit Drop box to claim your 2 GB of space for free, moreover you can upgrade your space up to 16 GB without paying a single penny with your referrals, where they are offering 500 MB per referral to both sides. Means if you refer any person then you and the person you referred will get 500 MB of free space.You can host your external files like CSS, JavaScript ..etc.


Dropbox

Why Should I Host ?


If you open your Blogger template by clicking on Template and then on Edit HTML, you will find some external CSS or JavaScript files which are hosted on some other servers.


Blogger Template


What happens if

those private servers become down or offline.
user removed those files.
bandwidth exceeds… etc..

lot of questions will rise like this and moreover our control will not be there on those files. So to avoid all those hectic issues we need to place them at our own free server which is reputed and also got 99% uptime.


So, Is It Unlimited !


No, its not unlimited but you can get lot of it. Here is the catch, for Free accounts, the total amount of traffic that all of your links together can generate is 20 GB per day. For Pro and Business accounts, the limit is 200 GB per day. Visit here for more info. If your happy with this lets move ahead and learn how to host.


Hosting Your External Files :


1. Login to your Drop box and click on Public Folder.


Dropbox+Public+Folder

2. Right Click on empty space or just beside Public folder name you will find Upload button, Click on it.


Dropbox+Upload+Button | Dropbox+Upload+Button


3. Click on Choose files and select the file you want to upload.


Dropbox+Uploader

4. After upload is complete Click on Done and Right Click on the uploaded file.

Dropbox Upload Done


Dropbox Upload Finish


5. Click in Copy public link to grab your public link.


Dropbox+Copy+Public+Link

6. Copy the link and you can use it anywhere like below example

<link href='https://dl.dropboxusercontent.com/u/50682415/SheToldMeBloggerTheme.css' rel='stylesheet' type='text/css'/>
*My Uploaded CSS


<link href='YOUR DROPBOX COPIED LINK HERE' rel='stylesheet' type='text/css'/>
*Use this for your uploaded CSS


<script src='YOUR DROPBOX COPIED LINK HERE' type='text/javascript'/>
*Use this for for your uploaded JavaScript file


7.You can even shorten your links and use them as given below

Dropbox+Shorten+Link

<link href='https://db.tt/b71MpShJ' rel='stylesheet' type='text/css'/>


Final Words :


Hope, I'm clear with this small tutorial in hosting the files. Feel free to ask if you face any hiccups. See you with other tip. Adios!