chore(tools): add syntax highlighting logic for examples (#2951)

Author: riavalon

.gitignore

@@ -33,4 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
-/.chrome
+/.chrome

package.json

@@ -66,9 +66,12 @@
     "gulp-clean-css": "^2.3.2",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
+    "gulp-flatten": "^0.3.1",
+    "gulp-highlight-files": "0.0.4",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
+    "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.4.0",
     "gulp-transform": "^1.1.0",

tools/gulp/tasks/docs.ts

@@ -1,6 +1,9 @@
 import gulp = require('gulp');
 const markdown = require('gulp-markdown');
 const transform = require('gulp-transform');
+const highlight = require('gulp-highlight-files');
+const rename = require('gulp-rename');
+const flatten = require('gulp-flatten');
 const hljs = require('highlight.js');
 import {task} from 'gulp';
 import * as path from 'path';
@@ -16,7 +19,7 @@ const EXAMPLE_PATTERN = /<!--\W*example\(([^)]+)\)\W*-->/g;
 // documentation page. Using a RegExp to rewrite links in HTML files to work in the docs.
 const LINK_PATTERN = /(<a[^>]*) href="([^"]*)"/g;
 
-gulp.task('docs', ['markdown-docs', 'api-docs'])
+gulp.task('docs', ['markdown-docs', 'highlight-docs', 'api-docs'])
 
 gulp.task('markdown-docs', () => {
   return gulp.src(['src/lib/**/*.md', 'guides/*.md'])
@@ -36,6 +39,20 @@ gulp.task('markdown-docs', () => {
       .pipe(gulp.dest('dist/docs/markdown'));
 });
 
+gulp.task('highlight-docs', () => {
+  // rename files to fit format: [filename]-[filetype].html
+  const renameFile = (path: any) => {
+    const extension = path.extname.slice(1);
+    path.basename = `${path.basename}-${extension}`;
+  };
+
+  return gulp.src('src/examples/**/*.+(html|css|ts)')
+    .pipe(flatten())
+    .pipe(rename(renameFile))
+    .pipe(highlight())
+    .pipe(gulp.dest('dist/docs/examples'));
+});
+
 task('api-docs', () => {
   const Dgeni = require('dgeni');
   const docsPackage = require(path.resolve(__dirname, '../../dgeni'));