Prettyprint element docs

paronsson · Jun 29, 2014 · 82ec9d3 · 82ec9d3
1 parent 219165b
commit 82ec9d3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 47 deletions.
diff --git a/elements/component-docs.html b/elements/component-docs.html
@@ -1,8 +1,7 @@
 <link rel="import" href="../components/polymer/polymer.html">
 <link rel="import" href="../components/context-free-parser/context-free-parser.html">
 <link rel="import" href="../components/marked-element/marked-element.html">
-<link rel="import" href="../components/highlightjs-element/highlightjs-element.html">
-
+<!-- <link rel="import" href="../components/highlightjs-element/highlightjs-element.html"> -->
 
 <polymer-element name="component-docs" attributes="elements">
   <template>
@@ -44,7 +43,7 @@
   <template>
     <link rel="stylesheet" href="../components/highlightjs/styles/default.css">
     <link rel="stylesheet" href="../css/elements/doc-page.css">
-    <div class="main"><!-- on-marked-js-highlight="{{hilight}}"> -->
+    <div class="main" on-marked-js-highlight="{{prettyPrint}}">
       <h1>{{data.name}}</h1>
 
       <template if="{{data.extends}}">
@@ -56,13 +55,10 @@ <h3>Extends: <a href="#{{data.extends}}">{{data.extends}}</a></h3>
       <p>
         <component-download-button org="Polymer" component="{{data.name}}"
         label="Get {{data.name}}"></component-download-button>
-
-        <!-- <a class="badge" href="http://bowerarchiver.appspot.com/archive?{{data.name}}=Polymer/{{data.name}}">Download</a> -->
-        <!-- <a class="badge" target="_blank" href="/components/{{data.name}}/demo.html" on-click="{{recordDemoPageview}}">Demo</a> -->
-        <a class="badge" target="_blank" href="/components/{{data.name}}/demo.html" on-click="{{recordDemoPageview}}">
+        <a class="badge" target="_blank" href="/components/{{data.name}}/demo.html"
+                         on-click="{{recordDemoPageview}}">
           <paper-button label="Demo" raisedButton></paper-button>
         </a>
-        <!-- <a class="badge" target="_blank" href="http://github.com/Polymer/{{data.name}}">Source</a> -->
       </p>
 
       <template if="{{data.description}}">
@@ -141,11 +137,28 @@ <h3>Methods</h3>
     </div>
   </template>
   <script>
+  (function() {
+    function encodeHTMLEntities_(htmlStr) {
+      return htmlStr.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+
     Polymer('doc-page', {
       recordDemoPageview: function(e, detail, sender) {
         window.recordPageview && window.recordPageview(sender.href); // global pollution.
+      },
+      prettyPrint: function(e, detail, sender) {
+        if (window.prettyPrintOne) {
+          this.async(function() {
+            var pres = this.shadowRoot.querySelectorAll('pre');
+            Array.prototype.forEach.call(pres, function(p, i) {
+              p.innerHTML = window.prettyPrintOne(encodeHTMLEntities_(detail.code));
+            });
+          });
+        }
       }
     });
+
+  })();
   </script>
 </polymer-element>
 
diff --git a/js/app.js b/js/app.js
@@ -166,15 +166,17 @@ function initPage(opt_inDoc, hasInlineImports) {
 
   // TODO: Use kramdown {:.prettyprint .linenums .lang-ruby} to add the
   // <pre class="prettyprint"> instead of doing this client-side.
-  if (!hasInlineImports) {
-    prettyPrintPage(doc);
-  } else {
-    // Need small delay to prevent https://github.com/Polymer/docs/issues/419.
-    // 200ms is arbitrary, but works.
-    setTimeout(function() {
-      prettyPrintPage(doc);
-    }, 200);
-  }
+  // if (!hasInlineImports) {
+  //   prettyPrintPage(doc);
+  // } else {
+  //   // Need small delay to prevent https://github.com/Polymer/docs/issues/419.
+  //   // 200ms is arbitrary, but works.
+  //   setTimeout(function() {
+  //     prettyPrintPage(doc);
+  //   }, 1200);
+  // }
+  prettyPrintPage(doc);
+
   if (location.hash) {
     hideOnHash();
   }