» » » » Syntax Highlighter for Blogger Platform
Syntax Highlighter for Blogger - Syntax Highlighter is a tool to assist developers or programmers to display the online snippet of programming code to improve readability and better looking. And the following is a complete description of Syntax Highlighting from Wikipedia
Syntax highlighting is a feature of some text editors that display text (especially source code) in different colors and fonts according to the category of terms. This feature eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself, it's made only for human readers/editors.

Syntax Highlighter for Blogger

Syntax Highlighter for Blogger
By default, blogger templates does not include features for Syntax Highlighting. But if you need this Syntax Highlighting feature, you can integrate the following script into your blogger template.

Before you follow these steps, it is recommended you backup your blogger template first. This is to ensure that your blog is fine if an error occurs when you are editing template.

Adding Syntax Highlighter for Blogger

  1. Log in to your blog dashboard using your Google account
  2. Click on "Template" menu on the left side, then click "Edit HTML" button
  3. A pop-up window will appear, just click "Proceed" button to start edit your template
  4. Now we need to copy all CSS code needed. Go to http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, copy all the CSS code, and paste it just before the ]]--></b:skin> tag in your template
  5. Find the </head> tag and copy all of the following code just before the </head> tag.
  6. <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
    
  7. Now find </body> tag and copy all of the following code just before the </body> tag
  8. <script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
    
  9. That's it. Now click "Save Template" button to save your work.

Syntax Highlighter for Blogger Usage

To start using Syntax Highlighter, you have to copy all the code snippet you wish to display into the following format. Follow these steps:
  • Create your new post on HTML mode
  • Use this brush format to show the code snippets (using HTML-entities characters) you wish to show
  • <pre name="code" class="cpp">
    Your code snippet goes here
    </pre>
    
  • Click "Preview" button to see the results
You can change the class="CPP" with other programming languages ​​as needed. You can use the cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, or even xslt, adjust to your needs. See the full list here.

Got something to say?