Syntax Highlighter For Blogger Using Google Prettify

In this tutorial we are going to see how to add syntax highter to blogger. I am using google code prettify to add syntax highlighter to blogger.

It's very very light in weight i.e almost only 16KB.
It's very very simple to add to your blogger.

Using this syntax highter you can add following languages to your blogger HMTL5, CSS3,  PHP, SQL, Java, XML, Javascript, jQuery, Angularjs, Knockoutjs, Python, Bash, SQL, Makefiles, Ruby, VB, Awk, Perl, Pascal, Dart, Matlab, Clojure and etc.

Syntax Highlighter Blogger Using Google Prettify

Adding Google Code Prettifier To Blogger:

Copy following line of Google Prettifier javascript library and add it to your blogger just before </head> tag.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>

Please refer this below image to add Google code highlighter to blogger.

Adding Google Prettifier to Blogger

Steps:
1. Click on Template in the left side.
2. Now click on Edit HMTL button, it will open html editor.
3. Now search for </head> tage and paste code just above the </head> tag.

Add HTML Code in Blogger Post:

If you are going to put html in your blogger post, please follow the this few steps.

Note: Before you are going to add html to blogger post you convert it as xml compatible one. that html to plain text usign this html to xml parser tool  .

If I am going  to add following line html code in blogger post.

    
    <footer class="footer">
     <div class="container">
         <p class="text-muted text-center">
            Copy right by <a href="http://www.smarttutorials.net/">
            SmartTutorials 2014</a>
           </p>
       </div>
    </footer>

Copy your html code and paste in the html to xml parser tool, Now it will automatically parse the html code in to xml compatible code.

 Now copy the converted code and paste it in your blogger post, between this <pre class='prettyprin'>...</pre> tag.

<pre class='prettyprint'>
  .....
</pre>

Now switch to html editor and paste your html between <pre class='prettyprint'>... </pre> tag. Once you are to added successfully your code will like this.

   <footer class="footer">
     <div class="container">
         <p class="text-muted text-center">
           Copy right by <a href="http://www.smarttutorials.net/"> 
           SmartTutorials 2014</a>
           </p>
       </div>
    </footer>

If you are going to add whatever the code to your blogger post, please convert it to xml compatible one before it added to blogger post using that html to xml parser tool.

Add CSS Code in Blogger Post:

<style>
   body{
       font-family: Droid Sans;
       background-color: #fff;
       color: #000;
       font-size: 14px;
       line-height: 20px;
  }
</style>

Add PHP Script in Blogger Post: 

<?php
/*
 * Site : http:www.smarttutorials.net
 * Author :muni
 * 
 */
define('BASE_PATH','http://localhost/copypaste/');
define('DB_HOST', 'localhost');
define('DB_NAME','copypaste');
define('DB_USER','root');
define('DB_PASSWORD','');

$con=mysqli_connect( DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

?>

Add Javascript or jQuery Script in Blogger Post:

    <script>
     $(document).on('change','.coverimage',function(){
    files = this.files;
    size = files[0].size;
    //max size 50kb => 50*1000
   if( size > 50*1000){
    alert('Please upload less than 50kb file');
    return false;
   }
   return true;
  });
    </script>

Add Java code in Blogger Post:

class Muni {
public:
  // Muni
  static const string NAME = "muni";
}

Add SQL query in Blogger Post:

SELECT * FROM sample;

Please refer it official documentation, if you want to add different themes of syntax highlighter.

1. Javascript code prettifier documentation.
2. Themes for code prettify documentation.