120 lines
3.4 KiB
HTML
120 lines
3.4 KiB
HTML
<!--
|
|
@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,'<').replace(/>/g,'>'));
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</polymer-element>
|