Syntax coloring

Added simple syntax coloring using highlight.js.
* Lightweight.
* Automatic detection of language.

Author: sebsauvage

css/zerobin.css

@@ -71,9 +71,8 @@ float:right;
 width:60%;
 }
 
-div#aboutbox a { color: #94a3b4; }
-
-textarea#message,div#cleartext,.replymessage {
+div#aboutbox a { color: #94a3b4; } 
+textarea#message,div#cleartext,.replymessage, code {
 clear:both;
 color:black;
 background-color:#fff;
@@ -90,6 +89,7 @@ box-sizing:border-box;
 width:100%;
 }
 
+
 div#status { 
 clear:both; 
 padding:5px 10px; 
@@ -164,7 +164,7 @@ position:relative;
 top:2px;
 }
 
-div#expiration, div#language, div#opendisc { 
+div#expiration, div#language, div#opendisc, div#syntaxcoloringoption { 
 background-color:#414D5A; 
 padding:6px 8px;
 margin:0px 5px 0px 0px;;

index.php

@@ -121,6 +121,7 @@ function deletePaste($pasteid)
          All optional data will go to meta information:
          expire (optional) = expiration delay (never,10min,1hour,1day,1month,1year,burn) (default:never)
          opendiscusssion (optional) = is the discussion allowed on this paste ? (0/1) (default:0)
+         syntaxcoloring (optional) = should this paste use syntax coloring when displaying.
          nickname (optional) = son encoded SJCL encrypted text nickname of author of comment (containing keys: iv,salt,ct)
          parentid (optional) = in discussion, which comment this comment replies to.
          pasteid (optional) = in discussion, which paste this comment belongs to.
@@ -172,6 +173,14 @@ function deletePaste($pasteid)
         if ($opendiscussion!='0') { $meta['opendiscussion']=true; }
     }
 
+    // Show we use syntax coloring when displaying ?
+    if (!empty($_POST['syntaxcoloring']))
+    {
+        $syntaxcoloring = $_POST['syntaxcoloring'];
+        if ($syntaxcoloring!='0' && $syntaxcoloring!='1') { $error=true; }
+        if ($syntaxcoloring!='0') { $meta['syntaxcoloring']=true; }
+    }    
+
     // You can't have an open discussion on a "Burn after reading" paste:
     if (isset($meta['burnafterreading'])) unset($meta['opendiscussion']);
 
@@ -223,6 +232,7 @@ function deletePaste($pasteid)
 
         unset($storage['expire_date']); // Comment do not expire (it's the paste that expires)
         unset($storage['opendiscussion']);
+        unset($storage['syntaxcoloring']);
 
         // Make sure paste exists.
         $storagedir = dataid2path($pasteid);

js/highlight.pack.js

@@ -0,0 +1,114 @@
+/*
+Monokai style - ported by Luigi Maselli - http://grigio.org
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background: #272822;
+}
+
+pre .tag,
+pre .tag .title,
+pre .keyword,
+pre .literal,
+pre .change,
+pre .winutils,
+pre .flow,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .nginx .title,
+pre .tex .special {
+  color: #F92672;
+}
+
+pre code {
+  color: #DDD;
+}
+
+pre code .constant {
+	color: #66D9EF;
+}
+
+pre .class .title {
+	color: white;
+}
+
+pre .attribute,
+pre .symbol,
+pre .symbol .string,
+pre .value,
+pre .regexp {
+	color: #BF79DB;
+}
+
+pre .tag .value,
+pre .string,
+pre .subst,
+pre .title,
+pre .haskell .type,
+pre .preprocessor,
+pre .ruby .class .parent,
+pre .built_in,
+pre .sql .aggregate,
+pre .django .template_tag,
+pre .django .variable,
+pre .smalltalk .class,
+pre .javadoc,
+pre .django .filter .argument,
+pre .smalltalk .localvars,
+pre .smalltalk .array,
+pre .attr_selector,
+pre .pseudo,
+pre .addition,
+pre .stream,
+pre .envvar,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .tex .command,
+pre .prompt {
+  color: #A6E22E;
+}
+
+pre .comment,
+pre .java .annotation,
+pre .python .decorator,
+pre .template_comment,
+pre .pi,
+pre .doctype,
+pre .deletion,
+pre .shebang,
+pre .apache .sqbracket,
+pre .tex .formula {
+  color: #75715E;
+}
+
+pre .keyword,
+pre .literal,
+pre .css .id,
+pre .phpdoc,
+pre .title,
+pre .haskell .type,
+pre .vbscript .built_in,
+pre .sql .aggregate,
+pre .rsl .built_in,
+pre .smalltalk .class,
+pre .diff .header,
+pre .chunk,
+pre .winutils,
+pre .bash .variable,
+pre .apache .tag,
+pre .tex .special,
+pre .request,
+pre .status {
+  font-weight: bold;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}

js/highlight.styles/monokai.css

@@ -166,6 +166,20 @@ function setElementText(element, text) {
     }
 }
 
+/** Apply syntax coloring to clear text area.
+  */
+function applySyntaxColoring()
+{
+    if ($('div#cleartext').html().substring(0,11) != '<pre><code>')
+    {
+        // highlight.js expects code to be surrounded by <pre><code>
+        $('div#cleartext').html('<pre><code>'+ $('div#cleartext').html()+'</code></pre>');
+    }
+    hljs.highlightBlock(document.getElementById('cleartext'));
+    $('div#cleartext').css('padding','0'); // Remove white padding around code box.
+}
+
+
 /**
  * Show decrypted text in the display area, including discussion (if open)
  *
@@ -184,6 +198,10 @@ function displayMessages(key, comments) {
     setElementText($('div#cleartext'), cleartext);
     urls2links($('div#cleartext')); // Convert URLs to clickable links.
 
+    // comments[0] is the paste itself.
+
+    if (comments[0].meta.syntaxcoloring) applySyntaxColoring();
+
     // 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();
     if (comments[0].meta.burnafterreading) {
@@ -312,7 +330,8 @@ function send_data() {
     var cipherdata = zeroCipher(randomkey, $('textarea#message').val());
     var data_to_send = { data:           cipherdata,
                          expire:         $('select#pasteExpiration').val(),
-                         opendiscussion: $('input#opendiscussion').is(':checked') ? 1 : 0
+                         opendiscussion: $('input#opendiscussion').is(':checked') ? 1 : 0,
+                         syntaxcoloring: $('input#syntaxcoloring').is(':checked') ? 1 : 0
                        };
     $.post(scriptLocation(), data_to_send, 'json')
         .error(function() {
@@ -332,6 +351,10 @@ function send_data() {
 
                 setElementText($('div#cleartext'), $('textarea#message').val());
                 urls2links($('div#cleartext'));
+
+                // FIXME: Add option to remove syntax highlighting ?
+                if ($('input#syntaxcoloring').is(':checked')) applySyntaxColoring();
+
                 showStatus('');
             }
             else if (data.status==1) {
@@ -376,6 +399,7 @@ function stateNewPaste() {
     $('div#language').hide(); // $('#language').show();
     $('input#password').hide(); //$('#password').show();
     $('div#opendisc').show();
+    $('div#syntaxcoloringoption').show();
     $('button#newbutton').show();
     $('div#pasteresult').hide();
     $('textarea#message').text('');
@@ -403,6 +427,7 @@ function stateExistingPaste() {
     $('div#language').hide();
     $('input#password').hide();
     $('div#opendisc').hide();
+    $('div#syntaxcoloringoption').hide();    
     $('button#newbutton').show();
     $('div#pasteresult').hide();
     $('textarea#message').hide();

js/zerobin.js

@@ -8,6 +8,8 @@
 <script src="js/rawdeflate.js#"></script>
 <script src="js/rawinflate.js#"></script>
 <script src="js/zerobin.js?{$VERSION|rawurlencode}#"></script>
+<link type="text/css" rel="stylesheet" href="js/highlight.styles/monokai.css#">
+<script src="js/highlight.pack.js#"></script>
 
 <!--[if lt IE 10]>
 <style> body {padding-left:60px;padding-right:60px;} div#ienotice {display:block;} </style>
@@ -68,6 +70,10 @@ <h3>{$VERSION}</h3>
            <input type="checkbox" id="opendiscussion" name="opendiscussion" />
            <label for="opendiscussion">Open discussion</label>
         </div>
+        <div id="syntaxcoloringoption" class="button" style="display:none;">
+           <input type="checkbox" id="syntaxcoloring" name="syntaxcoloring" />
+           <label for="syntaxcoloring">Syntax coloring</label>
+        </div>
     </div>
     <div id="pasteresult" style="display:none;">
       <div id="deletelink"></div>