How to add code snippets using Google Code Prettify

Hey, In this tutorial you guys are gonna learn how you can add code snippets to your blog or website to highlight your code to your visitors.

If you owns a website or running out of time then you can quickly visit the github repo and get your code snippet from there. A short description is also available there to help you get started.

Here, we are gonna use Google Code Prettify to highlight our code which is 100% free and super easy to implement. Just follow the below steps to make your code shine on your page.

Step 1 : Add Google Code Prettify to your page
Add following script right above the closing </body> tag of your page

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

For Blogger:

Open your blogger dashboard and go to Theme>Edit HTML like below

Go to the bottom of the code and find </body> tag to add the above script

Step 2 : Usage
Put your code snippets in between <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> tags and it will automatically be pretty-printed.

For Blogger:

You guys will have to add your code snippet to the Compose section while writing your post so that it automatically converts your code snippet to the supported format and then you'll have to go to HTML section to the right of Compose and you'll have to find your code there by using Ctrl + F and after that you'll have to put your code in between <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> . I know this sounds like Mars language but when you'll get into it, its gonna be like your home language.  After you use this once or twice you're gonna be a master in it.
But if you still found it difficult then there is a shortcut. You can use Parse HTML by blogcrowds. I don't personally know them but this tool will help you out. You can first paste your code snippet there and then click on parse. You'll notice some change in your code. That's it copy the code and paste it between the above mentioned tags under the HTML section of your post editor.

Custom theme for Google Code Prettify

You can use my theme from here or you can get your theme from Google Code Prettify official theme gallery and all you need to do is add the .css file  to your website in order to make the theme work.

For Blogger:

You guys can go to Customise theme option under Theme and then go to Advance>Add CSS and add the css code there to customize your Google Code Prettify theme.

I hope this will help you to get your own code snippet on your website. If you face any problems please feel free to commend down below.