chore(tools): add syntax highlighting logic for examples

Author: riavalon

.gitignore

@@ -5,6 +5,7 @@
 /tmp
 /deploy
 /screenshots
+/src/examples-highlights
 
 # dependencies
 /node_modules
@@ -33,4 +34,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
-/.chrome
+/.chrome

tools/code-highlight/highlight-examples.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+examplesSourcePath=./src/examples-highlights
+baseExamplesFolder=./src/examples
+highlightTool=./tools/code-highlight/syntax-highlight.js
+
+if [ ! -d $examplesSourcePath ];
+then
+  mkdir $examplesSourcePath
+fi
+
+find $baseExamplesFolder -mindepth 2 -type f \( -name "*.css" -or -iname "*.ts" -or -iname "*.html" \) | xargs -P 30 -I {} $highlightTool {} $examplesSourcePath

tools/code-highlight/syntax-highlight.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * Creates a syntax highlighted HTML file from a source file using highlight.js.
+ *
+ * Use:
+ * syntax-highlight path/to/input/file path/to/output/dir/
+ */
+
+const fs = require('fs');
+const path = require('path');
+const hljs = require('highlight.js');
+
+const inputFile = process.argv[2];
+const outputPath = process.argv[3];
+
+let extension = path.extname(inputFile).toLowerCase().slice(1);
+let language = extension;
+
+// Highlight.js expects 'typescript' written out instead of 'ts'.
+if (language == 'ts') {
+  language = 'typescript';
+}
+
+
+fs.readFile(inputFile, 'utf8', (error, content) => {
+  if (error) {
+    console.error(`Could not read file ${inputFile}`);
+    exit(1);
+  }
+
+  let highlighted = hljs.highlight(language, content);
+
+  let filename = path.basename(inputFile);
+  filename = filename.slice(0, filename.lastIndexOf('.')) + '-' + extension + '.html';
+  let outputFile = path.join(outputPath, filename);
+
+  fs.writeFile(outputFile, highlighted.value, {encoding: 'utf8'});
+});

tools/gulp/tasks/docs.ts

@@ -2,6 +2,7 @@ import gulp = require('gulp');
 const markdown = require('gulp-markdown');
 const transform = require('gulp-transform');
 const hljs = require('highlight.js');
+const exec = require('child_process').exec;
 import {task} from 'gulp';
 import * as path from 'path';
 
@@ -16,7 +17,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 +37,11 @@ gulp.task('markdown-docs', () => {
       .pipe(gulp.dest('dist/docs/markdown'));
 });
 
+gulp.task('highlight-docs', () => {
+  exec('tools/code-highlight/highlight-examples.sh');
+  console.log('Highlighting example sources. This may take 15 - 20 seconds...');
+});
+
 task('api-docs', () => {
   const Dgeni = require('dgeni');
   const docsPackage = require(path.resolve(__dirname, '../../dgeni'));