From f73fd7d9eaf978ed443d8ce2c9682bcc9332dd6b Mon Sep 17 00:00:00 2001
From: Raven Avalon <raven.avalon@rangle.io>
Date: Wed, 8 Feb 2017 18:02:37 -0500
Subject: [PATCH] chore(tools): add syntax highlighting logic for examples
 (#2951)

---
 .gitignore               |  2 +-
 package.json             |  3 +++
 tools/gulp/tasks/docs.ts | 19 ++++++++++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 67f5b41b67d..9fded717492 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
-/.chrome
\ No newline at end of file
+/.chrome
diff --git a/package.json b/package.json
index 23adb241378..08c2b1640fd 100644
--- a/package.json
+++ b/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",
diff --git a/tools/gulp/tasks/docs.ts b/tools/gulp/tasks/docs.ts
index d8d6e65db00..14fcdbbeb13 100644
--- a/tools/gulp/tasks/docs.ts
+++ b/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'));