jquery link

my custom css

slimbox 2

analytics

Tuesday, September 7, 2010

Installing SyntaxHighlighter to blogger...

First of all, I would like to say thank you very much to Alex Gorbatchev for creating such a great tool/script. All this while I thought that it's only available as a wordpress plugin. I guess I'm wrong after all!!!

Here's the simple step by step on how to add it to blogger.

1) Create a new post and paste the code below (it'll be easier for us to verify the changes at template preview later).
    <pre class="brush: csharp;">
        private void Filter(Students mylist)
        {
            List<Student> filter = mylist.FindAll( item => item.Gender == "Male" );

            foreach (Student obj in filter)
            {
                Console.WriteLine(obj);
            }
        }
    </pre>
2) In blogger, go to Design tab and click Edit HTML link.

3) Copy the code below.
    <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/shAutoloader.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    function path()
    {
        var args = arguments,
        result = []
        ;

        for(var i = 0; i < args.length; i++)
            result.push(args[i].replace("@", "http://alexgorbatchev.com/pub/sh/current/scripts/"));

        return result
    };

    SyntaxHighlighter.autoloader.apply(null, path(
        'applescript            @shBrushAppleScript.js',
        'actionscript3 as3      @shBrushAS3.js',
        'bash shell             @shBrushBash.js',
        'coldfusion cf          @shBrushColdFusion.js',
        'cpp c                  @shBrushCpp.js',
        'c# c-sharp csharp      @shBrushCSharp.js',
        'css                    @shBrushCss.js',
        'delphi pascal          @shBrushDelphi.js',
        'diff patch pas         @shBrushDiff.js',
        'erl erlang             @shBrushErlang.js',
        'groovy                 @shBrushGroovy.js',
        'java                   @shBrushJava.js',
        'jfx javafx             @shBrushJavaFX.js',
        'js jscript javascript  @shBrushJScript.js',
        'perl pl                @shBrushPerl.js',
        'php                    @shBrushPhp.js',
        'text plain             @shBrushPlain.js',
        'py python              @shBrushPython.js',
        'ruby rails ror rb      @shBrushRuby.js',
        'sass scss              @shBrushSass.js',
        'scala                  @shBrushScala.js',
        'sql                    @shBrushSql.js',
        'vb vbnet               @shBrushVb.js',
        'xml xhtml xslt html    @shBrushXml.js'
    ));

    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    //]]>
    </script>
4) At Edit Template textbox, search for </body> tag, then paste the code before the tag.
    ...
    
    <!-- paste the code here -->

    </body>
5) Click Preview button. If everything goes right, the source code that you've posted earlier in step 1 will get syntax highlighted as shown below.
    private void Filter(Students mylist)
    {
        List<Student> filter = mylist.FindAll( item => item.Gender == "Male" );

        foreach (Student obj in filter)
        {
            Console.WriteLine(obj);
        }
    }
Note:
Tested with official blogger templates from Template Designer and unofficial templates from BloggerThemes.

Update (10/03/2011)
Fixed the script. Use CDATA (silly me, totally forgot about it) instead of html ASCII codes.

3 comments:

  1. Wow good post!!! I used for my blog and works very well Thanks for share!!!

    ReplyDelete
  2. Wow, great website! I absolutely appreciated the articles material! Please keep it up writing about these postings, I’m able to more likely be subscribing subsequent!
    website design

    ReplyDelete