diff --git a/prism-highlighter.html b/prism-highlighter.html
index 0458466..aeb1664 100644
--- a/prism-highlighter.html
+++ b/prism-highlighter.html
@@ -24,6 +24,12 @@
This flow is supported by [``](https://github.com/PolymerElements/marked-element).
+You may also use this element with data-binding like so:
+
+```html
+
+```
+
@element prism-highlighter
@demo demo/index.html
-->
@@ -38,16 +44,65 @@
is: 'prism-highlighter',
+ properties: {
+ /**
+ * The source to be highlighted
+ */
+ code: {
+ type: String
+ },
+ /**
+ * An optional language hint, such as `js`
+ */
+ lang: {
+ type: String,
+ value: null
+ },
+ /**
+ * The highlighted source code
+ */
+ highlighted: {
+ type: String,
+ computed: '_computeHighlighted(code, lang)',
+ notify: true,
+ readOnly: true
+ }
+ },
+
ready: function() {
this._handler = this._highlight.bind(this);
},
attached: function() {
- (this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler);
+ var host = this.parentElement || (this.parentNode && this.parentNode.host);
+ if(host) {
+ host.addEventListener(HIGHLIGHT_EVENT, this._handler);
+ }
},
detached: function() {
- (this.parentElement || this.parentNode.host).removeEventListener(HIGHLIGHT_EVENT, this._handler);
+ var host = this.parentElement || (this.parentNode && this.parentNode.host);
+ if(host) {
+ host.removeEventListener(HIGHLIGHT_EVENT, this._handler);
+ }
+ },
+
+ /**
+ * Highlight the given code with an
+ * optional language hint specified.
+ *
+ * @param {string} code The source being highlighted
+ * @param {string=} lang A language hint (e.g. "js").
+ */
+ highlight: function(code, lang) {
+ return Prism.highlight(code, this._detectLang(code, lang));
+ },
+
+ _computeHighlighted: function(code, lang) {
+ if(!code) {
+ return;
+ }
+ return this.highlight(code, lang);
},
/**
@@ -64,14 +119,14 @@
event.stopPropagation();
var detail = event.detail;
- detail.code = Prism.highlight(detail.code, this._detectLang(detail.code, detail.lang));
+ detail.code = this.highlight(detail.code, detail.lang);
},
/**
* Picks a Prism formatter based on the `lang` hint and `code`.
*
* @param {string} code The source being highlighted.
- * @param {string=} lang A language hint (e.g. ````LANG`).
+ * @param {string=} lang A language hint (e.g. "js").
* @return {!prism.Lang}
*/
_detectLang: function(code, lang) {
diff --git a/test/prism-element.html b/test/prism-element.html
index 98bd0db..ceceeed 100644
--- a/test/prism-element.html
+++ b/test/prism-element.html
@@ -38,6 +38,12 @@
+
+
+
+
+
+