Posts
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:
- 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
- dp.SyntaxHighlighter/Scripts/clipboard.swf
- 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. - 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:
<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:
You don't need to specify the name attibute :)
$ javac HelloBlogger.java
$ java HelloBlogger
Hello Blogger!!
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 < and > am thinking of putting up a post that will specifically do that.
Enjoy...
31 comments:
Thanks, your blog on syntax highlighting was really helpful for me. I setup my blog to do the same in 15 minutes. Much appreciated!
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?
Thanks for the post. I currently prefer to use vi and to not install anything.
Source Code Highlighting in Blogger
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.
how to get this expand collapse option as its not showing in mine after folowing your steps.
Check my url of comment
Thanks~,you blog help me .
But I find when I add these js , blog open is slow.
@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.
thanks so much. and i do know how to set to " collapse source".
nice!!!
I used it on my blog at blog.XeroOne.comThanks
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
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.
It looks like Alex will host the code for you now :)
http://mlawire.blogspot.com/2009/07/blogger-exclude-your-visits-from-google.html
@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
Very useful post !
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...
Thanks Abhishek! Easy to use and works fine :-)
It is the only one worked for me. Thanks.
Look for a long time ,
very Useful for me,
thank you
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).
Thanks man :D
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.
wow such is information
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.
Very useful post..thank you.
I also found a syntax highlighter for blogger that does not user Javascript. For those who may be interested.
Wow, looks great, thank you, Abhi!
Very useful post ! translate to russian
thank you for posting this, quite a good help for me.
www.n8fan.net
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