chore(tools): add syntax highlighting logic for examples

Author: riavalon

.gitignore

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

package.json

@@ -66,9 +66,13 @@
     "gulp-clean-css": "^2.3.2",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
+    "gulp-filter": "^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,7 +1,12 @@
 import gulp = require('gulp');
 const markdown = require('gulp-markdown');
 const transform = require('gulp-transform');
+const filter = require('gulp-filter');
+const highlight = require('gulp-highlight-files');
+const rename = require('gulp-rename');
+const flatten = require('gulp-flatten');
 const hljs = require('highlight.js');
+const exec = require('child_process').exec;
 import {task} from 'gulp';
 import * as path from 'path';
 
@@ -16,7 +21,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 +41,40 @@ gulp.task('markdown-docs', () => {
       .pipe(gulp.dest('dist/docs/markdown'));
 });
 
+gulp.task('highlight-docs', () => {
+  const cssFilter = filter('**/*.css', {restore: true});
+  const tsFilter = filter('**/*.ts', {restore: true});
+  const htmlFilter = filter('**/*.html', {restore: true});
+
+  // rename files to fit format: [filename]-[filetype].html
+  const renameFile = (path: any) => {
+    const extension = path.extname.slice(1);
+    path.basename = `${path.basename}-${extension}`;
+  };
+
+  gulp.src(['src/examples/**/*.{css,ts,html}', '!src/examples/*.*'])
+    // Flatten structure so that examples folder has no nested dirs
+    .pipe(flatten())
+
+    .pipe(htmlFilter)
+    .pipe(rename(renameFile))
+    .pipe(highlight({language: 'html'}))
+    .pipe(gulp.dest('dist/docs/examples'))
+    .pipe(htmlFilter.restore)
+
+    .pipe(cssFilter)
+    .pipe(rename(renameFile))
+    .pipe(highlight({language: 'css'}))
+    .pipe(gulp.dest('dist/docs/examples'))
+    .pipe(cssFilter.restore)
+
+    .pipe(tsFilter)
+    .pipe(rename(renameFile))
+    .pipe(highlight({language: 'ts'}))
+    .pipe(gulp.dest('dist/docs/examples'))
+    .pipe(tsFilter.restore);
+});
+
 task('api-docs', () => {
   const Dgeni = require('dgeni');
   const docsPackage = require(path.resolve(__dirname, '../../dgeni'));