From 79a525aa64b98b541dd7537afc58ff42580abb52 Mon Sep 17 00:00:00 2001
From: Stephen Sawchuk <sawchuk@gmail.com>
Date: Tue, 19 May 2015 19:01:01 -0400
Subject: [PATCH] docs: syntax highlight from markdown

---
 docs/authorization.md                         |  4 +-
 .../authorization/authorization.html          |  2 +-
 .../components/subpage/subpage-directive.js   | 61 ++++++++++++++++++-
 docs/site/css/main.css                        |  5 ++
 4 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/docs/authorization.md b/docs/authorization.md
index bbb93da1505..c8fae3c6f04 100644
--- a/docs/authorization.md
+++ b/docs/authorization.md
@@ -4,7 +4,7 @@ With `gcloud-node` it's incredibly easy to get authorized and start using Google
 
 If you are running this client on Google Compute Engine, we handle authorization for you with no configuration. You just need to make sure that when you [set up the GCE instance][gce-how-to], you add the correct scopes for the APIs you want to access.
 
-``` js
+```js hljs-class
 var config = {
   projectId: 'grape-spaceship-123'
 };
@@ -26,7 +26,7 @@ If you are not running this client on Google Compute Engine, you need a Google D
   * If you want to use a new service account, click on **Create new Client ID** and select **Service account**. After the account is created, you will be prompted to download the JSON key file that the library uses to authorize your requests.
   * If you want to generate a new key for an existing service account, click on **Generate new JSON key** and download the JSON key file.
 
-``` js
+``` js hljs-class
 var config = {
   projectId: 'grape-spaceship-123',
   keyFilename: '/path/to/keyfile.json'
diff --git a/docs/site/components/authorization/authorization.html b/docs/site/components/authorization/authorization.html
index a494ccf1c77..2221dbe3f8f 100644
--- a/docs/site/components/authorization/authorization.html
+++ b/docs/site/components/authorization/authorization.html
@@ -15,5 +15,5 @@
 <div subpage
   header-templateUrl="authorization-header.html"
   title="Authorization">
-  <btf-markdown ng-include="'authorization.md'"></btf-markdown>
+  <btf-markdown highlight-markdown ng-include="'authorization.md'"></btf-markdown>
 </div>
diff --git a/docs/site/components/subpage/subpage-directive.js b/docs/site/components/subpage/subpage-directive.js
index 9bbff6641f8..6001a9fa51c 100644
--- a/docs/site/components/subpage/subpage-directive.js
+++ b/docs/site/components/subpage/subpage-directive.js
@@ -1,5 +1,6 @@
 angular
-  .module('gcloud.subpage', ['gcloud.header'])
+  .module('gcloud.subpage', ['gcloud.header', 'hljs'])
+
   .directive('subpage', function($rootScope, $location, $http, $parse, getLinks, versions) {
     'use strict';
 
@@ -34,4 +35,62 @@ angular
         }
       }
     };
+  })
+
+  // A special class used in our MD files to tell the front end to syntax
+  // highlight the code blocks.
+  .directive('hljsClass', function() {
+    'use strict';
+
+    return {
+      // Concept borrowed from:
+      // http://www.bennadel.com/blog/2748-compiling-transcluded-content-in-angularjs-directives.htm
+      //
+      // <div class="hljs-class">
+      //   var hi = 'there';        <!-- We want this!
+      // </div>
+      //
+      // We want to replace that with:
+      //
+      // <div hljs language="javascript" source="var hi = 'there';"></div>
+      //
+      // To get the content we want, we have to use a higher priority than
+      // another same-named directive that uses transclude. This is our only
+      // chance to get it before it's clobbered.
+      priority: 1500.1,
+      restrict: 'C',
+      compile: function(element, attrs) {
+        attrs._contents = element.text();
+      }
+    };
+  })
+
+  .directive('hljsClass', function() {
+    'use strict';
+
+    return {
+      priority: 1500,
+      restrict: 'C',
+      transclude: true,
+      template: '<div hljs language="javascript" source="contents"></div>',
+      compile: function(element) {
+        return function($scope, element, attrs) {
+          $scope.contents = attrs._contents;
+        };
+      }
+    }
+  })
+
+  // Re-compile the Markdown, this time having the "hljs-class" blocks picked
+  // up.
+  .directive('highlightMarkdown', function($compile) {
+    'use strict';
+
+    return {
+      link: function(scope, element, attrs) {
+        scope.$watch(attrs.ngInclude, function() {
+          $compile(element.contents())(scope);
+        }, true);
+      }
+    };
   });
diff --git a/docs/site/css/main.css b/docs/site/css/main.css
index 40e4db3651f..d1143fc42d3 100755
--- a/docs/site/css/main.css
+++ b/docs/site/css/main.css
@@ -141,6 +141,11 @@ pre {
     line-height: 1.6em;
 }
 
+[hljs] > pre {
+  margin: 0 !important;
+  font-size: 1em;
+}
+
 pre,
 code {
   font-family: Monaco, 'Droid Sans Mono', monospace !important;