class alias tags in html generated from markdown

Author: mmalerba

package.json

@@ -68,6 +68,7 @@
     "gulp-clean-css": "^2.3.2",
     "gulp-cli": "^1.2.2",
     "gulp-connect": "^5.0.0",
+    "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
     "gulp-highlight-files": "0.0.4",
     "gulp-htmlmin": "^3.0.0",

tools/gulp/tasks/docs.ts

@@ -5,6 +5,7 @@ const highlight = require('gulp-highlight-files');
 const rename = require('gulp-rename');
 const flatten = require('gulp-flatten');
 const hljs = require('highlight.js');
+const dom  = require('gulp-dom');
 import {task} from 'gulp';
 import * as path from 'path';
 
@@ -19,6 +20,24 @@ 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;
 
+// HTML tags in the markdown generated files that should receive a .docs-markdown-${tagName} class
+// for styling purposes.
+const MARKDOWN_TAGS_TO_CLASS_ALIAS = [
+    'a',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'li',
+    'ol',
+    'p',
+    'table',
+    'tbody',
+    'td',
+    'th'
+];
+
 gulp.task('docs', ['markdown-docs', 'highlight-docs', 'api-docs'])
 
 gulp.task('markdown-docs', () => {
@@ -36,6 +55,15 @@ gulp.task('markdown-docs', () => {
         }
       }))
       .pipe(transform(transformMarkdownFiles))
+      .pipe(dom(function () {
+        MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {
+          Array.prototype.slice.call(this.querySelectorAll(tag)).forEach((el: any) => {
+            el.classList.add(`docs-markdown-${tag}`);
+          });
+        });
+
+        return this;
+      }))
       .pipe(gulp.dest('dist/docs/markdown'));
 });
 
@@ -47,10 +75,10 @@ gulp.task('highlight-docs', () => {
   };
 
   return gulp.src('src/examples/**/*.+(html|css|ts)')
-    .pipe(flatten())
-    .pipe(rename(renameFile))
-    .pipe(highlight())
-    .pipe(gulp.dest('dist/docs/examples'));
+      .pipe(flatten())
+      .pipe(rename(renameFile))
+      .pipe(highlight())
+      .pipe(gulp.dest('dist/docs/examples'));
 });
 
 task('api-docs', () => {
@@ -93,4 +121,4 @@ function fixMarkdownDocLinks(link: string, filePath: string): string {
   // Temporary link the file to the /guide URL because that's the route where the
   // guides can be loaded in the Material docs.
   return `guide/${baseName}`;
-}
+}