chore: add syntax highlighting to generated overview docs (#2333)

package.json

@@ -79,6 +79,7 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-transform": "^1.1.0",
     "gulp-typescript": "^2.13.6",
+    "highlight.js": "^9.9.0",
     "jasmine-core": "^2.4.1",
     "karma": "^1.1.1",
     "karma-browserstack-launcher": "^1.0.1",

tools/gulp/tasks/docs.ts

@@ -1,16 +1,10 @@
 import gulp = require('gulp');
 const markdown = require('gulp-markdown');
 const transform = require('gulp-transform');
+const hljs = require('highlight.js');
 import {task} from 'gulp';
 import * as path from 'path';
 
-import {SOURCE_ROOT, PROJECT_ROOT} from '../constants';
-import {
-    execNodeTask
-} from '../task_helpers';
-
-const typedocPath = path.relative(PROJECT_ROOT, path.join(SOURCE_ROOT, 'lib/typedoc.json'));
-
 // Our docs contain comments of the form `<!-- example(...) -->` which serve as placeholders where
 // example code should be inserted. We replace these comments with divs that have a
 // `material-docs-example` attribute which can be used to locate the divs and initialize the example
@@ -19,7 +13,18 @@ const EXAMPLE_PATTERN = /<!--\W*example\(([^)]+)\)\W*-->/g;
 
 gulp.task('docs', () => {
   return gulp.src(['src/lib/**/*.md'])
-      .pipe(markdown())
+      .pipe(markdown({
+        // Add syntax highlight using highlight.js
+        highlight: (code: string, language: string) => {
+          if (language) {
+            // highlight.js expects "typescript" written out, while Github supports "ts".
+            let lang = language.toLowerCase() === 'ts' ? 'typescript' : language;
+            return hljs.highlight(lang, code).value;
+          }
+
+          return code;
+        }
+      }))
       .pipe(transform((content: string) =>
           content.toString().replace(EXAMPLE_PATTERN, (match: string, name: string) =>
               `<div material-docs-example="${name}"></div>`)))