[科技新知] How to add "code" segment in Blogger

As a programmer, it is very common to share coding example with others. But by default, there is no suitable layout for coding. Now, you can add one.

1. Go to control panel of Blogger like below. And select "Template"

2. Select "Edit Template"

3. Search for keyword "<\head>", and add the following above it. Finally, Save it.

    
<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> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'>
    </script> 
    <script language='javascript'>      
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
      SyntaxHighlighter.all();
    </script>

4. When you try to add the coding into the Blogger, you could switch to HTML first. And add the code like below.

<pre class="brush:html"> 

    // add your code here
    // ....

</pre>

Be careful, you could change brush:html to brush:xxx where xxx could be one of following terms in lower-case. {Cpp, CSharp, CSS, Java, JScript, PHP, Python, Ruby, Sql, VB, Xml, Perl}