Add syntax highlighting to code examples

docs/edge/Mustaches.md.hbs

@@ -74,7 +74,7 @@ With the following data:
 
 Will generate the following output:
 
-```
+```html
  * Chris
  *
  * <b>GitHub</b>

grunt/config/assemble.js

@@ -1,10 +1,20 @@
 var path = require( 'path' );
+var Prism = require( 'prismjs' );
+var marked = require( 'handlebars-helpers/node_modules/marked' );
 
 module.exports = function ( grunt ) {
 	var config, reverseMapping;
 
 	config = {
 		options: {
+			marked: {
+				langPrefix: "language-",
+				highlight: function ( code, lang ) {
+					var prismLang = lookupPrismLang( lang );
+					var highlightedCode = Prism.highlight( code, prismLang.lang );
+					return highlightedCode;
+				}
+			},		
 			assets: '/root/assets',
 			helpers: ['helpers/*.js'],
 			postprocess: function ( content ) {
@@ -55,3 +65,63 @@ function slugify ( filename ) {
 		.replace( /^-/, '' )
 		.replace( /-$/, '' );
 }
+
+marked.Renderer.prototype.code = function (code, lang, escaped) {
+
+	var prismLang = lookupPrismLang(lang);
+
+  if (this.options.highlight) {
+    var out = this.options.highlight(code, lang);
+    if (out != null && out !== code) {
+      code = out;
+    }
+  }
+
+  var langClass = this.options.langPrefix + prismLang.name;
+
+  return '<pre class="'
+	+ langClass
+    +'"><code class="'
+    + langClass
+    + '">'
+    + code
+    + '\n</code></pre>\n';
+};
+
+function lookupPrismLang ( lang ) {
+
+	// default to javascript?
+	var prismLang = {
+		name: 'js',
+		lang: ''
+	};
+
+	if ( lang === 'html' ) {
+		prismLang.lang = Prism.languages.markup;
+		prismLang.name = 'markup';
+
+	} else if ( lang == 'xml' ) {
+		prismLang.lang = Prism.languages.markup;
+		prismLang.name = 'markup';
+
+	} else if ( lang == 'js' || lang == 'javascript' ) {
+		prismLang.lang = Prism.languages.javascript;
+		prismLang.name = 'js';
+
+	} else if ( lang == 'css' ) {
+		prismLang.lang = Prism.languages.css;
+		prismLang.name = 'css';
+
+	} else if ( lang == 'sh' ) {
+		prismLang.lang = Prism.languages.js;
+		prismLang.name = 'bash';
+
+	} else if ( lang == 'svg' ) {
+		prismLang.lang = Prism.languages.svg;
+		prismLang.name = 'svg';
+
+	} else {
+
+	}
+	return prismLang;
+}

package.json

@@ -12,7 +12,7 @@
     "grunt-newer": "~0.6.1",
     "grunt-sass": "^1.0.0",
     "jit-grunt": "~0.3.2",
-    "marked": "~0.3.0",
+    "prismjs": "^1.3.0",
     "surge": "^0.17.2"
   },
   "scripts": {

scss/_highlight.css

@@ -0,0 +1,223 @@
+/**
+ * prism.js Monokai theme for CSS & Sass/Scss
+ *
+ * @todo test for JavaScript & HTML
+ *
+ * @author @MoOx
+ */
+/* line 35, syntax-highlighting.scss */
+code[class*="language-"],
+pre[class*="language-"] {
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 18px;
+  color: #76d9e6;
+  text-shadow: none;
+}
+
+/* line 61, syntax-highlighting.scss */
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+  background: #2a2a2a;
+}
+
+/* line 66, syntax-highlighting.scss */
+pre[class*="language-"] {
+  padding: 15px;
+  border-radius: 4px;
+  border: 1px solid #e1e1e8;
+}
+
+/* line 85, syntax-highlighting.scss */
+:not(pre) > code[class*="language-"] {
+  padding: .15em .2em .05em;
+  border-radius: .3em;
+  border: 0.13em solid #7a6652;
+  box-shadow: 1px 1px .3em -.1em black inset;
+}
+
+/* line 92, syntax-highlighting.scss */
+.namespace {
+  opacity: .7;
+}
+
+/* line 100, syntax-highlighting.scss */
+.token.comment, .token.prolog, .token.doctype, .token.cdata {
+  color: #6f705e;
+}
+/* line 107, syntax-highlighting.scss */
+.token.null, .token.operator, .token.boolean, .token.number {
+  color: #a77afe;
+}
+/* line 112, syntax-highlighting.scss */
+.token.attr-name, .token.string {
+  color: #e6d06c;
+}
+/* line 119, syntax-highlighting.scss */
+.token.entity, .token.url, .language-css .token.string, .style .token.string {
+  color: #e6d06c;
+}
+/* line 123, syntax-highlighting.scss */
+.token.selector {
+  color: #a6e22d;
+}
+/* line 133, syntax-highlighting.scss */
+.token.atrule, .token.attr-value, .token.keyword, .token.control, .token.directive, .token.important, .token.unit {
+  color: #ef3b7d;
+}
+/* line 138, syntax-highlighting.scss */
+.token.regex, .token.statement {
+  color: #76d9e6;
+}
+/* line 143, syntax-highlighting.scss */
+.token.placeholder, .token.variable {
+  color: white;
+}
+/* line 148, syntax-highlighting.scss */
+.token.important, .token.statement {
+  font-weight: bold;
+}
+/* line 152, syntax-highlighting.scss */
+.token.punctuation {
+  color: #bebec5;
+}
+/* line 156, syntax-highlighting.scss */
+.token.entity {
+  cursor: help;
+}
+/* line 161, syntax-highlighting.scss */
+.token.debug {
+  color: red;
+}
+
+/* line 164, syntax-highlighting.scss */
+pre[data-line] {
+  position: relative;
+  padding: 1em 0 1em 3em;
+}
+
+/* line 169, syntax-highlighting.scss */
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}
+
+/* line 185, syntax-highlighting.scss */
+.line-highlight:before,
+.line-highlight[data-end]:after {
+  content: attr(data-start);
+  position: absolute;
+  top: .4em;
+  left: .6em;
+  min-width: 1em;
+  padding: 0.2em .5em;
+  background-color: rgba(255, 255, 255, 0.4);
+  color: black;
+  font: bold 65%/1 sans-serif;
+  height: 1em;
+  line-height: 1em;
+  text-align: center;
+  border-radius: 999px;
+  text-shadow: none;
+  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
+}
+
+/* line 207, syntax-highlighting.scss */
+.line-highlight[data-end]:after {
+  content: attr(data-end);
+  top: auto;
+  bottom: .4em;
+}
+
+/******************************************************************
+CODE - SWITCH COLORS A BIT DEPENDING ON LANGUAGE
+******************************************************************/
+/* line 216, syntax-highlighting.scss */
+code.language-markup {
+  color: #f9f9f9;
+}
+/* line 220, syntax-highlighting.scss */
+code.language-markup .token.tag {
+  color: #ef3b7d;
+}
+/* line 221, syntax-highlighting.scss */
+code.language-markup .token.attr-name {
+  color: #a6e22d;
+}
+/* line 222, syntax-highlighting.scss */
+code.language-markup .token.attr-value {
+  color: #e6d06c;
+}
+/* line 225, syntax-highlighting.scss */
+code.language-markup .token.style, code.language-markup .token.script {
+  color: #76d9e6;
+}
+/* line 230, syntax-highlighting.scss */
+code.language-markup .token.script .token.keyword {
+  color: #76d9e6;
+}
+
+/******************************************************************
+CODE  - PRISM THEME OVERRIDES
+******************************************************************/
+/* line 241, syntax-highlighting.scss */
+code[class*="language-"],
+pre[class*="language-"] {
+  white-space: pre !important;
+  word-wrap: normal !important;
+  overflow: auto;
+  max-height: 610px;
+}
+
+/* line 251, syntax-highlighting.scss */
+pre {
+  position: relative;
+}
+/* line 254, syntax-highlighting.scss */
+pre:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: .5em 0;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000));
+  background: -webkit-linear-gradient(#333333, #000000);
+  background: -moz-linear-gradient(#333333, #000000);
+  background: -o-linear-gradient(#333333, #000000);
+  background: linear-gradient(#333333, #000000);
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  -ms-border-radius: 4px 4px 0 0;
+  -o-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  font: bold 15px/1 sans-serif;
+  color: white;
+  text-indent: 1em;
+}
+/* line 269, syntax-highlighting.scss */
+pre code {
+  overflow: auto;
+  white-space: pre;
+  display: block;
+}

scss/main.scss

@@ -5,3 +5,4 @@
 @import "options";
 @import "header";
 @import "code";
+@import "highlight";