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

Tool to visualize Five Bells payments

<!--
    @license
    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="prettify-import.html">
<link rel="import" href="../polymer/polymer.html">

<!--
Element wrapper for the `google-code-prettify` (https://code.google.com/p/google-code-prettify/) library.

##### Example

    <prettify-element text="def somefunc(param1='', param2=0):"></prettify-element>

##### Example

    <prettify-element>
      <template>
    
        <link rel="import" href="/components/polymer/polymer.html">
        <polymer-element name="proto-element">
        <template>
          <span>I'm <b>proto-element</b>. Check out my prototype.</span>
        </template>
        <script>
          Polymer({
          });
        </script>
        </polymer-element>
    
      </template>
    </prettify-element>

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

  <template>

    <style>
      :host {
        display: block;
      }

      code,pre {
          color: #9f499b;
          font-family: "Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace
      }
      pre,.prettyprint {
          background-color: #fafafa;
          padding: 16px;
          margin: 30px 0
      }
      pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline {
          color: #6b499f
      }
      pre .pun,.prettyprint .pun {
          color: #5c6bc0
      }
      pre .str,pre .string,.prettyprint .str,.prettyprint .string {
          color: #ff4081
      }
      pre .pln,.prettyprint .pln {
          color: #7986cb
      }
      pre .kwd,.prettyprint .kwd {
          color: #d61a7f
      }
      pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name {
          color: #6b499f
      }
      pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value {
          color: #7986cb
      }
      pre .com,pre .comment,.prettyprint .com,.prettyprint .comment {
          color: #8a8a8a
      }

    </style>

    <!-- Pre-canned styles that come with prettify (we opt for more pleasing light theme)  -->
    <!-- <link href="../google-code-prettify/src/prettify.css" rel="stylesheet" /> -->
    <!-- <link href="../google-code-prettify/styles/sons-of-obsidian.css" rel="stylesheet" /> -->
    <!-- <link href="../google-code-prettify/styles/sunburst.css" rel="stylesheet" /> -->

    <pre class="prettyprint" id="content"></pre>

  </template>

  <script>

    Polymer('prettify-element', {

      domReady: function() {
        if (!this.text) {
          if (this.firstElementChild && this.firstElementChild.localName === 'template') {
            this.text = this.firstElementChild.innerHTML;
          } else {
            this.text = this.innerHTML;
          }
        }
      },

      textChanged: function() {
        this.$.content.innerHTML = prettyPrintOne((this.text || '').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
      }

    });

  </script>

</polymer-element>