OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polym
er.github.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CO
NTRIBUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/P
ATENTS.txt | |
9 --> | |
10 <link rel="import" href="prettify-import.html"> | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 | |
13 <!-- | |
14 Element wrapper for the `google-code-prettify` (https://code.google.com/p/google
-code-prettify/) library. | |
15 | |
16 ##### Example | |
17 | |
18 <prettify-element text="def somefunc(param1='', param2=0):"></prettify-eleme
nt> | |
19 | |
20 ##### Example | |
21 | |
22 <prettify-element> | |
23 <template> | |
24 | |
25 <link rel="import" href="/components/polymer/polymer.html"> | |
26 <polymer-element name="proto-element"> | |
27 <template> | |
28 <span>I'm <b>proto-element</b>. Check out my prototype.</span> | |
29 </template> | |
30 <script> | |
31 Polymer({ | |
32 }); | |
33 </script> | |
34 </polymer-element> | |
35 | |
36 </template> | |
37 </prettify-element> | |
38 | |
39 @class prettify-element | |
40 @blurb Element wrapper for the highlightjs library. | |
41 @status alpha | |
42 @snap snap.png | |
43 --> | |
44 <polymer-element name="prettify-element" attributes="text"> | |
45 | |
46 <template> | |
47 | |
48 <style> | |
49 :host { | |
50 display: block; | |
51 } | |
52 | |
53 code,pre { | |
54 color: #9f499b; | |
55 font-family: "Source Code Pro",Monaco,Menlo,Consolas,"Courier New",mon
ospace | |
56 } | |
57 pre,.prettyprint { | |
58 background-color: #fafafa; | |
59 padding: 16px; | |
60 margin: 30px 0 | |
61 } | |
62 pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline { | |
63 color: #6b499f | |
64 } | |
65 pre .pun,.prettyprint .pun { | |
66 color: #5c6bc0 | |
67 } | |
68 pre .str,pre .string,.prettyprint .str,.prettyprint .string { | |
69 color: #ff4081 | |
70 } | |
71 pre .pln,.prettyprint .pln { | |
72 color: #7986cb | |
73 } | |
74 pre .kwd,.prettyprint .kwd { | |
75 color: #d61a7f | |
76 } | |
77 pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-nam
e { | |
78 color: #6b499f | |
79 } | |
80 pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-va
lue { | |
81 color: #7986cb | |
82 } | |
83 pre .com,pre .comment,.prettyprint .com,.prettyprint .comment { | |
84 color: #8a8a8a | |
85 } | |
86 | |
87 </style> | |
88 | |
89 <!-- Pre-canned styles that come with prettify (we opt for more pleasing lig
ht theme) --> | |
90 <!-- <link href="../google-code-prettify/src/prettify.css" rel="stylesheet"
/> --> | |
91 <!-- <link href="../google-code-prettify/styles/sons-of-obsidian.css" rel="s
tylesheet" /> --> | |
92 <!-- <link href="../google-code-prettify/styles/sunburst.css" rel="styleshee
t" /> --> | |
93 | |
94 <pre class="prettyprint" id="content"></pre> | |
95 | |
96 </template> | |
97 | |
98 <script> | |
99 | |
100 Polymer('prettify-element', { | |
101 | |
102 domReady: function() { | |
103 if (!this.text) { | |
104 if (this.firstElementChild && this.firstElementChild.localName === 'te
mplate') { | |
105 this.text = this.firstElementChild.innerHTML; | |
106 } else { | |
107 this.text = this.innerHTML; | |
108 } | |
109 } | |
110 }, | |
111 | |
112 textChanged: function() { | |
113 this.$.content.innerHTML = prettyPrintOne((this.text || '').replace(/</g
,'<').replace(/>/g,'>')); | |
114 } | |
115 | |
116 }); | |
117 | |
118 </script> | |
119 | |
120 </polymer-element> | |
OLD | NEW |