Adding source code syntax highlighter to blogger

Unlike wordpress which has inbuilt syntax highlighter, adding the syntax highlighter to the blogger is not very easy. I had to spend about 2 hours to make it work. Here are the step by step instruction to add syntax highlighter to your blogger.

• In the blogger setting, edit the blogger template.

• In the HTML code search for the end of </head> section.

• Copy the below javascript and paste it before the </head> section.

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript" />

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
 
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

• Save the template file which enable the syntax highlighter in your blog. 
• Now to add code to your blog, create a post and in the blog editor switch to HTML view. Add the following code and update the blog. 

< pre class="brush:python;" >
 import os
    import numpy as np
    import tensorflow as tf
    
    x = tf.Variable(10)
    y = tf.Variable(x + 2)
< /pre >

• Once updated, you will see the following python code.

    import os
    import numpy as np
    import tensorflow as tf
    
    x = tf.Variable(10)
    y = tf.Variable(x + 2)

Most of the code is taken from here and other sources from google.