Merge pull request #613 from stephenplusplus/spp--docs-markdown-styling

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,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);
+      }
+    };
   });

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;