Syntax Highlighting in Terminal or a Web Page/Blog

There is an interesting Debian package called highlight. It allows you to syntax highlight multiple languages and output them in various formats such as xterm, ansi, html, latex, etc...

sudo aptitude update
sudo aptitude install highlight

The program highlight assumes the language based upon the file extension such as *.css, *.html, *.hs, *.java, *.c etc.. If you need to force a language extension use the -S flag.

Console
Now to practice using highlight on some source files.

highlight -A myfile.java | less -R

The flag will turn on ansi colors for the console. Remember to use -R on less or you will have all the escape sequences. This is great when you want to do a quick dump on a source file.


Web Pages
To create the code for this webpage I typed on the following three files qsort.c, qsort.java, qsort.hs.

highlight *.c *.java *.hs

I received the following three files qsort.c.html, qsort.java.html, qsort.hs.html and highlight.css. If you want inline css you can simple use --inline-css.

I got the following web content:

Java

public class pSimpleQuicksort{

    public static void qsort(Comparable[] c,int start,int end){
        if(end <= start) return;
        Comparable comp = c[start];
        int i = start,j = end + 1;
        for(;;){
            do i++; while(i<end && c[i].compareTo(comp)<0);
            do j--; while(j>start && c[j].compareTo(comp)>0);
            if(j <= i)   break;
            Comparable tmp = c[i];
            c[i] = c[j];
            c[j] = tmp;
        }
        c[start] = c[j];
        c[j] = comp;
        qsort(c,start,j-1);
        qsort(c,j+1,end);
    }

    public static void qsort(Comparable[] c){
        qsort(c,0,c.length-1);
    }

    public static void main(String[] args){
        int i;
        Integer[] arr = new Integer[20];
        System.out.println("inserting: ");
        for(i=0;i<arr.length;i++){
            arr[i] = new Integer((int)(Math.random()*99));
            System.out.print(arr[i]+" ");
        }
        pSimpleQuicksort.qsort(arr);
        System.out.println("\nsorted: ");
        for(i=0;i<arr.length;i++)
            System.out.print(arr[i]+" ");
        System.out.println("\nDone ;-)");
    }
}

C

void qsort(int a[], int lo, int hi) 
{
  int h, l, p, t;

  if (lo < hi) {
    l = lo;
    h = hi;
    p = a[hi];

    do {
      while ((l < h) && (a[l] <= p)) 
          l = l+1;
      while ((h > l) && (a[h] >= p))
          h = h-1;
      if (l < h) {
          t = a[l];
          a[l] = a[h];
          a[h] = t;
      }
    } while (l < h);

    a[hi] = a[l];
    a[l] = p;

    qsort( a, lo, l-1 );
    qsort( a, l+1, hi );
  }
}

Haskell

quicksort :: Ord a => [a] -> [a]
quicksort []     = []
quicksort (p:xs) = (quicksort lesser) ++ [p] ++ (quicksort greater)
    where
        lesser  = filter (< p) xs
        greater = filter (>= p) xs

Adding to Blogger
For my blog I added the following to my blogger HTML Template:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script> 
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js' type='text/javascript'></script> 
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/cupertino/jquery-ui.css' rel='stylesheet' type='text/css'/>

You can substitute the theme of cupertino to base or whatever ui-theme you wish. Thanks to Google I can use their jqueryui to host the java script pages.

I don't have web host location so I had to do internal css for the highlight.css file.

<style type='text/css'> 
   body.hl { background-color:#ffffff; }
   pre.hl { color:#000000; backgroud-color:#ffffff; font-size:10pt; font-family:'Courier New';}
   .hl.num { color:#2928ff; }
   .hl.esc { color:#ff00ff; }
   .hl.str { color:#ff0000; }
   .hl.dstr { color:#818100; }
   .hl.slc { color:#838183; font-style:italic; }
   .hl.com { color:#838183; font-style:italic; }
   .hl.dir { color:#008200; }
   .hl.sym { color:#000000; }
   .hl.line { color:#555555; }
   .hl.mark { background-color:#ffffbb;}
   .hl.kwa { color:#000000; font-weight:bold; }
   .hl.kwb { color:#830000; }
   .hl.kwc { color:#000000; font-weight:bold; }
   .hl.kwd { color:#010181; }
   </style> 
<script> 

I did inline javascript for the same reason as inline css. I don't have web host location. I selected only one ui-theme and added this to my header.
<script> 
        $(document).ready(
           function() {
$("#accordion").accordion({
                    collapsible: true,
                    autoHeight: false,
                   navigation: true
                });
           }
        );
</script> 

Finally to add the effect I added the raw HTML

<div id="accordion">
    <h3><a href="#">Java</a></h3>
    <div>//pasted html from qsort.java.html</div>
    <h3><a href="#">C</a></h3>
    <div>//pasted html from qsort.c.html</div>

    <h3><a href="#">Haskell</a></h3>

    <div>//pasted html from qsort.hs.html</div>

</div>

I hope to see lots of good looking coding blogs in the near future :)