もっと詳しく

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…