From 4e2dbe022ec3999766085d3dfab2f5ded87e5fe1 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Mon, 30 Mar 2015 23:11:59 -0400
Subject: [PATCH] Add highlight stream, hljs, style

---
 bin/documentation.js         |   3 +-
 package.json                 |   1 +
 share/html/assets/bass.css   |   2 +
 share/html/assets/github.css | 124 +++++++++++++++++++++++++++++++++++
 share/html/index.hbs         |   3 +-
 streams/highlight.js         |  23 +++++++
 6 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 share/html/assets/github.css
 create mode 100644 streams/highlight.js

diff --git a/bin/documentation.js b/bin/documentation.js
index 190c8cc..c2d9045 100755
--- a/bin/documentation.js
+++ b/bin/documentation.js
@@ -5,6 +5,7 @@ var documentation = require('../'),
   json = require('../streams/output/json.js'),
   combine = require('stream-combiner'),
   hierarchy = require('../streams/hierarchy.js'),
+  highlight = require('../streams/highlight.js'),
   html = require('../streams/html.js'),
   htmlOutput = require('../streams/output/html.js'),
   fs = require('fs'),
@@ -54,7 +55,7 @@ var formatter = {
   md: markdown({
     template: argv.mdtemplate
   }),
-  html: combine([html(), hierarchy(), htmlOutput()])
+  html: combine([html(), highlight(), hierarchy(), htmlOutput()])
 }[argv.f];
 
 if (argv.f === 'html' && argv.o === 'stdout') {
diff --git a/package.json b/package.json
index 2ff6f33..2eb4408 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "espree": "^1.12.2",
     "extend": "^2.0.0",
     "handlebars": "^3.0.0",
+    "highlight.js": "^8.4.0",
     "module-deps": "^3.7.3",
     "remarkable": "^1.6.0",
     "stream-combiner": "^0.2.1",
diff --git a/share/html/assets/bass.css b/share/html/assets/bass.css
index 9d11515..a1b5b09 100644
--- a/share/html/assets/bass.css
+++ b/share/html/assets/bass.css
@@ -155,6 +155,8 @@ pre {
   margin-top: 0;
   margin-bottom: 1rem;
   overflow-x: scroll;
+  padding: 1rem;
+  background-color: rgba(0,0,0,.03125);
 }
 
 hr {
diff --git a/share/html/assets/github.css b/share/html/assets/github.css
new file mode 100644
index 0000000..9b4f3aa
--- /dev/null
+++ b/share/html/assets/github.css
@@ -0,0 +1,124 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.hljs-dartdoc,
+.tex .hljs-formula {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080;
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaa;
+}
diff --git a/share/html/index.hbs b/share/html/index.hbs
index 25fadfa..e4930a0 100644
--- a/share/html/index.hbs
+++ b/share/html/index.hbs
@@ -3,6 +3,7 @@
   <title>Documentation</title>
   <link href='assets/bass.css' type='text/css' rel='stylesheet' />
   <link href='assets/style.css' type='text/css' rel='stylesheet' />
+  <link href='assets/github.css' type='text/css' rel='stylesheet' />
 </head>
 <body>
   <div class='px2'>
@@ -41,7 +42,7 @@
               {{#if examples}}
                 <h4>Examples</h4>
                 {{#each examples}}
-                  <pre>{{.}}</pre>
+                  <pre>{{{.}}}</pre>
                 {{/each}}
               {{/if}}
           </div>
diff --git a/streams/highlight.js b/streams/highlight.js
new file mode 100644
index 0000000..6f44e14
--- /dev/null
+++ b/streams/highlight.js
@@ -0,0 +1,23 @@
+'use strict';
+
+var through = require('through'),
+  hljs = require('highlight.js'),
+  extend = require('extend');
+
+/**
+ * Create a transform stream that highlights the contents of the
+ * `example` tag.
+ *
+ * @name highlight
+ * @return {stream.Transform}
+ */
+module.exports = function () {
+  return through(function (comment) {
+    var highlighted = comment.examples ? {
+      examples: comment.examples.map(function (example) {
+        return hljs.highlight('js', example).value;
+      })
+    } : {};
+    this.push(extend({}, comment, highlighted));
+  });
+};