diff --git a/package.json b/package.json index 302cdd0297bc..fd167bc533ec 100644 --- a/package.json +++ b/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", diff --git a/tools/gulp/tasks/docs.ts b/tools/gulp/tasks/docs.ts index 551ebcff984f..6bf4b7693ef5 100644 --- a/tools/gulp/tasks/docs.ts +++ b/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 = //g; // documentation page. Using a RegExp to rewrite links in HTML files to work in the docs. const LINK_PATTERN = /(]*) 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}`; -} +} \ No newline at end of file