code syntax highlighting

pandora/templates/api.html

@@ -6,9 +6,11 @@
 
         <link rel="shortcut icon" type="image/png" href="/static/png/icon.16.png"/>
         <link rel="stylesheet" type="text/css" href="/static/oxjs/build/css/ox.ui.css"/>
+        <link rel="stylesheet" type="text/css" href="/static/css/highlight.css"/>
 
         <script type="text/javascript" src="/static/oxjs/build/js/jquery-1.4.2.js"></script>
         <script type="text/javascript" src="/static/js/jquery/jquery.videosupport.js"></script>
+        <script type="text/javascript" src="/static/js/highlight.pack.js"></script>
         <script type="text/javascript" src="/static/oxjs/build/js/ox.load.js"></script>
         <script type="text/javascript" src="/static/oxjs/build/js/ox.js"></script>
         <script type="text/javascript" src="/static/oxjs/build/js/ox.ui.js"></script>

static/css/highlight.css

@@ -0,0 +1,67 @@
+pre code {
+  display: block;
+  background: #F0F0F0;
+}
+
+pre code, 
+.xml .title {
+  color: black;
+}
+
+.string,
+.title, 
+.parent,
+.tag .attribute .value,
+.rules .value,
+.rules .value .number,
+.preprocessor,
+.instancevar,
+.aggregate,
+.template_tag,
+.django .variable,
+.addition,
+.flow,
+.stream {
+  color: #800;
+}
+
+.comment,
+.annotation,
+.template_comment,
+.diff .header,
+.chunk {
+  color: #888;
+}
+
+.number,
+.regexp,
+.literal,
+.change {
+  color: #080;
+}
+
+.decorator,
+.filter .argument,
+.localvars,
+.array,
+.attr_selector,
+.pi,
+.doctype,
+.deletion,
+.envvar,
+.shebang {
+  color: #88F;
+}
+
+.keyword,
+.id,
+.title,
+.aggregate {
+  font-weight: bold;
+}
+
+.html .css,
+.html .javascript,
+.html .vbscript {
+  opacity: 0.5;
+}

static/js/pandora.api.js

@@ -119,10 +119,12 @@ function constructList() {
            if(data.ids.length)
               $.each(data.ids, function(v, k) {
                 info.append($("<h2>").html(k));
-                info.append($('<pre>').html(app.actions[k].doc.replace('/\n/<br>\n/g')));
-                
-                var $code = $('<pre>').html(app.actions[k].code.replace('/\n/<br>\n/g'))
-                                      .hide();
+                var $doc =$('<pre>')
+                           .html(app.actions[k].doc.replace('/\n/<br>\n/g'))
+                           .appendTo(info);
+                var $code = $('<code class=" python">')
+                             .html(app.actions[k].code.replace('/\n/<br>\n/g'))
+                             .hide();
                 var $button = new Ox.Button({
                   title: [
                     {id: "one", title: "expand"},
@@ -133,8 +135,10 @@ function constructList() {
                 .addClass("margin")
                 .click(function() { $code.toggle()})
                 .appendTo(info)
-               $('<span>').html(' View Python Source').appendTo(info)
-               $code.appendTo(info) 
+                $('<span>').html(' View Python Source').appendTo(info)
+                $('<pre>').append($code).appendTo(info) 
+                hljs.highlightBlock($code[0], '    ');
+
                 hash += k + ','
               });
             else