add boilerplate documentation

marked-element.html

@@ -10,35 +10,41 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="marked-import.html">
 
-<polymer-element name="marked-element" attributes="text">
-
-  <script>
-
-    Polymer('marked-element', {
+<!--
+Element wrapper for the `marked` (http://marked.org/) library.
 
-      text: '',
+@class marked-element
+@blurb Element wrapper for the marked library.
+@status alpha
+@snap snap.png
+-->
+<polymer-element name="marked-element" attributes="text">
+<script>
 
-      enteredView: function() {
-        marked.setOptions({
-          highlight: this.highlight.bind(this)
-        });
-        if (!this.text) {
-          this.text = this.innerHTML;
-        }
-      },
+  Polymer('marked-element', {
 
-      textChanged: function () {
-        this.innerHTML = marked(this.text);
-      },
+    text: '',
 
-      highlight: function(code, lang) {
-        var event = this.fire('marked-js-highlight', {code: code, lang: lang});
-        return event.detail.code || code;
+    attached: function() {
+      marked.setOptions({
+        highlight: this.highlight.bind(this)
+      });
+      if (!this.text) {
+        this.text = this.innerHTML;
       }
+    },
+
+    textChanged: function () {
+      this.innerHTML = marked(this.text);
+    },
 
-    });
+    highlight: function(code, lang) {
+      var event = this.fire('marked-js-highlight', {code: code, lang: lang});
+      return event.detail.code || code;
+    }
 
-  </script>
+  });
 
+</script>
 </polymer-element>