Embed Code with Blogger Tutorial

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.
You can find more detail about SyntaxHighlighter at http://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighter provides a broad syntax library for users to highlight their code.

Here is a screen shot on how many language does current version support:

The idea is pretty straightforward, you just need to link the .js file in your blog, and then simply tell the blog about which part you want to show as Code. Want to know how to do it? I will walk you through on how to create a blog template, create embedded code page and apply for different theme.

Now, let's start:

First, We need to select the Edit HTML.

Under Edit HTML,  find the tag </head>, you need to put SyntaxHighlighter brush library here.

Copy and pasta following code:

After Saving the the template, you have done the first step!


Then, you can create your new post as usual.  


Next, switch your view from compose to HTML view

Put the code you want, for simplicity, I will do the following code:

/**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

It will show like

/**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

Now you have done pretty much of all of them!

Finally, you may not like the theme of your code. You can find all the theme here.
All you need to do is go back to the first step, edit HTML, Find one line of code like:

Change to the theme you would like to use, for example:

Now you can create the embedded code HTML yourself, enjoy!

I hope this blog will be helpful!