Added syntax highlighting to code blocks

examples/basic.md

@@ -42,3 +42,16 @@ No need for multiple templates!
 * Matching Pairs «»‹› “”‘’「」〈〉《》〔〕
 * Greek αβγδ εζηθ ικλμ νξοπ ρςτυ φχψω
 * currency  ¤ $ ¢ € ₠ £ ¥
+
+--
+
+### A code example
+
+    // cool looking code
+    var func = function (arg1) {
+        return function (arg2) {
+            return "arg1: " + arg1 + "arg2: " + arg2;
+        };
+    };
+
+    console.log(func(1)(2)); // result is three

lib/cleaver.js

@@ -1,7 +1,8 @@
 var fs   = require('fs');
 var Q    = require('q');
 var path = require('path');
-var md   = require('node-markdown').Markdown;
+var marked = require('marked');
+var hljs   = require('highlight.js');
 var yaml = require('js-yaml');
 var mustache = require('mustache');
 var helper = require('./helper');
@@ -20,6 +21,7 @@ function Cleaver(file) {
 
   this.resources = {
     style: 'default.css',
+    githubStyle: 'github.css',
     navigation: 'navigation.js'
   };
 
@@ -29,6 +31,13 @@ function Cleaver(file) {
 
   this.metadata = null;
   this.slides = [];
+
+  marked.setOptions({
+    gfm: true,
+    highlight: function (code) {
+      return hljs.highlightAuto(code).value;
+    }
+  });
 }
 
 
@@ -58,7 +67,7 @@ Cleaver.prototype._renderSlides = function () {
   this.metadata = yaml.safeLoad(slices[0]) || {};
 
   for (var i = 1; i < slices.length; i++)
-    this.slides.push(md(slices[i]));
+    this.slides.push(marked(slices[i]));
 
   // insert an author slide (if necessary) at the end
   if (this.metadata.author)
@@ -143,6 +152,7 @@ Cleaver.prototype._renderSlideshow = function () {
     title: title,
     encoding: encoding,
     style: this.resources.loaded.style,
+    githubStyle: this.resources.loaded.githubStyle,
     externalStyle: this.external.loaded.style
   };
 

package.json

@@ -4,7 +4,7 @@
   "version": "0.4.0",
   "author": "Jordan Scales <[email protected]>",
   "description": "30-second slideshows for hackers",
-  "keywords":[
+  "keywords": [
     "markdown",
     "static",
     "slideshow",
@@ -18,12 +18,13 @@
     "type": "git",
     "url": "https://github.com/jdan/cleaver.git"
   },
-  "dependencies" : {
+  "dependencies": {
     "optimist": "0.3.5",
     "mustache": "0.7.0",
     "q": "0.9.6",
-    "node-markdown": "0.1.1",
-    "js-yaml": "2.1.0"
+    "js-yaml": "2.1.0",
+    "highlight.js": "~7.3.0",
+    "marked": "~0.2.9"
   },
   "license": "MIT"
 }

resources/github.css

@@ -0,0 +1,124 @@
+/*
+github.com style (c) Vasily Polovnyov <[email protected]>
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  color: #333;
+}
+
+pre .comment,
+pre .template_comment,
+pre .diff .header,
+pre .javadoc {
+  color: #998;
+  font-style: italic
+}
+
+pre .keyword,
+pre .css .rule .keyword,
+pre .winutils,
+pre .javascript .title,
+pre .nginx .title,
+pre .subst,
+pre .request,
+pre .status {
+  color: #333;
+  font-weight: bold
+}
+
+pre .number,
+pre .hexcolor,
+pre .ruby .constant {
+  color: #099;
+}
+
+pre .string,
+pre .tag .value,
+pre .phpdoc,
+pre .tex .formula {
+  color: #d14
+}
+
+pre .title,
+pre .id {
+  color: #900;
+  font-weight: bold
+}
+
+pre .javascript .title,
+pre .lisp .title,
+pre .clojure .title,
+pre .subst {
+  font-weight: normal
+}
+
+pre .class .title,
+pre .haskell .type,
+pre .vhdl .literal,
+pre .tex .command {
+  color: #458;
+  font-weight: bold
+}
+
+pre .tag,
+pre .tag .title,
+pre .rules .property,
+pre .django .tag .keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+pre .attribute,
+pre .variable,
+pre .lisp .body {
+  color: #008080
+}
+
+pre .regexp {
+  color: #009926
+}
+
+pre .class {
+  color: #458;
+  font-weight: bold
+}
+
+pre .symbol,
+pre .ruby .symbol .string,
+pre .lisp .keyword,
+pre .tex .special,
+pre .prompt {
+  color: #990073
+}
+
+pre .built_in,
+pre .lisp .title,
+pre .clojure .built_in {
+  color: #0086b3
+}
+
+pre .preprocessor,
+pre .pi,
+pre .doctype,
+pre .shebang,
+pre .cdata {
+  color: #999;
+  font-weight: bold
+}
+
+pre .deletion {
+  background: #fdd
+}
+
+pre .addition {
+  background: #dfd
+}
+
+pre .diff .change {
+  background: #0086b3
+}
+
+pre .chunk {
+  color: #aaa
+}

templates/layout.mustache

@@ -6,6 +6,7 @@
   <title>{{title}}</title>
   <style type="text/css">
     {{{style}}}
+    {{{githubStyle}}}
     {{{externalStyle}}}
   </style>
 </head>