update example comment api in md to html renderer

Author: annieyw

tools/markdown-to-html/docs-marked-renderer.ts

@@ -5,7 +5,7 @@ import {basename, extname} from 'path';
 const whitespaceRegex = /\W+/g;
 
 /** Regular expression that matches example comments. */
-const exampleCommentRegex = /<!--\W*example\(([^)]+)\)\W*-->/g;
+const exampleCommentRegex = /<!--\W*example\(\{(.*\:.*)+\}\)\W*-->/g;
 
 /**
  * Custom renderer for marked that will be used to transform markdown files to HTML
@@ -52,12 +52,20 @@ export class DocsMarkdownRenderer extends Renderer {
    *  `<!-- example(name) -->` turns into `<div material-docs-example="name"></div>`
    */
   html(html: string) {
-    html = html.replace(exampleCommentRegex, (_match: string, name: string) =>
-      `<div material-docs-example="${name}"></div>`
-    );
+        html = html.replace(exampleCommentRegex, (_match: string, content: string) =>
+        {
+            const parsedContent = JSON.parse(content);
+            const exampleName = parsedContent['example']
+            const file = parsedContent['file'];
+            const lines = parsedContent['lines'];
+            const expanded = !!parsedContent['expanded'];
+            return `<div material-docs-example="${exampleName}" file="${file}" lines="${lines}" exapnded="${expanded}"></div>`;
+        }
 
-    return super.html(html);
-  }
+        );
+
+        return super.html(html);
+    }
 
   /**
    * Method that will be called after a markdown file has been transformed to HTML. This method