Monday, July 30, 2012

Source code syntax highlighting on blogger

My approach is quite different from other posts on the web, they are using some javascript engine to do the dynamic highlighting, I am making use of the hightlight program to do the actual highlighting staticly. As hightlight has different color theme, the color theme anotherdark matches my blog theme perferectly.

As hightlight is not as part of the default set of program in Slackware, I need to build it myself. Luckily, there is a build script in SlackBuilds.org.

Let's take my blog post Ada Unbounded String and Vector Container as examples.

First I have the program in ubt.adb, with the following command I will have ubt.htm

highlight -s anotherdark -i ubt.adb -o ubt.htm
You will also have a highlight.css file on the same output directory, wich difines the color theme:
/* Style definition file generated by highlight 3.9, http://www.andre-simon.de/ */

/* Highlighting theme: vim anotherdark */

body.hl { background-color:#333333; }
pre.hl { color:#dedede; background-color:#333333; font-size:10pt; font-family:'Courier New';}
.hl.num { color:#ffa0a0; }
.hl.esc { color:#ffddad; }
.hl.str { color:#ffa0a0; }
.hl.pps { color:#ffa0a0; }
.hl.slc { color:#ffa500; }
.hl.com { color:#ffa500; }
.hl.ppc { color:#5757ff; }
.hl.opt { color:#dedede; }
.hl.lin { color:#ffa500; }
.hl.kwa { color:#f0e68c; }
.hl.kwb { color:#bdb66b; }
.hl.kwc { color:#8b95f0; }
.hl.kwd { color:#f25252; }

First goto your blogger.com Template page, click on Customize to reach Blogger Template Designer, click on Advanced, then scroll the selection to Add CSS, then copy the content in hightlight.css start from pre.hl to the end, we don't need the body definition. Click on Apply to Blog to save it.

I also have the following CSS definition for the <pre> tag:

pre
{
background-color:#333333;
border: 1px dashed;
border-radius:5px;
padding: 2px;
white-space:pre-wrap;
}

The content of ubt.html is like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>ubt.adb</title>
<link rel="stylesheet" type="text/css" href="highlight.css">
</head>
<body class="hl">
<pre class="hl"><span class="hl slc">-- test unbounded string with vector</span>

<span class="hl kwa">with</span> Ada<span class="hl opt">.</span>Text_IO<span class="hl opt">;</span> <span class="hl kwa">use</span> Ada<span class="hl opt">.</span>Text_IO<span class="hl opt">;</span>
<span class="hl kwa">with</span> Ada<span class="hl opt">.</span>Strings<span class="hl opt">.</span>Unbounded<span class="hl opt">;</span> <span class="hl kwa">use</span> Ada<span class="hl opt">.</span>Strings<span class="hl opt">.</span>Unbounded<span class="hl opt">;</span>
<span class="hl kwa">with</span> Ada<span class="hl opt">.</span>Containers<span class="hl opt">.</span>Vectors<span class="hl opt">;</span>
<span class="hl kwa">With</span> Ada<span class="hl opt">.</span>Text_IO<span class="hl opt">.</span>Unbounded_IO<span class="hl opt">;</span>
<span class="hl kwa">with</span> Ada<span class="hl opt">.</span>Command_Line<span class="hl opt">;</span> <span class="hl kwa">use</span> Ada<span class="hl opt">.</span>Command_Line<span class="hl opt">;</span>

<span class="hl kwa">procedure</span> ubt <span class="hl kwa">is</span>
   <span class="hl kwa">package</span> My_Vector <span class="hl kwa">is new</span> Ada<span class="hl opt">.</span>Containers<span class="hl opt">.</span>Vectors <span class="hl opt">(</span><span class="hl kwb">Natural</span><span class="hl opt">,</span>
     Unbounded_String<span class="hl opt">);</span>
   <span class="hl kwa">use</span> My_Vector<span class="hl opt">;</span>
   <span class="hl kwa">package</span> SUIO <span class="hl kwa">renames</span> Ada<span class="hl opt">.</span>Text_IO<span class="hl opt">.</span>Unbounded_IO<span class="hl opt">;</span>

   <span class="hl slc">-- read input file and add each line into str_pool till file end</span>
   <span class="hl kwa">procedure</span> read_input <span class="hl opt">(</span>str_pool <span class="hl opt">:</span> <span class="hl kwa">in out</span> My_Vector<span class="hl opt">.</span>Vector<span class="hl opt">;</span>
                         File     <span class="hl opt">:</span> File_Type<span class="hl opt">)</span> <span class="hl kwa">is</span>
   <span class="hl kwa">begin</span>
      <span class="hl kwa">loop</span>
         str_pool<span class="hl opt">.</span>Append <span class="hl opt">(</span>SUIO<span class="hl opt">.</span>Get_Line <span class="hl opt">(</span>File<span class="hl opt">));</span>
      <span class="hl kwa">end loop</span><span class="hl opt">;</span>
   <span class="hl kwa">exception</span>
      <span class="hl kwa">when</span> End_Error <span class="hl opt">=&gt;</span>
         <span class="hl kwa">null</span><span class="hl opt">;</span>
   <span class="hl kwa">end</span> read_input<span class="hl opt">;</span>

   File <span class="hl opt">:</span> File_Type<span class="hl opt">;</span>
   str_pool <span class="hl opt">:</span> My_Vector<span class="hl opt">.</span>Vector<span class="hl opt">;</span>
<span class="hl kwa">begin</span>
   Put_Line <span class="hl opt">(</span><span class="hl str">&quot;Argument 1 is : &quot;</span> <span class="hl opt">&amp;</span> Argument <span class="hl opt">(</span><span class="hl num">1</span><span class="hl opt">));</span>
   Open <span class="hl opt">(</span>File<span class="hl opt">,</span> In_File<span class="hl opt">,</span> Argument <span class="hl opt">(</span><span class="hl num">1</span><span class="hl opt">));</span>
   read_input <span class="hl opt">(</span>str_pool<span class="hl opt">,</span> File<span class="hl opt">);</span>
   Close <span class="hl opt">(</span>File<span class="hl opt">);</span>

   Put_Line <span class="hl opt">(</span><span class="hl str">&quot;Total line: &quot;</span> <span class="hl opt">&amp;</span> str_pool<span class="hl opt">.</span>Length<span class="hl kwd">'Img</span><span class="hl opt">);</span>
   Put_Line <span class="hl opt">(</span><span class="hl str">&quot;File content:&quot;</span><span class="hl opt">);</span>
   <span class="hl kwa">for</span> i <span class="hl kwa">in</span>  <span class="hl num">0</span> <span class="hl opt">..</span> <span class="hl kwb">Integer</span><span class="hl opt">(</span>str_pool<span class="hl opt">.</span>Length<span class="hl opt">) -</span> <span class="hl num">1</span> <span class="hl kwa">loop</span>
      SUIO<span class="hl opt">.</span>Put_Line <span class="hl opt">(</span>str_pool<span class="hl opt">.</span>Element<span class="hl opt">(</span><span class="hl kwb">Integer</span><span class="hl opt">(</span>i<span class="hl opt">)));</span>
   <span class="hl kwa">end loop</span><span class="hl opt">;</span>

   str_pool<span class="hl opt">.</span>Clear<span class="hl opt">;</span>
<span class="hl kwa">end</span> ubt<span class="hl opt">;</span>

</pre>
</body>
</html>
<!--HTML generated by highlight 3.9, http://www.andre-simon.de/-->
Copy the data between <pre> and </pre> to your blog entry. You will have the souce highligted.

No comments: