five-bells-visualization/public/bower_components/marked-element/marked-element.html

Tool to visualize Five Bells payments

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="marked-import.html">

<!--
Element wrapper for the `marked` (http://marked.org/) library.

@class marked-element
@blurb Element wrapper for the marked library.
@status alpha
@snap snap.png
-->
<polymer-element name="marked-element" attributes="text">
<script>

  Polymer('marked-element', {

    text: '',

    attached: function() {
      marked.setOptions({
        highlight: this.highlight.bind(this)
      });
      if (!this.text) {
        this.text = this.innerHTML;
      }
    },

    textChanged: function (oldVal, newVal) {
      if (newVal) {
        this.innerHTML = marked(this.text);
      } else {
        this.innerHTML = "";
      }
    },

    highlight: function(code, lang) {
      var event = this.fire('marked-js-highlight', {code: code, lang: lang});
      return event.detail.code || code;
    }

  });

</script>
</polymer-element>