Monday, February 9, 2009

Install code syntax highlighter on blogspot (blogger)

Code syntax highlighter is utility which display code snippets on your web or blog in user friendly manner. If you want to display or show some code on your blog with this utility your blog will look more professional. In this article you will find simple step by step guide to implement code syntax highlighter on blogspot (blogger) blog.

You can see on picture how it is look.

Example of javascript code in syntax highlighter

To learn how to display HTML source code in blog post click on this link.
Before tutorial about including syntax highlighter in blogspot we can say that it is not so difficult to implement this functionality in your blogspot blog. Just read carefully, follow instructions and you can easily add nice formatted code in your blogger post.



Guide to put code syntax highlighter on your blogspot blog:

  • Click on layout tab and choose "Edit HTML"

  • Instruction to edit HTML

  • Copy this code


  • <link href='http://alexgorbatchev.com/pub/sh/1.5.1/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>
    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJScript.js'/>
    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPython.js'/>
    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushXml.js'/>
    <script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
    </script>



  • Paste this code between </body> and </html>

  • Where to put HTML code for syntax highlighter

  • Save HTML template


  • Now you can put code in your posts in syntax highlighter using this syntax:


  • <pre name="code" class="[LANGUAGE]">
    [PUT CODE HERE]
    </pre>


  • Replace [LANGUAGE] with some of this values:


    • cpp, c, c++

    • csharp

    • css

    • delphi, pascal

    • java

    • javascript

    • php

    • python

    • rb, ruby, rails, ror

    • sql

    • vb, vb.net

    • xml, html, xhtml, xslt



Example:

<pre name="code" class="html">
Hello world!
This is not real code,
just for test purposed
</pre>

Result:

Hello world!
This is not real code,
just for test purposed


This service is a Donationware. You can donate to author of SyntaxHighlighter by clicking here.

For writing code in blog look at How to display HTML code in blog or web.

Thanks to sources:

How to add syntax highlight to Blogger

Syntax Highlighter Installation Guide in Blogger Blog

Code Syntax Highlighter on Blogger

4 comments:

One 4 All said...

thank..i was use it:)

slayerz said...

thanks for the useful steps.
I had tried to use it last week but no lucks. hope this time, its working

ANASKI said...

nice

fad*** said...

thank's very helpful...