Add syntax highlighting

Syntax highlighting is done with the use of the library:

http://code.google.com/p/google-code-prettify/

Signed-off-by: Alexey Gladkov <gladkov.alexey@gmail.com>

css/prettify.css

@@ -0,0 +1,59 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #080 }  /* string content */
+  .kwd { color: #008 }  /* a keyword */
+  .com { color: #800 }  /* a comment */
+  .typ { color: #606 }  /* a type name */
+  .lit { color: #066 }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { padding: 2px; border: 1px solid #888; background-color:white; }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+    color: black;
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style: decimal outside;
+} /* IE indents via margin-left */
+/*
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+*/
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }

css/zerobin.css

@@ -4,7 +4,7 @@
 
 /*  CSS Reset from YUI 3.4.1 (build 4118) - Copyright 2011 Yahoo! Inc. All rights reserved.
 Licensed under the BSD License. - http://yuilibrary.com/license/    */
-html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
+html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
 
 html  {
 background-color:#455463;

js/zerobin.js

@@ -109,12 +109,15 @@ function displayMessages(key, comments) {
         var cleartext = zeroDecipher(key, comments[0].data);
     } catch(err) {
         $('div#cleartext').hide();
+        $('div#prettymessage').hide();
         $('button#clonebutton').hide();
         showError('Could not decrypt data (Wrong key ?)');
         return;
     }
     setElementText($('div#cleartext'), cleartext);
+    setElementText($('pre#prettyprint'), cleartext);
     urls2links($('div#cleartext')); // Convert URLs to clickable links.
+    prettyPrint();
 
     // Display paste expiration.
     if (comments[0].meta.expire_date) $('div#remainingtime').removeClass('foryoureyesonly').text('This document will expire in '+secondsToHuman(comments[0].meta.remaining_time)+'.').show();
@@ -257,8 +260,10 @@ function send_data() {
                 showStatus('');
                 $('div#pastelink').html('Your paste is <a href="' + url + '">' + url + '</a>').show();
                 setElementText($('div#cleartext'), $('textarea#message').val());
+                setElementText($('pre#prettyprint'), $('textarea#message').val());
                 urls2links($('div#cleartext'));
                 showStatus('');
+                prettyPrint();
             }
             else if (data.status==1) {
                 showError('Could not create paste: '+data.message);
@@ -287,6 +292,7 @@ function stateNewPaste() {
     $('div#cleartext').hide();
     $('div#message').focus();
     $('div#discussion').hide();
+    $('div#prettymessage').hide();
 }
 
 /**
@@ -310,7 +316,8 @@ function stateExistingPaste() {
     $('button#newbutton').show();
     $('div#pastelink').hide();
     $('textarea#message').hide();
-    $('div#cleartext').show();
+    $('div#cleartext').hide();
+    $('div#prettymessage').show();
 }
 
 /**

tpl/page.html

@@ -2,11 +2,13 @@
 <head>
 <title>ZeroBin</title>
 <link type="text/css" rel="stylesheet" href="css/zerobin.css?{$VERSION|rawurlencode}#" /> 
+<link type="text/css" rel="stylesheet" href="css/prettify.css?{$VERSION|rawurlencode}#" />
 <script src="js/jquery.js#"></script>
 <script src="js/sjcl.js#"></script>
 <script src="js/base64.js#"></script>
 <script src="js/rawdeflate.js#"></script>
 <script src="js/rawinflate.js#"></script>
+<script src="js/prettify.js#"></script>
 <script src="js/zerobin.js?{$VERSION|rawurlencode}#"></script>
 
 <!--[if lt IE 10]>
@@ -70,6 +72,9 @@
         </div>
     </div>
     <div id="pastelink" style="display:none;"></div>
+    <div id="prettymessage" style="display:none;">
+      <pre id="prettyprint" class="prettyprint linenums:1"></pre>
+    </div>
     <div id="cleartext" style="display:none;"></div>
     <textarea id="message" name="message" cols="80" rows="25" style="display:none;"></textarea>
     <div id="discussion" style="display:none;">