Thursday, May 18, 2006

Colored code samples - now with sample code!

Not only I 'believe' in the power of modern so-called RAD IDEs, especially in intellisense, support of commenting and use of those comments as internal help in the place of code editing (and more intellisense ;)), code navigation through definitions, but I also believe that colored code is easier to read, and easier to understand it faster.

So when I've started this programming blog, I've liked to give code samples not only formatted right, but colored. But I think it would have been a bit lame to parse from clear code text, because that's how code usually is, and write out html (even with fancy spans and divs and css) (and ruling out the method when I type all the color codes also), I don't want to do this process with every update involving code. And since I have no control how these hosted pages are parsed out, I couldn't automatize such a process.

So I've decided to write a little javascript hack, which will colorize parts on a web page marked as code area.
The javascript colorization itself won't be perfect, because for now I've made the colorizer code to work with C (and D, more on later), and maybe C# keywords...

The entry point is placed onto the page onload event: 
<body onload="format()">
The format function, which will just read up all sections from the page marked with div and id="code" (and, also with name="code"... more about that later). 
function format()
{
   var c = document.getElementsByName('code');
   if(c != undefined)
   {
      if (c.length == undefined)
      {
         formatcode(c);
      }
      else
      {
         for(i=0; i<c.length; i++)
         {
            formatcode(c[i]);
         }
      }
   }
}
I mark the 'color codes' with font settings in variables. Instead of 'font' html tag, I guess some more css-able thing would be better, and also, instead of variable declaration maybe there is some more elegant solution. However, this isn't the point, and this time a working solution is before an elegant one. 
// keyword
kwS = "<font color='#3333FF'>";
kwE = "</font>";
// comment block
commS = "<font color='#339900'>";
commE = "</font>";
// string literal
strS = "<font color='#FF0000'>";
strE = "</font>";
And now onto the relevant part. It will take the argument as text, and doing replaces, and since javascript .replace method is capable of handling regexps, we will use it. I had to include some tricks to counter this blogger site's weird features. 

function formatcode(c)
{
   ct = c.innerHTML;
   //we're just doing a mass search and replace

   // replacing blogger included br-s
   ct = ct.replace(/<br>/g, "\n");
   ct = ct.replace(/<BR>/g, "\n"); 
   
   // keywords
   ct = ct.replace(/((\s|\()(break|case|char|class|
       default|else|for|foreach|if|int|import|
       public|private|return|struct|switch|typeof|
       void(\s|;|:|\[|\())/g, kwS + '$1' + kwE );
   ct = ct.replace(/(>)(break|case|char|class|
       default|else|for|foreach|if|int|import|
       public|private|return|struct|switch|typeof|
       void)(\s|;|:|\[|\(<)/g, '$1' + kwS + '$2$3'
       + kwE );
   // string literals " "
   ct = ct.replace(/(\"[^\"$]*\")/g, strS +
       '$1' + strE );

   // /* */ block comment
   ct = ct.replace(/\/\* /g, commS + "/* ");
   ct = ct.replace(/ \*\//g, " */" + commE);
   ct = ct.replace(/\n\*\//g, "\n*/" + commE);
   // // style comment
   ct = ct.replace(/\/\/ /g, commS + "// ");
   ct = ct.replace(/(\/\/ .*)($)/gm, '$1' + commE);

   c.innerHTML = ct;
}
What do we get now? At first, I had nice colors in IE and something else in FF, then I tweaked and tweaked. Also, as you can see, the "block comment" section in the above code is colored wrong, block comment inside a string literal messes up the replacement. In my next post, I will write about why IE and FF differences bugging me, and well, bugging also this colorizer, and what problems arose with colorizing with regexp replace.

posted by ElfQT @ 1:39 PM   0 comments

0 Comments:

Post a Comment

<< Home