docs: syntax highlight from markdown

Author: stephenplusplus

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'

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>

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,44 @@ angular
         }
       }
     };
+  })
+
+  .directive('hljsClass', function() {
+    'use strict';
+
+    return {
+      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;
+        };
+      }
+    }
+  })
+
+  .directive('highlightMarkdown', function($compile) {
+    'use strict';
+
+    return {
+      link: function(scope, element, attrs) {
+        scope.$watch(attrs.ngInclude, function() {
+          $compile(element.contents())(scope);
+        }, true);
+      }
+    };
   });

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;