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 @@ + + + +