diff --git a/package.json b/package.json index 47cb62040134..9c3e7b764237 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "gulp-clean-css": "^3.0.3", "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 9007f9df2334..6f2c6e76418e 100644 --- a/tools/gulp/tasks/docs.ts +++ b/tools/gulp/tasks/docs.ts @@ -9,6 +9,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'); // Our docs contain comments of the form `` which serve as placeholders where // example code should be inserted. We replace these comments with divs that have a @@ -21,6 +22,26 @@ 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', + 'tr', + 'ul' +]; + task('docs', ['markdown-docs', 'highlight-docs', 'api-docs']); task('markdown-docs', () => { @@ -38,6 +59,7 @@ task('markdown-docs', () => { } })) .pipe(transform(transformMarkdownFiles)) + .pipe(dom(createTagNameAliaser('docs-markdown'))) .pipe(dest('dist/docs/markdown')); }); @@ -49,10 +71,10 @@ task('highlight-docs', () => { }; return src('src/examples/**/*.+(html|css|ts)') - .pipe(flatten()) - .pipe(rename(renameFile)) - .pipe(highlight()) - .pipe(dest('dist/docs/examples')); + .pipe(flatten()) + .pipe(rename(renameFile)) + .pipe(highlight()) + .pipe(dest('dist/docs/examples')); }); task('api-docs', () => { @@ -95,3 +117,20 @@ function fixMarkdownDocLinks(link: string, filePath: string): string { // guides can be loaded in the Material docs. return `guide/${baseName}`; } + +/** + * Returns a function to be called with an HTML document as its context that aliases HTML tags by + * adding a class consisting of a prefix + the tag name. + * @param classPrefix The prefix to use for the alias class. + */ +function createTagNameAliaser(classPrefix: string) { + return function() { + MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach(tag => { + for (let el of this.querySelectorAll(tag)) { + el.classList.add(`${classPrefix}-${tag}`); + } + }); + + return this; + }; +}