Wednesday, December 03, 2008

Blogger + syntax highlighting

I was frustrated to see my last post how blogger was displaying my source-codes for xml, properties file and bash script. It was just un-readable.

At last thought I'll clean stuff up a little bit, and also by the way thought of covering up the changes that I made to my blog template for syntax highlighting. Just wanted to keep my changes somewhere, last time forgot to keep a back-up of my working template before editing and had to start all over.

I'll be using the syntax-highlighter to highlight my source-codes in my blog.
Things that are needed for this are:
  1. Download syntax-highlighter and upload it somewhere in the internet where you have access to. I chose google-pages to host my files.
    The main files that need to be uploaded are:
    • dp.SyntaxHighlighter/Scripts/clipboard.swf
    • dp.SyntaxHighlighter/Scripts/shBrushJava.js
    • dp.SyntaxHighlighter/Scripts/shCore.js
    • dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css
    I uploaded only the shBrushJava.js brush at start as I thought I would normally be posting only java source-codes. Later I uploaded most of the brushes (including shBrushXml, which was why my earlier post was screwed up).... in fact I'll be creating some new brushes myself today ;-)
  2. Add links in you blog template to link to the files uploaded in the above step. For this add the following code snippet at the head of your template, just after the <head> tag:

    <link href='http://highlighter.abhi.sanoujam.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
    <script language='javascript' src='http://highlighter.abhi.sanoujam.googlepages.com/shCore.js'/>
    <script language='javascript' src='http://highlighter.abhi.sanoujam.googlepages.com/shBrushJava.js'/>
    <script language='javascript' src='http://highlighter.abhi.sanoujam.googlepages.com/shBrushJScript.js'/>
    <script language='javascript' src='http://highlighter.abhi.sanoujam.googlepages.com/shBrushXml.js'/>
    <script language='javascript' src='http://highlighter.abhi.sanoujam.googlepages.com/shBrushProperties.js'/>
    <script language='javascript' src='http://highlighter.abhi.sanoujam.googlepages.com/shBrushBash.js'/>
    <style type='text/css'>
    .console {
    background-color: black;
    color: #ffffff;
    font-family: courier;
    }
    </style>


    Now, replace http://highlighter.abhi.sanoujam.googlepages.com with your own url where you have uploaded your files.
    Again notice that shBrushProperties.js and shBrushBash.js are actually not present in the syntax-highlighter that you downloaded. We'll create them in this post :)
    Also we'll talk later about the .console CSS later.
  3. Activate (call the js function) the highlighter. You can do this by adding the following code snippet at the end of your template just before the </body>tag:
Now you are all done to start posting source codes. You can either use the <pre> or <textarea> to enclose your source-codes, and give the name="code" attribute and class="java" for your java source. eg.

<pre name="code" class="java">
public class HelloBlogger {
public static void main(String [] args) {
System.out.println("Hello Blogger!!");
}
}
</pre>

will look like:
public class HelloBlogger {
public static void main(String [] args) {
System.out.println("Hello Blogger!!");
}
}
I personally prefer using the <pre> tag for java and <textarea> tag for posting xml/html codes which normally contains characters like <, >

Now here is shBrushProperties.js

I just created this brush so that my source for properties file can look nice.
Same for my bash scripts, which is shBrushBash.js:


You can see that there are only a handful of keywords for the Bash script brush right now. I intend to expand as my blogs keep rolling. For starters, its kinda ok.

Now coming to the console CSS style, this is just a small hack for displaying command lines to get a feeling of console/terminals
You can use this like;

<pre class="console">
$ javac HelloBlogger.java
$ java HelloBlogger
Hello Blogger!!
</pre>

Which will look something like:


$ javac HelloBlogger.java
$ java HelloBlogger
Hello Blogger!!

You don't need to specify the name attibute :)

And ohh, forgot to mention and found out again when clicking "Publish Post", if you are posting XML/HTML, anything which has < or >, replace them with &lt; and &gt; am thinking of putting up a post that will specifically do that.

Enjoy...

32 comments:

prodigal_blogger said...

Thanks, your blog on syntax highlighting was really helpful for me. I setup my blog to do the same in 15 minutes. Much appreciated!

Robje said...

Thanks for you post, it's helpfull and I love this way of showing source code.
However, I got a little problem with the styles.
As you look at http://blog.vanmeeuwen-online.nl/2008/11/update-all-fields-in-word-including.html so can see what I mean. The code lines are not present in the correct way.
Any idea how to deal with this?

Gilad Naor said...

Thanks for the post. I currently prefer to use vi and to not install anything.

Source Code Highlighting in Blogger

Debiprasad said...

What is your settings for 'Convert line breaks' set to? In my case, if I set it to 'Yes', it's inserting <br /> into codes defined under <pre> tag.

anshu said...

how to get this expand collapse option as its not showing in mine after folowing your steps.

Check my url of comment

findfunaax said...

Thanks~,you blog help me .
But I find when I add these js , blog open is slow.

abhi.sanoujam said...

@findfunaax Where are you hosting your highlighter files? When you are opening your blog, it will try to load the syntax-highlighter file from where you've hosted it, it shouldn't be really *slow* if you've got a decent internet connection and you've hosted it in some good place.

@anshu There was a kind of workaround/hack for the expand collapse thing. Basically it needed simple changes to shCore.js, take a look at http://highlighter.abhi.sanoujam.googlepages.com/shCore.js and see for things commented "Dan's hack..."
I think I followed http://blog.codesushi.com/2008/03/js-syntax-highlighter/, don't exactly remember. Maybe you can just link to the one I've hosted (http://highlighter.abhi.sanoujam.googlepages.com/shCore.js)

After you've made the changes to shCore and uploaded it, use something like <pre name="code" class="javascript:collapse"> when posting your code.

NICK said...

thanks so much. and i do know how to set to " collapse source".

Eko Kurniawan Khannedy said...

nice!!!

Jason A said...

I used it on my blog at blog.XeroOne.comThanks

nickb said...

To everyone who *loves* this add-on for Blogger... have you sent Alex Gorbachev a few bucks via PayPal yet?

By the way, 1.5.1 is OLD. The latest is 2.0.320. http://alexgorbatchev.com/wiki/SyntaxHighlighter

Pep said...

Thanks, my blog www.PepTop.com wanna add a code highlight box too.
I have tried many different solutions, your solution seems nice, but I wonder whether loading so many js files will slow down the speed.

Anonymous said...

It looks like Alex will host the code for you now :)
http://mlawire.blogspot.com/2009/07/blogger-exclude-your-visits-from-google.html

abhi.sanoujam said...

@Pep Loading all those js files will have some kind of slowdown, but i don't think tht would be noticeable enough with the type of connection ppl have these days.

@Anonymous I don't get what u mean, don't see the relevance of the link you provided either

Carter said...
This comment has been removed by the author.
Sandip Ransing said...

Very useful post !

Carter said...

easy way to install updated version on blogger this post seems to use the old version... ive made a post that describes how to use the updated one...

rosy said...

Thanks for the sharing this website. it is very useful professional knowledge. Great idea you know about company background.
web application development

Quique said...

Thanks Abhishek! Easy to use and works fine :-)

atarikg said...

It is the only one worked for me. Thanks.

Gary.Wzl said...

Look for a long time ,
very Useful for me,
thank you

Debsankha said...

Thanks a lot man, that was exactly what I was looking for! The "copy to clipboard" doesn't seem to work in linux though ( i tried both in Chrome and Firefox).

Andhika Budihardjo said...

Thanks man :D

xiaoleic said...

Thanks a lot. Actually I linked to your .js and .css files. If you do not like that, I appologize and I will remove the link to your google pages.

aparajayah said...

wow such is information

Shailendrasinh said...

Hi Abhi, how can we add zebra (i.e. alternating light and dark lines) for syntax highlighter as you have in this page. I have also added syntax highlighter to my blog, but it looks very simple here is the url

http://bnb-development.blogspot.com

It is not showing alternating lines in code.

YellowRose said...

Very useful post..thank you.

YellowRose said...

I also found a syntax highlighter for blogger that does not user Javascript. For those who may be interested.

齐文 said...

Wow, looks great, thank you, Abhi!

Alexandr Astashkin said...

Very useful post ! translate to russian

clara said...

thank you for posting this, quite a good help for me.

www.n8fan.net

website design said...

What’s up, every time i used to check blog posts here in the early hours in the break of day, for the reason that i enjoy to gain knowledge of more and more.
website design

Post a Comment