├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .mostrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── buildconfig.js
├── code-sample.js
├── demo
    ├── code-sample-theme.js
    ├── css
    │   └── demo.css
    ├── demo.js
    └── index.html
├── gulpfile.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── code-sample.css
    └── code-sample.js
├── test
    ├── code-sample_test.html
    └── index.html
├── themes
    ├── default.js
    ├── github.js
    ├── kustom-dark.js
    ├── kustom-light.js
    ├── one-dark.js
    ├── one-light.js
    ├── solarized-dark.js
    └── solarized-light.js
├── vendor
    └── highlight
    │   ├── LICENSE
    │   └── highlight.pack.js
└── wct.conf.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 
14 | [*.css]
15 | insert_final_newline = false
16 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/
3 | vendor/
4 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["eslint:recommended", "google"],
 3 |   "parserOptions": {
 4 |     "ecmaVersion": 6,
 5 |     "sourceType": "module"
 6 |   },
 7 |   "env": {
 8 |     "browser": true,
 9 |     "node": true
10 |   },
11 |   "rules": {
12 |     "brace-style": "off",
13 |     "new-cap": ["error", {
14 |       "capIsNewExceptions": [
15 |         "PolymerElement"
16 |       ]
17 |     }],
18 |     "no-var": "off",
19 |     "require-jsdoc": "off",
20 |     "max-len": 0,
21 |     "no-console": "off"
22 |   },
23 |   "globals": {
24 |     "Polymer": true,
25 |     "hljs": true
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | coverage*/
2 | node_modules
3 | .tmp/
4 | 


--------------------------------------------------------------------------------
/.mostrc:
--------------------------------------------------------------------------------
1 | {
2 |   "css-api": {
3 |     "file": "{{component}}.js",
4 |     "docs": "README.md",
5 |     "unformatted": true
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: required
 3 | install:
 4 |   - npm install
 5 |   - npm install -g codecov
 6 | before_script:
 7 |   - npm install -g polymer-cli@1.7.2
 8 | env:
 9 |   global:
10 |     - secure: 8k0dq8qt0SgD2jzb+QsQZuEv1dLp6GnTJnYwQ3g2BahPJwTrx3jn0OE1NR5r7z9gZM6lbODCQyAlOdMpjK7jFrAhI+E/3iLDp73agosqj499BPfNvZqIjflddp4XuUYi8Pid8gfzcl/5R4tG+HMXRWuvMeJ/76K9dA5kPJSjt/+Q7NTFNWnhAWrPo442BRWoZJ2oCV1DPCRk3Uo85Acc+dSIHrlmcQRV9w6xWbVhOkNzy+gE+Cw+898OhlHqQ90YFUvP8EW6pJPyL2eGMJA5W7FGXxmZqQT++mVgoKU0tjKOaOSXkoaH+J7JwvElFl4Jne7Oq6fQTcGhBkV3B2jluZBXZSysMZguxbQyI/VUDYft5Bl4toEdd8Ey65Em8jDThJN2UuGNl4cjSSZXt2UhhicmzgcJAjCy7E9dZ/aQJhMW5g69b6RpWoFKCjhT/9J0IACCQk7G91Upkkh3tON6sRBl+di/Mry05XVyYyAalKmE6GbWN3Wjsr2qelbr5Z9JWuGQMSbR/ge5hsliUGLcqeSZJ4iItCh/m6UvmuHMrKQyhRV8p7ZVdzQuFMkBmglR/ioVygnepQbIBuUzuoB4oswkjf1KhtafpW3HYQ1xtrFVbkjNN+ig4ezmSaHLCflP6SsyaUlpKMmTXkwCmhQxfmRQ/+AfLsKyfIPmbRCBcNw=
11 |     - secure: A6VSRhqOE1BadqdEyf6hT0uNdoFEfvRVQ7SX/qCp7/RukUtm3EtKh9hFim9P/5jnCGS9zU6GMwyZWSTJraTJVd+TRJT1v+Aiw9BeVbTLnL8kS3P2rL2aInhpoh9Lsm5V7mrvlKJHXhch1E/QSqdn6EEcN9Jqnrq0PICkU1H6xUZ0noBy6BADWn8Hy7k5BYDamThAM+k4877KnOh75vuhKQpER9CYNzFyzXOausZ7D9k+KoQRWKvW3PBeAxkgU2Nd+I8gol+5ZY3huN957vAd9Ue05NlnhdQZJbgJkn5aTm2XZCjEtkKVQ+DLyQCd6K/rzJUxZLpfsCRrf3QcmxAGb0P2ZxzznJACeKv1TfrE071ik9iUWuYOuXDdr6ZRXM0fI3uMAhTePi/QKQrfeK9TfYxUuWeW6QmkERNPiDMme4ap16vqRrFHZ+65GNL0mRpilJ2pztQyXMufZrh0FhcW/aypgLJgvB1lL/PdEwQbyOZobcz5YJTHc6nX1dB+t9lGh1NOqybf32PwXkgQ0+o3tnjhsSsAQ8HeoSmZ20Z8cLXV8A9wilYkIYBzIrZS4GwLCuC6uBnu+ov4cTy0JVI9/Ezd6/tyvYVYLCtPsWqnL1LJnqx5mtXBDPBWYs092qdV7CgcQ3zoVUzft42GYDSUKzEGgXvhb3JTUotlyboZKKo=
12 | node_js:
13 |   - "8"
14 | addons:
15 |   chrome: stable
16 | script:
17 |   - xvfb-run npm run test:sauce
18 |   - codecov
19 | dist: trusty
20 | 
21 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## v1.0.0
 4 | 
 5 | - Migrated to Polymer 3 and npm. Thanks to [@sergicontre](https://github.com/sergicontre)
 6 | 
 7 | ## v0.4.2
 8 | 
 9 | - Fix: entitized chars (< and >) not replaced.
10 | 
11 | ## v0.4.0
12 | 
13 | - Copy to clipboard functionallity added. Thanks to [@lpellegr](https://github.com/lpellegr)
14 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Kus Cámara
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # <code-sample>
  2 | [![Build Status](https://img.shields.io/travis/kcmr/code-sample/master.svg?style=flat-square)](https://travis-ci.org/kcmr/code-sample) 
  3 | [![codecov](https://codecov.io/gh/kcmr/code-sample/branch/master/graph/badge.svg)](https://codecov.io/gh/kcmr/code-sample)
  4 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/@kuscamara/code-sample)
  5 | [![npm version](https://badge.fury.io/js/%40kuscamara%2Fcode-sample.svg)](https://badge.fury.io/js/%40kuscamara%2Fcode-sample)
  6 | ![Polymer 3](https://img.shields.io/badge/Polymer-3-green.svg)
  7 | 
  8 | > A wrapper element for [highlight.js](https://highlightjs.org/)
  9 | 
 10 | A themeable sample code snippet that uses [highlight.js](https://highlightjs.org/) for syntax highlighting.   
 11 | Forget to worry about spaces, indentation, HTML entities, etc.
 12 | 
 13 | ```html
 14 | <code-sample>
 15 |   <template>
 16 |     <div class="some-class">
 17 |       <p>Lorem ipsum dolor…</p>
 18 |     </div>
 19 |   </template>
 20 | </code-sample>
 21 | ```
 22 | 
 23 | ## Installation
 24 | 
 25 | 1. Install the component using Npm:
 26 |   ```bash
 27 |   $ npm i -S @kuscamara/code-sample
 28 |   ```
 29 | 2. Import Web Components loader (optional):
 30 |   ```html
 31 |   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 32 |   ```
 33 | 3. Import the component:
 34 |   ```html
 35 |   <script type="module" src="node_modules/@kuscamara/code-sample/code-sample.js"></script>
 36 |   ```
 37 | 
 38 | ## Usage
 39 | 
 40 | The code to highlight must be provided inside a `<template>` tag.
 41 | 
 42 | ```html
 43 | <code-sample>
 44 |   <template>
 45 |     <p>your code here...</p>
 46 |   </template>
 47 | </code-sample>
 48 | ```
 49 | 
 50 | ### Used inside a custom element
 51 | 
 52 | When **used inside a custom element** you'll need to add the attribute `preserve-content` to the inner template to prevent Polymer to process the template's content.
 53 | 
 54 | ```html
 55 | <code-sample>
 56 |   <template preserve-content>
 57 |     <p>your code here...</p>
 58 |   </template>
 59 | </code-sample>
 60 | ```
 61 | 
 62 | ### Used inside a tagged template literal
 63 | 
 64 | When **used inside a tagged template literal** (Polymer or LitElement html function), you should escape any template string (`${expression}`) to prevent it from being evaluated getting an error.
 65 | 
 66 | ```js
 67 | class SomeElement extends PolymerElement {
 68 |   static get template() {
 69 |     return html`
 70 |       <code-sample type="js">
 71 |         <template preserve-content>
 72 |           export class Example extends ExampleBase {
 73 |             static get template() {
 74 |               return html\`
 75 |                 <p>\${super.template}</p>
 76 |               \`;
 77 |             }
 78 |           }
 79 |         </template>
 80 |       </code-sample>
 81 |     `;
 82 |   }
 83 | }
 84 | ```
 85 | 
 86 | ### Render the code inside the template
 87 | 
 88 | To render the code inside the template, use the boolean attribute `render`.
 89 | 
 90 | ```html
 91 | <code-sample render>
 92 |   <template>
 93 |     <my-custom-element></my-custom-element>
 94 |   </template>
 95 | </code-sample>
 96 | ```
 97 | 
 98 | ### Copy to clipboard
 99 | 
100 | To display a **copy to clipboard** button, use the boolean attribute `copy-clipboard-button`:
101 | 
102 | ```html
103 | <code-sample copy-clipboard-button>
104 |   <template>
105 |     <p>your code here...</p>
106 |   </template>
107 | </code-sample>
108 | ```
109 | 
110 | ### Language types
111 | 
112 | The `type` attribute specifies the language of the sample code (eg.: html, css, js) and is not needed most of the time because it's automatically set. You can use it when your code sample language is not properly detected.
113 | 
114 | ```html
115 | <code-sample type="css">
116 |   <template>
117 |     .some-class {
118 |       @apply --my-mixin;
119 |     }
120 |   </template>
121 | </code-sample>
122 | ```
123 | 
124 | **Exception**: for the case of **tagged template literals**, you may need to set the `type` attribute to **js**, **jsx** or **javascript** to prevent the code being formatted as HTML.
125 | 
126 | ```html
127 | <code-sample type="js">
128 |   <template>
129 |     class MyElement extends PolymerElement {
130 |       static get template() {
131 |         return html`
132 |           <style>
133 |             :host {
134 |               display: block;
135 |             }
136 |           </style>
137 |           <p>Hello world!</p>
138 |         `;
139 |       }
140 |     }
141 |   </template>
142 | </code-sample>
143 | ```
144 | 
145 | ## Themes
146 | 
147 | The component includes 8 themes. One Dark is imported as the default theme.
148 | To use another theme, import it and set as the `theme` property.
149 | 
150 | Example:
151 | 
152 | ```html
153 | <script type="module">
154 |   import { oneLight } from '../node_modules/@kuscamara/code-sample/themes/one-light.js';
155 |   document.querySelector('code-sample').theme = oneLight;
156 | </script>
157 | ```
158 | 
159 | ### Available themes
160 | 
161 | - one-ligth.js as `oneLight`
162 | - default.js as `defaultTheme`
163 | - github.js as `github`
164 | - one-dark.js as `oneDark`
165 | - solarized-dark.js as `solarizedDark`
166 | - solarized-light.js as `solarizedLight`
167 | - kustom-light.js as `kustomLight`
168 | - kustom-dark.js as `kustomDark`
169 | 
170 | ### More themes
171 | 
172 | You can use your own theme by adding one of the [available themes](https://github.com/isagalaev/highlight.js/tree/master/src/styles) for hightlight.js in a shared style.
173 | The shared style should be exported as a tagged template literal.
174 | 
175 | Example:
176 | 
177 | ```js
178 | import { html } from '@polymer/polymer/polymer-element.js';
179 | 
180 | export const myOwnTheme = html`
181 | <style>
182 | /* your own styles */
183 | </style>`;
184 | ```
185 | 
186 | ### Themes in browsers using ShadyCSS
187 | Due to **[ShadyCSS limitations](https://github.com/webcomponents/shadycss#dynamically-created-styles-are-not-supported)**, dynamic change of themes is **not supported in browsers that use ShadyCSS (Firefox)**. To set a different theme for these browsers, you should import your theme as a style module with `code-sample-theme` as its `id`. 
188 | 
189 | **Example:**
190 | 
191 | In `your-shared-style-file.js`:
192 | ```js
193 | const html = (string) => string;
194 | const $documentContainer = document.createElement('div');
195 | $documentContainer.setAttribute('style', 'display: none;');
196 | 
197 | $documentContainer.innerHTML = html`
198 | <dom-module id="code-sample-theme">
199 |   <template>
200 |     <style>
201 |     /* your custom styles */
202 |     </style>
203 |   </template>
204 | </dom-module>`;
205 | 
206 | document.head.appendChild($documentContainer);
207 | ```
208 | 
209 | Import the shared style in the main document:
210 | ```html
211 | <head>
212 |   <script type="module" src="your-shared-style-file.js"></script>
213 | </head>
214 | ```
215 | 
216 | The styles will be applied to `<code-sample>` in browsers using ShadyCSS.
217 | 
218 | ### Languages included in the highlightjs pack included with the component:
219 | 
220 | - CSS
221 | - HTTP
222 | - JavaScript
223 | - Bash
224 | - CoffeScript
225 | - JSON
226 | - Markdown
227 | - HTML, XML
228 | 
229 | highlightjs version: v9.12.0
230 | 
231 | ### Styling
232 | 
233 | The following custom CSS properties are available for styling:
234 | 
235 | | Custom Property | Description | Default |
236 | | :-------------- | :---------- | :------ |
237 | | --code-sample-pre | empty mixin applied to `<pre>` element | {} |
238 | | --code-sample-font-family | font-family applied to `<pre>` and `<code>` elements | Operator Mono, Inconsolata, Roboto Mono, monaco, consolas, monospace |
239 | | --code-sample-font-size | font-size applied to `<pre>` and `<code>` elements | 14px |
240 | | --code-sample-line-height | line-height applied to `.hljs` | 1.3 |
241 | | --code-sample-hljs | empty mixin applied to `.hljs` | {} |
242 | | --code-sample-demo-padding | padding applied to the container of the rendered code | 0 0 20px |
243 | | --code-sample-demo-not-empty | empty mixin applied to the demo container when is not empty | {} |
244 | | --code-sample-demo | empty mixin applied to the container of the rendered code | {} |
245 | | --code-sample-code-container | empty mixin applied to code container | {} |
246 | | --code-sample-code-container-hover | empty mixin applied to code container on :hover | {} |
247 | | --code-sample-code-container-hover-button | empty mixin applied to the copy to clipboard button when the code container on :hover | {} |
248 | | --code-sample-copy-button-bg-color | background-color of the copy to clipboard button | #e0e0e0 |
249 | | --code-sample-copy-clipboard-button | empty mixin applied to the copy to clipboard button | {} |
250 | 
251 | Included themes contain custom CSS properties to set the background and text color.   
252 | You may need to add these CSS properties to your own themes.
253 | 
254 | | Custom property                | Description                             | Default     |
255 | |:-------------------------------|:----------------------------------------|:------------|
256 | | --code-sample-background       | code background color                   | Depends on the theme         |
257 | | --code-sample-color            | code text color                         | Depends on the theme         |
258 | 
259 | 
260 | 
261 | 


--------------------------------------------------------------------------------
/buildconfig.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   server: {
 3 |     port: 5000,
 4 |     open: false,
 5 |     notify: false,
 6 |     ghostMode: false,
 7 |     reloadOnRestart: true,
 8 |     proxy: 'localhost:{{port}}/components/{{component}}/',
 9 |   },
10 |   watch: {
11 |     dist: [
12 |       'themes/**/*',
13 |     ],
14 |   },
15 |   pixtorem: {
16 |     exclude: [
17 |       'border',
18 |       'box-shadow',
19 |       'border-radius',
20 |     ],
21 |   },
22 |   autoprefixer: {
23 |     flexbox: 'no-2009',
24 |   },
25 |   inlineSource: {
26 |     compress: false,
27 |     swallowErrors: true,
28 |     pretty: true,
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/code-sample.js:
--------------------------------------------------------------------------------
  1 | import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
  2 | import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
  3 | import {oneDark} from './themes/one-dark.js';
  4 | import './vendor/highlight/highlight.pack.js';
  5 | 
  6 | /**
  7 |  * `<code-sample>` uses [highlight.js](https://highlightjs.org/) for syntax highlighting.
  8 |  * @polymer
  9 |  * @customElement
 10 |  * @extends {PolymerElement}
 11 |  * @demo https://kcmr.github.io/code-sample/
 12 |  */
 13 | class CodeSample extends PolymerElement {
 14 |   static get template() {
 15 |     return html`
 16 |     ${this.constructor.theme || oneDark}
 17 |     <style include="code-sample-theme" id="baseStyle">
 18 |     :host {
 19 |       display: block;
 20 |     }
 21 | 
 22 |     :host([hidden]),
 23 |     [hidden] {
 24 |       display: none;
 25 |     }
 26 | 
 27 |     pre {
 28 |       margin: 0;
 29 |       @apply --code-sample-pre;
 30 |     }
 31 | 
 32 |     pre, code {
 33 |       font-family: var(--code-sample-font-family, Operator Mono, Inconsolata, Roboto Mono, monaco, consolas, monospace);
 34 |       font-size: var(--code-sample-font-size, 0.875rem);
 35 |     }
 36 | 
 37 |     .hljs {
 38 |       padding: 0 1.25rem;
 39 |       line-height: var(--code-sample-line-height, 1.3);
 40 |       @apply --code-sample-hljs;
 41 |     }
 42 | 
 43 |     .demo:not(:empty) {
 44 |       padding: var(--code-sample-demo-padding, 0 0 1.25rem);
 45 |       @apply --code-sample-demo-not-empty;
 46 |     }
 47 | 
 48 |     .demo {
 49 |       @apply --code-sample-demo;
 50 |     }
 51 | 
 52 |     #code-container {
 53 |       position: relative;
 54 |       @apply --code-sample-code-container;
 55 |     }
 56 | 
 57 |     #code-container:hover {
 58 |       @apply --code-sample-code-container-hover;
 59 |     }
 60 | 
 61 |     #code-container:hover > button {
 62 |       @apply --code-sample-code-container-hover-button;
 63 |     }
 64 | 
 65 |     button {
 66 |       background: var(--code-sample-copy-button-bg-color, #e0e0e0);
 67 |       border: none;
 68 |       cursor: pointer;
 69 |       display: block;
 70 |       position: absolute;
 71 |       right: 0;
 72 |       top: 0;
 73 |       text-transform: uppercase;
 74 |       @apply --code-sample-copy-clipboard-button;
 75 |     }
 76 |     </style>
 77 | 
 78 |     <div id="demo" class="demo"></div>
 79 |     <slot id="content"></slot>
 80 | 
 81 |     <div id="code-container">
 82 |       <button
 83 |         type="button"
 84 |         hidden="[[!copyClipboardButton]]"
 85 |         id="copyButton"
 86 |         title="Copy to clipboard"
 87 |         on-click="_copyToClipboard">Copy</button>
 88 |       <pre id="code"></pre>
 89 |     </div>
 90 |     `;
 91 |   }
 92 | 
 93 |   static get properties() {
 94 |     return {
 95 |       // Set to true to show a copy to clipboard button.
 96 |       copyClipboardButton: {
 97 |         type: Boolean,
 98 |         value: false,
 99 |       },
100 |       // Tagged template literal with custom styles.
101 |       // Only supported in Shadow DOM.
102 |       theme: {
103 |         type: String,
104 |         observer: '_themeChanged',
105 |       },
106 |       // Set to true to render the code inside the template.
107 |       render: {
108 |         type: Boolean,
109 |         value: false,
110 |       },
111 |       // Code type (optional). (eg.: html, js, css)
112 |       // Options are the same as the available classes for `<code>` tag using highlight.js
113 |       type: {
114 |         type: String,
115 |       },
116 |     };
117 |   }
118 | 
119 |   _themeChanged(theme) {
120 |     if (theme && this._themeCanBeChanged()) {
121 |       const previousTheme = this.shadowRoot.querySelector('style:not(#baseStyle)');
122 |       this.shadowRoot.replaceChild(
123 |         document.importNode(theme.content, true),
124 |         previousTheme
125 |       );
126 |     }
127 |   }
128 | 
129 |   _themeCanBeChanged() {
130 |     if (window.ShadyCSS) {
131 |       console.error('<code-sample>:', 'Theme changing is not supported in Shady DOM.');
132 |       return;
133 |     }
134 | 
135 |     if (this.theme.tagName !== 'TEMPLATE') {
136 |       console.error('<code-sample>:', 'theme must be a template');
137 |       return;
138 |     }
139 | 
140 |     return true;
141 |   }
142 | 
143 |   connectedCallback() {
144 |     super.connectedCallback();
145 |     setTimeout(() => {
146 |       if (this.querySelector('template')) {
147 |         this._observer = new FlattenedNodesObserver(this.$.content, () => this._updateContent());
148 |       } else if (this.childNodes.length) {
149 |         console.error('<code-sample>:', 'content must be provided inside a <template> tag');
150 |       }
151 |     });
152 |   }
153 | 
154 |   disconnectedCallback() {
155 |     if (this._observer) {
156 |       this._observer.disconnect();
157 |       this._observer = null;
158 |     }
159 |   }
160 | 
161 |   _updateContent() {
162 |     if (this._code) this._code.parentNode.removeChild(this._code);
163 |     if (this._demo) this.$.demo.innerHTML = '';
164 | 
165 |     const template = this._getCodeTemplate();
166 | 
167 |     if (this.render) {
168 |       this._demo = this.$.demo.appendChild(
169 |         document.importNode(template.content, true)
170 |       );
171 |     }
172 | 
173 |     this._highlight(template.innerHTML);
174 |   }
175 | 
176 |   _getCodeTemplate() {
177 |     const nodes = FlattenedNodesObserver.getFlattenedNodes(this.$.content);
178 |     return [].filter.call(nodes, (node) => node.nodeType === Node.ELEMENT_NODE)[0];
179 |   }
180 | 
181 |   _highlight(str) {
182 |     this._code = document.createElement('code');
183 |     if (this.type) this._code.classList.add(this.type);
184 |     this._code.innerHTML = this._entitize(this._cleanIndentation(str));
185 |     this.$.code.appendChild(this._code);
186 |     hljs.highlightBlock(this._code);
187 |   }
188 | 
189 |   _cleanIndentation(str) {
190 |     const pattern = str.match(/\s*\n[\t\s]*/);
191 |     return str.replace(new RegExp(pattern, 'g'), '\n');
192 |   }
193 | 
194 |   _entitize(str) {
195 |     return String(str)
196 |       .replace(/&lt;/g, '<')
197 |       .replace(/&gt;/g, '>')
198 |       .replace(/=""/g, '')
199 |       .replace(/=&gt;/g, '=>')
200 |       .replace(/</g, '&lt;')
201 |       .replace(/>/g, '&gt;')
202 |       .replace(/"/g, '&quot;');
203 |   }
204 | 
205 |   _copyToClipboard(event) {
206 |     const copyButton = event.target;
207 | 
208 |     const textarea = this._textAreaWithClonedContent();
209 |     textarea.select();
210 | 
211 |     try {
212 |       document.execCommand('copy', false);
213 |       copyButton.textContent = 'Done';
214 |     } catch (err) {
215 |       console.error(err);
216 |       copyButton.textContent = 'Error';
217 |     }
218 | 
219 |     textarea.remove();
220 | 
221 |     setTimeout(() => {
222 |       copyButton.textContent = 'Copy';
223 |     }, 1000);
224 |   }
225 | 
226 |   _textAreaWithClonedContent() {
227 |     const textarea = document.createElement('textarea');
228 |     document.body.appendChild(textarea);
229 |     textarea.value = this._cleanIndentation(this._getCodeTemplate().innerHTML);
230 | 
231 |     return textarea;
232 |   }
233 | }
234 | 
235 | customElements.define('code-sample', CodeSample);
236 | 


--------------------------------------------------------------------------------
/demo/code-sample-theme.js:
--------------------------------------------------------------------------------
  1 | const html = (string) => string; // only for highlighting purpuses (editor)
  2 | const $documentContainer = document.createElement('div');
  3 | $documentContainer.setAttribute('style', 'display: none;');
  4 | 
  5 | $documentContainer.innerHTML = html`
  6 | <dom-module id="code-sample-theme">
  7 |   <template>
  8 |     <style>
  9 |       /* Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org> */
 10 | 
 11 |       .hljs {
 12 |         display: block;
 13 |         overflow-x: auto;
 14 |         background: var(--code-sample-background, #F0F0F0);
 15 |       }
 16 | 
 17 | 
 18 |       /* Base color: saturation 0; */
 19 | 
 20 |       .hljs,
 21 |       .hljs-subst {
 22 |         color: var(--code-sample-color, #444);
 23 |       }
 24 | 
 25 |       .hljs-comment {
 26 |         color: #888888;
 27 |       }
 28 | 
 29 |       .hljs-keyword,
 30 |       .hljs-attribute,
 31 |       .hljs-selector-tag,
 32 |       .hljs-meta-keyword,
 33 |       .hljs-doctag,
 34 |       .hljs-name {
 35 |         font-weight: bold;
 36 |       }
 37 | 
 38 | 
 39 |       /* User color: hue: 0 */
 40 | 
 41 |       .hljs-type,
 42 |       .hljs-string,
 43 |       .hljs-number,
 44 |       .hljs-selector-id,
 45 |       .hljs-selector-class,
 46 |       .hljs-quote,
 47 |       .hljs-template-tag,
 48 |       .hljs-deletion {
 49 |         color: #880000;
 50 |       }
 51 | 
 52 |       .hljs-title,
 53 |       .hljs-section {
 54 |         color: #880000;
 55 |         font-weight: bold;
 56 |       }
 57 | 
 58 |       .hljs-regexp,
 59 |       .hljs-symbol,
 60 |       .hljs-variable,
 61 |       .hljs-template-variable,
 62 |       .hljs-link,
 63 |       .hljs-selector-attr,
 64 |       .hljs-selector-pseudo {
 65 |         color: #BC6060;
 66 |       }
 67 | 
 68 | 
 69 |       /* Language color: hue: 90; */
 70 | 
 71 |       .hljs-literal {
 72 |         color: #78A960;
 73 |       }
 74 | 
 75 |       .hljs-built_in,
 76 |       .hljs-bullet,
 77 |       .hljs-code,
 78 |       .hljs-addition {
 79 |         color: #397300;
 80 |       }
 81 | 
 82 | 
 83 |       /* Meta color: hue: 200 */
 84 | 
 85 |       .hljs-meta {
 86 |         color: #1f7199;
 87 |       }
 88 | 
 89 |       .hljs-meta-string {
 90 |         color: #4d99bf;
 91 |       }
 92 | 
 93 | 
 94 |       /* Misc effects */
 95 | 
 96 |       .hljs-emphasis {
 97 |         font-style: italic;
 98 |       }
 99 | 
100 |       .hljs-strong {
101 |         font-weight: bold;
102 |       }
103 |     </style>
104 |   </template>
105 | </dom-module>`;
106 | 
107 | document.head.appendChild($documentContainer);
108 | 
109 | 


--------------------------------------------------------------------------------
/demo/css/demo.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font: caption;
 3 |   font-size: 100%;
 4 |   background: #E6E8E8;
 5 |   -webkit-tap-highlight-color: transparent;
 6 | }
 7 | 
 8 | h1 {
 9 |   font-size: 18px;
10 |   font-weight: 500;
11 |   margin: 0;
12 | }
13 | 
14 | p { font-weight: 300; }
15 | 
16 | code {
17 |   font-family: Roboto Mono, monospace;
18 | }
19 | 
20 | code-sample {
21 |   --code-sample-font-family: Roboto Mono, monospace;
22 | }
23 | 
24 | .wrapper {
25 |   max-width: 800px;
26 |   margin: 40px auto 0;
27 | }
28 | 
29 | .wrapper > .demo {
30 |   margin-bottom: 40px;
31 |   padding: 40px;
32 |   background-color: #fff;
33 | }
34 | 
35 | .demo-text {
36 |   margin: 0 0 20px;
37 |   padding: 0 0 10px;
38 |   border-bottom: 1px solid #e0e0e0;
39 |   display: flex;
40 |   justify-content: space-between;
41 |   align-items: center;
42 | }
43 | 
44 | .demo-btn {
45 |   font: inherit;
46 |   background-color: #EAEDED;
47 |   border: 0;
48 |   box-shadow: 0 1px 2px rgba(0,0,0,0.25);
49 |   height: 40px;
50 |   padding: 0 20px;
51 |   border-radius: 3px;
52 | }
53 | 
54 | .demo-btn:active {
55 |   background-color: #D7DBDD;
56 | }
57 | 
58 | .title-button {
59 |   display: flex;
60 |   justify-content: space-between;
61 |   align-items: flex-end;
62 |   margin-bottom: 20px;
63 | }
64 | 
65 | .title-button h1 { margin-bottom: 0; }
66 | 
67 | .center { text-align: center; }
68 | 
69 | .select {
70 |   display: flex;
71 |   align-items: center;
72 |   margin-right: 8px;
73 |   font-size: 14px;
74 | }
75 | 
76 | .select span {
77 |    margin-right: 8px;
78 | }
79 | 
80 | .select select {
81 |   font: inherit;
82 | }
83 | 
84 | 


--------------------------------------------------------------------------------
/demo/demo.js:
--------------------------------------------------------------------------------
 1 | import {oneDark} from '../themes/one-dark.js';
 2 | import {oneLight} from '../themes/one-light.js';
 3 | import {defaultTheme} from '../themes/default.js';
 4 | import {github} from '../themes/github.js';
 5 | import {solarizedLight} from '../themes/solarized-light.js';
 6 | import {solarizedDark} from '../themes/solarized-dark.js';
 7 | import {kustomLight} from '../themes/kustom-light.js';
 8 | import {kustomDark} from '../themes/kustom-dark.js';
 9 | 
10 | const themes = {
11 |   oneDark,
12 |   oneLight,
13 |   defaultTheme,
14 |   github,
15 |   solarizedLight,
16 |   solarizedDark,
17 |   kustomLight,
18 |   kustomDark,
19 | };
20 | 
21 | const changeTheme = (e) => {
22 |   const theme = e.target.value;
23 |   const demo = document.querySelector(e.target.dataset.target);
24 |   demo.theme = themes[theme];
25 | };
26 | 
27 | const selects = document.querySelectorAll('select');
28 | [].forEach.call(selects, (select) => {
29 |   select.addEventListener('change', changeTheme);
30 | });
31 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  6 |     <title>code-sample demo</title>
  7 |     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  8 |     <script type="module" src="../themes/one-dark.js"></script>
  9 |     <script type="module" src="../code-sample.js"></script>
 10 |     <script type="module" src="./demo.js"></script>
 11 |     <script type="module" src="code-sample-theme.js"></script>
 12 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400">
 13 |     <link rel="stylesheet" href="css/demo.css">
 14 |     <style>
 15 |       code-sample + code-sample { margin-top: 20px; }
 16 |       .navy-bg { --code-sample-background: #000D25; }
 17 |       .white-bg { --code-sample-background: #eeeef1; }
 18 |     </style>
 19 |   </head>
 20 |   <body>
 21 |     <div class="wrapper">
 22 |       <div class="demo">
 23 |         <div class="demo-text">
 24 |           <h1>HTML and inline JavaScript</h1>
 25 |           <label class="select">
 26 |             <span>Theme</span>
 27 |             <select name="theme" data-target="#demo-1">
 28 |               <option value="oneDark" selected>One Dark</option>
 29 |               <option value="oneLight">One Light</option>
 30 |               <option value="defaultTheme">Default</option>
 31 |               <option value="github">Github</option>
 32 |               <option value="solarizedLight">Solarized Light</option>
 33 |               <option value="solarizedDark">Solarized Dark</option>
 34 |               <option value="kustomLight">Kustom Light</option>
 35 |               <option value="kustomDark">Kustom Dark</option>
 36 |             </select>
 37 |           </label>
 38 |         </div>
 39 | 
 40 |         <div class="demo-sample">
 41 |           <code-sample id="demo-1">
 42 |             <template>
 43 |               <custom-element boolean-attribute>content</custom-element>
 44 | 
 45 |               <div class="something">
 46 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet distinctio nam, possimus officia error delectus impedit libero corrupti, sunt, sapiente suscipit. Esse, quisquam tempore similique eveniet veritatis pariatur adipisci sit.</p>
 47 |               </div>
 48 | 
 49 |               <script>
 50 |                 alert('hola');
 51 |               </script>
 52 |             </template>
 53 |           </code-sample>
 54 |         </div>
 55 |       </div>
 56 | 
 57 |       <div class="demo">
 58 |         <div class="demo-text">
 59 |           <h1>JavaScript</h1>
 60 |           <label class="select">
 61 |             <span>Theme</span>
 62 |             <select name="theme" data-target="#demo-2">
 63 |               <option value="oneDark" selected>One Dark</option>
 64 |               <option value="oneLight">One Light</option>
 65 |               <option value="defaultTheme">Default</option>
 66 |               <option value="github">Github</option>
 67 |               <option value="solarizedLight">Solarized Light</option>
 68 |               <option value="solarizedDark">Solarized Dark</option>
 69 |               <option value="kustomLight">Kustom Light</option>
 70 |               <option value="kustomDark">Kustom Dark</option>
 71 |             </select>
 72 |           </label>
 73 |         </div>
 74 | 
 75 |         <div class="demo-sample">
 76 |           <code-sample id="demo-2">
 77 |             <template>
 78 |               const something = param => {
 79 |                 // comment
 80 |                 let a = `${param}-something`;
 81 |               }
 82 |             </template>
 83 |           </code-sample>
 84 |         </div>
 85 |       </div>
 86 | 
 87 |       <div class="demo">
 88 |         <div class="demo-text">
 89 |           <h1>Tagged template literals</h1>
 90 |           <label class="select">
 91 |             <span>Theme</span>
 92 |             <select name="theme" data-target="#demo-3">
 93 |               <option value="oneDark" selected>One Dark</option>
 94 |               <option value="oneLight">One Light</option>
 95 |               <option value="defaultTheme">Default</option>
 96 |               <option value="github">Github</option>
 97 |               <option value="solarizedLight">Solarized Light</option>
 98 |               <option value="solarizedDark">Solarized Dark</option>
 99 |               <option value="kustomLight">Kustom Light</option>
100 |               <option value="kustomDark">Kustom Dark</option>
101 |             </select>
102 |           </label>
103 |         </div>
104 | 
105 |         <div class="demo-sample">
106 |           <p>Set the <code>type</code> attribute to <b>js</b>, <b>jsx</b> or <b>javascript</b> when using tagged template literals.</p>
107 | 
108 |           <code-sample type="js" id="demo-3">
109 |             <template>
110 |               class MyElement extends PolymerElement {
111 |                 static get template() {
112 |                   return html`
113 |                     <style>
114 |                       :host {
115 |                         display: block;
116 |                       }
117 |                     </style>
118 |                     <p>Hello world!</p>
119 |                   `;
120 |                 }
121 |               }
122 |             </template>
123 |           </code-sample>
124 |         </div>
125 |       </div>
126 | 
127 |       <div class="demo">
128 |         <div class="demo-text">
129 |           <h1>CSS</h1>
130 |           <label class="select">
131 |             <span>Theme</span>
132 |             <select name="theme" data-target="#demo-4">
133 |               <option value="oneDark" selected>One Dark</option>
134 |               <option value="oneLight">One Light</option>
135 |               <option value="defaultTheme">Default</option>
136 |               <option value="github">Github</option>
137 |               <option value="solarizedLight">Solarized Light</option>
138 |               <option value="solarizedDark">Solarized Dark</option>
139 |               <option value="kustomLight">Kustom Light</option>
140 |               <option value="kustomDark">Kustom Dark</option>
141 |             </select>
142 |           </label>
143 |         </div>
144 | 
145 |         <div class="demo-sample">
146 |           <code-sample id="demo-4">
147 |             <template>
148 |               .my-style { display: block; }
149 | 
150 |               :host {
151 |                 display: flex;
152 |                 box-sizing: border-box;
153 |               }
154 | 
155 |               :host([hidden]) { display: none; }
156 |             </template>
157 |           </code-sample>
158 |         </div>
159 |       </div>
160 | 
161 |       <div class="demo">
162 |         <div class="demo-text">
163 |           <h1>Rendered code</h1>
164 |           <label class="select">
165 |             <span>Theme</span>
166 |             <select name="theme" data-target="#demo-5">
167 |               <option value="oneDark" selected>One Dark</option>
168 |               <option value="oneLight">One Light</option>
169 |               <option value="defaultTheme">Default</option>
170 |               <option value="github">Github</option>
171 |               <option value="solarizedLight">Solarized Light</option>
172 |               <option value="solarizedDark">Solarized Dark</option>
173 |               <option value="kustomLight">Kustom Light</option>
174 |               <option value="kustomDark">Kustom Dark</option>
175 |             </select>
176 |           </label>
177 |         </div>
178 | 
179 |         <div class="demo-sample">
180 |           <p>Use the boolean attribute <code>render</code> to render the code inside the <code>&lt;template&gt;</code> tag.</p>
181 |           <code-sample render id="demo-5">
182 |             <template>
183 |               <style>
184 |                 button.btn {
185 |                   all: initial;
186 |                   font: caption;
187 |                   font-size: 100%;
188 |                   padding: 10px 20px 12px;
189 |                   cursor: pointer;
190 |                   outline: none;
191 |                   border-radius: 0.25em;
192 |                   box-shadow: inset 0 -0.25em 0 rgba(0, 0, 0, 0.2);
193 |                   color: #fff;
194 |                   background-color: #006dbe;
195 |                   position: relative;
196 |                 }
197 |                 button.btn:active {
198 |                   top: 1px;
199 |                   background-color: #0056ab;
200 |                 }
201 |               </style>
202 | 
203 |               <button class="btn">Hi unicorn!</button>
204 |             </template>
205 |           </code-sample>
206 |         </div>
207 |       </div>
208 | 
209 |       <div class="demo">
210 |         <div class="demo-text">
211 |           <h1>Copy to clipboard button</h1>
212 |           <label class="select">
213 |             <span>Theme</span>
214 |             <select name="theme" data-target="#demo-6">
215 |               <option value="oneDark" selected>One Dark</option>
216 |               <option value="oneLight">One Light</option>
217 |               <option value="defaultTheme">Default</option>
218 |               <option value="github">Github</option>
219 |               <option value="solarizedLight">Solarized Light</option>
220 |               <option value="solarizedDark">Solarized Dark</option>
221 |               <option value="kustomLight">Kustom Light</option>
222 |               <option value="kustomDark">Kustom Dark</option>
223 |             </select>
224 |           </label>
225 |         </div>
226 | 
227 |         <div class="demo-sample">
228 |           <p>Use the boolean attribute <code>copy-clipboard-button</code> to display a &quot;copy&quot; button on the top right corner.</p>
229 |           <code-sample copy-clipboard-button id="demo-6">
230 |             <template>
231 |               <div class="some-class">
232 |                 <p>Lorem ipsum dolor…</p>
233 |               </div>
234 |             </template>
235 |           </code-sample>
236 |         </div>
237 |       </div>
238 | 
239 |       <div class="demo">
240 |         <div class="demo-text">
241 |           <h1>Change content dynamically</h1>
242 |           <label class="select">
243 |             <span>Theme</span>
244 |             <select name="theme" data-target="#sample">
245 |               <option value="oneDark" selected>One Dark</option>
246 |               <option value="oneLight">One Light</option>
247 |               <option value="defaultTheme">Default</option>
248 |               <option value="github">Github</option>
249 |               <option value="solarizedLight">Solarized Light</option>
250 |               <option value="solarizedDark">Solarized Dark</option>
251 |               <option value="kustomLight">Kustom Light</option>
252 |               <option value="kustomDark">Kustom Dark</option>
253 |             </select>
254 |           </label>
255 |         </div>
256 |         <div class="demo-sample">
257 |           <p>
258 |             <button class="demo-btn" id="changeContent">Change content</button>
259 |           </p>
260 |           <code-sample id="sample">
261 |             <template>
262 |               <p>Initial content.</p>
263 |             </template>
264 |           </code-sample>
265 |         </div>
266 |       </div>
267 | 
268 |       <div class="demo">
269 |         <div class="demo-text">
270 |           <h1>Custom background colors</h1>
271 |           <label class="select">
272 |             <span>Theme</span>
273 |             <select name="theme" data-target="#demo-8">
274 |               <option value="oneDark" selected>One Dark</option>
275 |               <option value="oneLight">One Light</option>
276 |               <option value="defaultTheme">Default</option>
277 |               <option value="github">Github</option>
278 |               <option value="solarizedLight">Solarized Light</option>
279 |               <option value="solarizedDark">Solarized Dark</option>
280 |               <option value="kustomLight">Kustom Light</option>
281 |               <option value="kustomDark">Kustom Dark</option>
282 |             </select>
283 |           </label>
284 |         </div>
285 | 
286 |         <div class="demo-sample">
287 |           <code-sample class="navy-bg" id="demo-8">
288 |             <template>
289 |               <resizable-panels>
290 |                 <div class="panel-1">lorem...</div>
291 |                 <div class="panel-2">ipsum...</div>
292 |                 <div class="panel-3">dolor...</div>
293 |               </resizable-panels>
294 |             </template>
295 |           </code-sample>
296 | 
297 |           <code-sample class="white-bg">
298 |             <template>
299 |               function algo(param) {
300 |                 alert('helloooow');
301 |               }
302 |             </template>
303 |           </code-sample>
304 |         </div>
305 |       </div>
306 |     </div>
307 | 
308 |     <script>
309 |       (function(d) {
310 |         const btn = d.querySelector('#changeContent');
311 |         const sample = d.querySelector('#sample');
312 |         const obj = {
313 |           prop1: 'value',
314 |           prop2: {
315 |             subProp1: 'something',
316 |             subProp2: true,
317 |             subProp3: [{
318 |               subSub1: 'a',
319 |               subSub2: 'b'
320 |             }, {
321 |               subSub1: 'c',
322 |               subSub2: 'd'
323 |             }]
324 |           }
325 |         };
326 | 
327 |         let initial = true;
328 | 
329 |         function customContent() {
330 |           const content = (initial)
331 |             ? `<template>
332 |                 ${JSON.stringify(obj, null, 2)}
333 |               </template>`
334 |             : `<template>
335 |                 <p>Initial content.</p>
336 |               </template>`;
337 | 
338 |           initial = !initial;
339 |           return content;
340 |         }
341 | 
342 |         function changeContent() {
343 |           sample.innerHTML = customContent();
344 |         }
345 | 
346 |         btn.addEventListener('click', changeContent);
347 |       }(document));
348 |     </script>
349 |   </body>
350 | </html>
351 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const gulp = require('gulp');
  4 | const log = require('fancy-log');
  5 | const del = require('del');
  6 | const browserSync = require('browser-sync').create();
  7 | const portfinder = require('portfinder');
  8 | const {spawn} = require('child_process');
  9 | const inlineSource = require('gulp-inline-source');
 10 | const postcss = require('gulp-postcss');
 11 | const autoprefixer = require('autoprefixer');
 12 | const pxtorem = require('postcss-pixels-to-rem');
 13 | const eslint = require('gulp-eslint');
 14 | const config = require('./buildconfig');
 15 | const manifest = require('./package.json');
 16 | 
 17 | const COMPONENT_PATH = manifest.name;
 18 | const COMPONENT_NAME = manifest.main;
 19 | 
 20 | const DIST_DIRECTORY = '.';
 21 | const TMP_DIRECTORY = '.tmp/';
 22 | 
 23 | const WATCHED_DIST_FILES = [
 24 |   COMPONENT_NAME,
 25 |   'index.html',
 26 |   'demo/**/*',
 27 |   'test/**/*',
 28 | ].concat(config.watch.dist || []);
 29 | 
 30 | gulp.task('clean', () => del.sync([TMP_DIRECTORY]));
 31 | 
 32 | const startServer = (port) => {
 33 |   const polymerCliParams = ['serve', '--npm', '-p', port];
 34 |   const polymerServe = spawn('polymer', polymerCliParams);
 35 | 
 36 |   polymerServe.stdout.on('data', (data) => {
 37 |     log(`${data}`);
 38 |     browserSync.init(getServerConfig(port));
 39 |   });
 40 | 
 41 |   polymerServe.stderr.on('data', (data) => {
 42 |     log(`Error: ${data}`);
 43 |   });
 44 | 
 45 |   polymerServe.on('close', (code) => {
 46 |     log(`child process exited with code ${code}`);
 47 |   });
 48 | };
 49 | 
 50 | const getServerConfig = (port) => {
 51 |   return JSON.parse(
 52 |     JSON.stringify(config.server)
 53 |       .replace(/{{component}}/g, COMPONENT_PATH)
 54 |       .replace(/{{port}}/g, port)
 55 |     );
 56 | };
 57 | 
 58 | gulp.task('styles', () => {
 59 |   return gulp.src(['src/*.css'])
 60 |     .pipe(postcss([
 61 |       pxtorem(config.pxtorem),
 62 |       autoprefixer(config.autoprefixer),
 63 |     ]))
 64 |     .pipe(gulp.dest(TMP_DIRECTORY));
 65 | });
 66 | 
 67 | gulp.task('eslint', () => {
 68 |   return gulp.src(['src/*.js'])
 69 |     .pipe(eslint())
 70 |     .pipe(eslint.format())
 71 |     .pipe(gulp.dest(TMP_DIRECTORY));
 72 | });
 73 | 
 74 | gulp.task('build:dist', ['clean', 'styles', 'eslint'], () => {
 75 |   return gulp.src(['.tmp/**/*.js'])
 76 |     .pipe(inlineSource(config.inlineSource))
 77 |     .pipe(gulp.dest(DIST_DIRECTORY));
 78 | });
 79 | 
 80 | gulp.task('start-server', () => {
 81 |   return portfinder.getPortPromise()
 82 |     .then(startServer)
 83 |     .catch((err) => log(err));
 84 | });
 85 | 
 86 | gulp.task('watch:sources', () => {
 87 |   gulp.watch(['src/*.{js, css}'], ['styles', 'eslint', 'build:dist']);
 88 | });
 89 | 
 90 | gulp.task('watch:dist', () => {
 91 |   gulp.watch(WATCHED_DIST_FILES).on('change', browserSync.reload);
 92 | });
 93 | 
 94 | gulp.task('serve', [
 95 |   'build:dist',
 96 |   'start-server',
 97 |   'watch:sources',
 98 |   'watch:dist',
 99 | ]);
100 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="refresh" content="0;url=demo/" />
 6 |     <title>code-sample demo</title>
 7 |   </head>
 8 |   <body>
 9 |     <!--
10 |         Visit demo/index.html to see live examples of your element running.
11 |         This page will automatically redirect you there when run in the browser
12 |         with `polymer serve --open`.
13 |       -->
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "description": "Wrapper element for highlight.js",
 3 |   "keywords": [
 4 |     "polymer",
 5 |     "web-component",
 6 |     "syntax highlighting",
 7 |     "highlight.js",
 8 |     "highlight",
 9 |     "code",
10 |     "pre",
11 |     "theme"
12 |   ],
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git://github.com/kcmr/code-sample.git"
16 |   },
17 |   "homepage": "https://github.com/kcmr/code-sample/",
18 |   "name": "@kuscamara/code-sample",
19 |   "version": "3.0.2",
20 |   "main": "code-sample.js",
21 |   "author": "Kus Cámara <kus.camara@gmail.com>",
22 |   "license": "MIT",
23 |   "dependencies": {
24 |     "@polymer/polymer": "^3.0.0"
25 |   },
26 |   "devDependencies": {
27 |     "@webcomponents/webcomponentsjs": "^2.0.2",
28 |     "autoprefixer": "^9.1.0",
29 |     "browser-sync": "^2.24.4",
30 |     "del": "^3.0.0",
31 |     "eslint": "^5.3.0",
32 |     "eslint-config-google": "^0.9.1",
33 |     "fancy-log": "^1.3.2",
34 |     "gulp": "^3.9.1",
35 |     "gulp-eslint": "^5.0.0",
36 |     "gulp-inline-source": "^3.2.0",
37 |     "gulp-postcss": "^8.0.0",
38 |     "portfinder": "^1.0.13",
39 |     "postcss-pixels-to-rem": "^0.8.0",
40 |     "wct-browser-legacy": "~1.0.0",
41 |     "wct-istanbul": "~0.14.3",
42 |     "web-component-tester": "~6.6.0"
43 |   },
44 |   "scripts": {
45 |     "start": "gulp serve",
46 |     "test:sauce": "wct --module-resolution=node --npm",
47 |     "test": "wct --module-resolution=node --npm --skip-plugin sauce",
48 |     "lint:javascript": "eslint . --ext js --fix"
49 |   },
50 |   "bugs": {
51 |     "url": "https://github.com/kcmr/code-sample/issues"
52 |   },
53 |   "directories": {
54 |     "test": "test"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/code-sample.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | :host([hidden]),
 6 | [hidden] {
 7 |   display: none;
 8 | }
 9 | 
10 | pre {
11 |   margin: 0;
12 |   @apply --code-sample-pre;
13 | }
14 | 
15 | pre, code {
16 |   font-family: var(--code-sample-font-family, Operator Mono, Inconsolata, Roboto Mono, monaco, consolas, monospace);
17 |   font-size: var(--code-sample-font-size, 14px);
18 | }
19 | 
20 | .hljs {
21 |   padding: 0 20px;
22 |   line-height: var(--code-sample-line-height, 1.3);
23 |   @apply --code-sample-hljs;
24 | }
25 | 
26 | .demo:not(:empty) {
27 |   padding: var(--code-sample-demo-padding, 0 0 20px);
28 |   @apply --code-sample-demo-not-empty;
29 | }
30 | 
31 | .demo {
32 |   @apply --code-sample-demo;
33 | }
34 | 
35 | #code-container {
36 |   position: relative;
37 |   @apply --code-sample-code-container;
38 | }
39 | 
40 | #code-container:hover {
41 |   @apply --code-sample-code-container-hover;
42 | }
43 | 
44 | #code-container:hover > button {
45 |   @apply --code-sample-code-container-hover-button;
46 | }
47 | 
48 | button {
49 |   background: var(--code-sample-copy-button-bg-color, #e0e0e0);
50 |   border: none;
51 |   cursor: pointer;
52 |   display: block;
53 |   position: absolute;
54 |   right: 0;
55 |   top: 0;
56 |   text-transform: uppercase;
57 |   @apply --code-sample-copy-clipboard-button;
58 | }


--------------------------------------------------------------------------------
/src/code-sample.js:
--------------------------------------------------------------------------------
  1 | import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
  2 | import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
  3 | import {oneDark} from './themes/one-dark.js';
  4 | import './vendor/highlight/highlight.pack.js';
  5 | 
  6 | /**
  7 |  * `<code-sample>` uses [highlight.js](https://highlightjs.org/) for syntax highlighting.
  8 |  * @polymer
  9 |  * @customElement
 10 |  * @extends {PolymerElement}
 11 |  * @demo https://kcmr.github.io/code-sample/
 12 |  */
 13 | class CodeSample extends PolymerElement {
 14 |   static get template() {
 15 |     return html`
 16 |     ${this.constructor.theme || oneDark}
 17 |     <link rel="stylesheet" href="code-sample.css" include="code-sample-theme" inline id="baseStyle">
 18 | 
 19 |     <div id="demo" class="demo"></div>
 20 |     <slot id="content"></slot>
 21 | 
 22 |     <div id="code-container">
 23 |       <button
 24 |         type="button"
 25 |         hidden="[[!copyClipboardButton]]"
 26 |         id="copyButton"
 27 |         title="Copy to clipboard"
 28 |         on-click="_copyToClipboard">Copy</button>
 29 |       <pre id="code"></pre>
 30 |     </div>
 31 |     `;
 32 |   }
 33 | 
 34 |   static get properties() {
 35 |     return {
 36 |       // Set to true to show a copy to clipboard button.
 37 |       copyClipboardButton: {
 38 |         type: Boolean,
 39 |         value: false,
 40 |       },
 41 |       // Tagged template literal with custom styles.
 42 |       // Only supported in Shadow DOM.
 43 |       theme: {
 44 |         type: String,
 45 |         observer: '_themeChanged',
 46 |       },
 47 |       // Set to true to render the code inside the template.
 48 |       render: {
 49 |         type: Boolean,
 50 |         value: false,
 51 |       },
 52 |       // Code type (optional). (eg.: html, js, css)
 53 |       // Options are the same as the available classes for `<code>` tag using highlight.js
 54 |       type: {
 55 |         type: String,
 56 |       },
 57 |     };
 58 |   }
 59 | 
 60 |   _themeChanged(theme) {
 61 |     if (theme && this._themeCanBeChanged()) {
 62 |       const previousTheme = this.shadowRoot.querySelector('style:not(#baseStyle)');
 63 |       this.shadowRoot.replaceChild(
 64 |         document.importNode(theme.content, true),
 65 |         previousTheme
 66 |       );
 67 |     }
 68 |   }
 69 | 
 70 |   _themeCanBeChanged() {
 71 |     if (window.ShadyCSS) {
 72 |       console.error('<code-sample>:', 'Theme changing is not supported in Shady DOM.');
 73 |       return;
 74 |     }
 75 | 
 76 |     if (this.theme.tagName !== 'TEMPLATE') {
 77 |       console.error('<code-sample>:', 'theme must be a template');
 78 |       return;
 79 |     }
 80 | 
 81 |     return true;
 82 |   }
 83 | 
 84 |   connectedCallback() {
 85 |     super.connectedCallback();
 86 |     setTimeout(() => {
 87 |       if (this.querySelector('template')) {
 88 |         this._observer = new FlattenedNodesObserver(this.$.content, () => this._updateContent());
 89 |       } else if (this.childNodes.length) {
 90 |         console.error('<code-sample>:', 'content must be provided inside a <template> tag');
 91 |       }
 92 |     });
 93 |   }
 94 | 
 95 |   disconnectedCallback() {
 96 |     if (this._observer) {
 97 |       this._observer.disconnect();
 98 |       this._observer = null;
 99 |     }
100 |   }
101 | 
102 |   _updateContent() {
103 |     if (this._code) this._code.parentNode.removeChild(this._code);
104 |     if (this._demo) this.$.demo.innerHTML = '';
105 | 
106 |     const template = this._getCodeTemplate();
107 | 
108 |     if (this.render) {
109 |       this._demo = this.$.demo.appendChild(
110 |         document.importNode(template.content, true)
111 |       );
112 |     }
113 | 
114 |     this._highlight(template.innerHTML);
115 |   }
116 | 
117 |   _getCodeTemplate() {
118 |     const nodes = FlattenedNodesObserver.getFlattenedNodes(this.$.content);
119 |     return [].filter.call(nodes, (node) => node.nodeType === Node.ELEMENT_NODE)[0];
120 |   }
121 | 
122 |   _highlight(str) {
123 |     this._code = document.createElement('code');
124 |     if (this.type) this._code.classList.add(this.type);
125 |     this._code.innerHTML = this._entitize(this._cleanIndentation(str));
126 |     this.$.code.appendChild(this._code);
127 |     hljs.highlightBlock(this._code);
128 |   }
129 | 
130 |   _cleanIndentation(str) {
131 |     const pattern = str.match(/\s*\n[\t\s]*/);
132 |     return str.replace(new RegExp(pattern, 'g'), '\n');
133 |   }
134 | 
135 |   _entitize(str) {
136 |     return String(str)
137 |       .replace(/&lt;/g, '<')
138 |       .replace(/&gt;/g, '>')
139 |       .replace(/=""/g, '')
140 |       .replace(/=&gt;/g, '=>')
141 |       .replace(/</g, '&lt;')
142 |       .replace(/>/g, '&gt;')
143 |       .replace(/"/g, '&quot;');
144 |   }
145 | 
146 |   _copyToClipboard(event) {
147 |     const copyButton = event.target;
148 | 
149 |     const textarea = this._textAreaWithClonedContent();
150 |     textarea.select();
151 | 
152 |     try {
153 |       document.execCommand('copy', false);
154 |       copyButton.textContent = 'Done';
155 |     } catch (err) {
156 |       console.error(err);
157 |       copyButton.textContent = 'Error';
158 |     }
159 | 
160 |     textarea.remove();
161 | 
162 |     setTimeout(() => {
163 |       copyButton.textContent = 'Copy';
164 |     }, 1000);
165 |   }
166 | 
167 |   _textAreaWithClonedContent() {
168 |     const textarea = document.createElement('textarea');
169 |     document.body.appendChild(textarea);
170 |     textarea.value = this._cleanIndentation(this._getCodeTemplate().innerHTML);
171 | 
172 |     return textarea;
173 |   }
174 | }
175 | 
176 | customElements.define('code-sample', CodeSample);
177 | 


--------------------------------------------------------------------------------
/test/code-sample_test.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  6 |     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  7 |     <script src="../node_modules/wct-browser-legacy/browser.js"></script>
  8 |     <script type="module" src="../code-sample.js"></script>
  9 |   </head>
 10 |   <body>
 11 |     <test-fixture id="default">
 12 |       <template>
 13 |         <code-sample>
 14 |           <template>
 15 |             <p>Some content</p>
 16 |           </template>
 17 |         </code-sample>
 18 |       </template>
 19 |     </test-fixture>
 20 | 
 21 |     <test-fixture id="noTpl">
 22 |       <template>
 23 |         <code-sample>
 24 |           <p>Some content</p>
 25 |         </code-sample>
 26 |       </template>
 27 |     </test-fixture>
 28 | 
 29 |     <test-fixture id="empty">
 30 |       <template>
 31 |         <code-sample></code-sample>
 32 |       </template>
 33 |     </test-fixture>
 34 | 
 35 |     <test-fixture id="render">
 36 |       <template>
 37 |         <code-sample render>
 38 |           <template>
 39 |             <p>iuuu</p>
 40 |           </template>
 41 |         </code-sample>
 42 |       </template>
 43 |     </test-fixture>
 44 | 
 45 |     <test-fixture id="copy">
 46 |       <template>
 47 |         <code-sample copy-clipboard-button>
 48 |           <template>
 49 |             <p>wiaa</p>
 50 |           </template>
 51 |         </code-sample>
 52 |       </template>
 53 |     </test-fixture>
 54 | 
 55 |     <script type="module">
 56 |       suite('<code-sample> without content inside a <template> tag', () => {
 57 |         setup(() => {fixture('noTpl')});
 58 | 
 59 |         test('logs an error in console', done => {
 60 |           let consoleErrorStub = sinon.stub(window.console, 'error');
 61 |           flush(() => {
 62 |             assert.isTrue(consoleErrorStub.called);
 63 |             consoleErrorStub.restore();
 64 |             done();
 65 |           });
 66 |         });
 67 |       });
 68 | 
 69 |       suite('<code-sample> empty', () => {
 70 |         setup(() => {fixture('empty')});
 71 | 
 72 |         test('does not log an error in console', done => {
 73 |           let consoleErrorStub = sinon.stub(window.console, 'error');
 74 |           flush(() => {
 75 |             assert.isFalse(consoleErrorStub.called);
 76 |             consoleErrorStub.restore();
 77 |             done();
 78 |           });
 79 |         });
 80 |       });
 81 | 
 82 |       suite('<code-sample> with content inside a <template> tag', () => {
 83 |         let el;
 84 |         let hljsStub;
 85 |         let code;
 86 | 
 87 |         setup((done) => {
 88 |           el = fixture('default');
 89 |           hljsStub = sinon.stub(hljs, 'highlightBlock');
 90 |           flush(() => {
 91 |             code = el.shadowRoot.querySelector('code');
 92 |             done();
 93 |           });
 94 |         });
 95 | 
 96 |         teardown(() => {
 97 |           hljsStub.restore();
 98 |         });
 99 | 
100 |         test('creates a <code> element with the parsed (entitized) content innerHTML', () => {
101 |           assert.equal(code.innerHTML.trim(), '&lt;p&gt;Some content&lt;/p&gt;');
102 |         });
103 | 
104 |         test('calls hljs.highlightBlock() with <code> node as param', () => {
105 |           assert.equal(hljsStub.getCall(0).args[0], code);
106 |         });
107 |       });
108 | 
109 |       suite('<code-sample render>', () => {
110 |         let el;
111 |         setup(() => {
112 |           el = fixture('render');
113 |         });
114 | 
115 |         test('renders the code inside a <template>', (done) => {
116 |           let demo = el.shadowRoot.querySelector('#demo');
117 |           let tmpl = el.querySelector('template');
118 |           flush(() => {
119 |             demo.querySelector('p').removeAttribute('class');
120 |             assert.equal(demo.innerHTML, tmpl.innerHTML);
121 |             done();
122 |           });
123 |         });
124 |       });
125 | 
126 |       suite('type attribute', () => {
127 |         let el;
128 |         setup(() => {
129 |           el = fixture('default');
130 |         });
131 | 
132 |         test('sets the type value as className for the code element', (done) => {
133 |           el.type = 'any';
134 | 
135 |           flush(() => {
136 |             let code = el.shadowRoot.querySelector('code');
137 |             assert.isTrue(code.classList.contains('any'));
138 |             done();
139 |           });
140 |         });
141 |       });
142 | 
143 |       suite('<code-sample copy-clipboard-button>', () => {
144 |         let el;
145 |         let btn;
146 |         setup(() => {
147 |           el = fixture('copy');
148 |           btn = el.shadowRoot.querySelector('button');
149 |         });
150 | 
151 |         test('copy button is visible', () => {
152 |           assert.isFalse(btn.hasAttribute('hidden'));
153 |         });
154 | 
155 |         test('copy button is not visible if copyClipboardButton is false', (done) => {
156 |           el.removeAttribute('copy-clipboard-button');
157 |           flush(() => {
158 |             assert.isTrue(btn.hasAttribute('hidden'));
159 |             done();
160 |           });
161 |         });
162 | 
163 |         test('clicking on copy button copies code to clipboard', () => {
164 |           let stub = sinon.stub(document, 'execCommand');
165 |           btn.click();
166 |           assert.equal(stub.getCall(0).args[0], 'copy');
167 |         });
168 | 
169 |         test('copy button text changes to "Done" after clicking on it', () => {
170 |           let initialText = btn.textContent;
171 |           btn.click();
172 |           assert.notEqual(btn.textContent, initialText);
173 |           assert.equal(btn.textContent, 'Done');
174 |         });
175 | 
176 |         test('copy button text is reset to "Copy" after changing to "Done"', (done) => {
177 |           window.setTimeout = function(cb) { cb.call(el); }
178 |           btn.click();
179 |           flush(() => {
180 |             assert.equal(btn.textContent, 'Copy');
181 |             done();
182 |           });
183 |         });
184 |       });
185 | 
186 |       suite('theme', () => {
187 |         let el;
188 |         let replaceChildStub;
189 | 
190 |         setup(() => {
191 |           el = fixture('default');
192 |           replaceChildStub = sinon.stub(el.shadowRoot, 'replaceChild');
193 |         });
194 | 
195 |         if (window.ShadyDOM) {
196 |           test('setting theme throws an error in console in browsers without Shadow DOM support', () => {
197 |             let consoleErrorStub = sinon.stub(window.console, 'error');
198 |             el.theme = 'any';
199 |             assert.notEqual(replaceChildStub.called);
200 |             assert.equal(consoleErrorStub.getCall(0).args[1], 'Theme changing is not supported in Shady DOM.', 'an error is thrown in console');
201 |             consoleErrorStub.restore();
202 |           });
203 |         } else {
204 |           test('setting theme changes the default theme (oneDark)', () => {
205 |             const defaultTheme = el.shadowRoot.querySelector('style');
206 | 
207 |             const newTheme = document.createElement('template');
208 |             newTheme.innerHTML = `<style>:host { display: block }</style>`;
209 | 
210 |             el.theme = newTheme;
211 |             assert.isTrue(replaceChildStub.called);
212 |           });
213 | 
214 |           test('theme is not replaced if is not a valid template', () => {
215 |             let consoleErrorStub = sinon.stub(window.console, 'error');
216 |             el.theme = 'any';
217 |             assert.notEqual(replaceChildStub.called);
218 |             assert.equal(consoleErrorStub.getCall(0).args[1], 'theme must be a template', 'an error is thrown in console');
219 |             consoleErrorStub.restore();
220 |           });
221 |         }
222 |       });
223 |     </script>
224 |   </body>
225 | </html>
226 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 | 
 7 |     <script src="../node_modules/wct-browser-legacy/browser.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |       // Load and run all tests (.html, .js):
12 |       WCT.loadSuites([
13 |         'code-sample_test.html'
14 |       ]);
15 |     </script>
16 | 
17 | </body></html>
18 | 


--------------------------------------------------------------------------------
/themes/default.js:
--------------------------------------------------------------------------------
  1 | import {html} from '@polymer/polymer/polymer-element.js';
  2 | 
  3 | export const defaultTheme = html`
  4 | <style>
  5 |   /* Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org> */
  6 | 
  7 |   .hljs {
  8 |     display: block;
  9 |     overflow-x: auto;
 10 |     background: var(--code-sample-background, #F0F0F0);
 11 |   }
 12 | 
 13 | 
 14 |   /* Base color: saturation 0; */
 15 | 
 16 |   .hljs,
 17 |   .hljs-subst {
 18 |     color: var(--code-sample-color, #444);
 19 |   }
 20 | 
 21 |   .hljs-comment {
 22 |     color: #888888;
 23 |   }
 24 | 
 25 |   .hljs-keyword,
 26 |   .hljs-attribute,
 27 |   .hljs-selector-tag,
 28 |   .hljs-meta-keyword,
 29 |   .hljs-doctag,
 30 |   .hljs-name {
 31 |     font-weight: bold;
 32 |   }
 33 | 
 34 | 
 35 |   /* User color: hue: 0 */
 36 | 
 37 |   .hljs-type,
 38 |   .hljs-string,
 39 |   .hljs-number,
 40 |   .hljs-selector-id,
 41 |   .hljs-selector-class,
 42 |   .hljs-quote,
 43 |   .hljs-template-tag,
 44 |   .hljs-deletion {
 45 |     color: #880000;
 46 |   }
 47 | 
 48 |   .hljs-title,
 49 |   .hljs-section {
 50 |     color: #880000;
 51 |     font-weight: bold;
 52 |   }
 53 | 
 54 |   .hljs-regexp,
 55 |   .hljs-symbol,
 56 |   .hljs-variable,
 57 |   .hljs-template-variable,
 58 |   .hljs-link,
 59 |   .hljs-selector-attr,
 60 |   .hljs-selector-pseudo {
 61 |     color: #BC6060;
 62 |   }
 63 | 
 64 | 
 65 |   /* Language color: hue: 90; */
 66 | 
 67 |   .hljs-literal {
 68 |     color: #78A960;
 69 |   }
 70 | 
 71 |   .hljs-built_in,
 72 |   .hljs-bullet,
 73 |   .hljs-code,
 74 |   .hljs-addition {
 75 |     color: #397300;
 76 |   }
 77 | 
 78 | 
 79 |   /* Meta color: hue: 200 */
 80 | 
 81 |   .hljs-meta {
 82 |     color: #1f7199;
 83 |   }
 84 | 
 85 |   .hljs-meta-string {
 86 |     color: #4d99bf;
 87 |   }
 88 | 
 89 | 
 90 |   /* Misc effects */
 91 | 
 92 |   .hljs-emphasis {
 93 |     font-style: italic;
 94 |   }
 95 | 
 96 |   .hljs-strong {
 97 |     font-weight: bold;
 98 |   }
 99 | </style>`;
100 | 


--------------------------------------------------------------------------------
/themes/github.js:
--------------------------------------------------------------------------------
  1 | import {html} from '@polymer/polymer/polymer-element.js';
  2 | 
  3 | export const github = html`
  4 | <style>
  5 |   /* github.com style (c) Vasily Polovnyov <vast@whiteants.net> */
  6 | 
  7 |   .hljs {
  8 |     display: block;
  9 |     overflow-x: auto;
 10 |     color: var(--code-sample-color, #333);
 11 |     background: var(--code-sample-background, #f8f8f8);
 12 |   }
 13 | 
 14 |   .hljs-comment,
 15 |   .hljs-quote {
 16 |     color: #998;
 17 |     font-style: italic;
 18 |   }
 19 | 
 20 |   .hljs-keyword,
 21 |   .hljs-selector-tag,
 22 |   .hljs-subst {
 23 |     color: #333;
 24 |     font-weight: bold;
 25 |   }
 26 | 
 27 |   .hljs-number,
 28 |   .hljs-literal,
 29 |   .hljs-variable,
 30 |   .hljs-template-variable,
 31 |   .hljs-tag .hljs-attr {
 32 |     color: #008080;
 33 |   }
 34 | 
 35 |   .hljs-string,
 36 |   .hljs-doctag {
 37 |     color: #d14;
 38 |   }
 39 | 
 40 |   .hljs-title,
 41 |   .hljs-section,
 42 |   .hljs-selector-id {
 43 |     color: #900;
 44 |     font-weight: bold;
 45 |   }
 46 | 
 47 |   .hljs-subst {
 48 |     font-weight: normal;
 49 |   }
 50 | 
 51 |   .hljs-type,
 52 |   .hljs-class .hljs-title {
 53 |     color: #458;
 54 |     font-weight: bold;
 55 |   }
 56 | 
 57 |   .hljs-tag,
 58 |   .hljs-name,
 59 |   .hljs-attribute {
 60 |     color: #000080;
 61 |     font-weight: normal;
 62 |   }
 63 | 
 64 |   .hljs-regexp,
 65 |   .hljs-link {
 66 |     color: #009926;
 67 |   }
 68 | 
 69 |   .hljs-symbol,
 70 |   .hljs-bullet {
 71 |     color: #990073;
 72 |   }
 73 | 
 74 |   .hljs-built_in,
 75 |   .hljs-builtin-name {
 76 |     color: #0086b3;
 77 |   }
 78 | 
 79 |   .hljs-meta {
 80 |     color: #999;
 81 |     font-weight: bold;
 82 |   }
 83 | 
 84 |   .hljs-deletion {
 85 |     background: #fdd;
 86 |   }
 87 | 
 88 |   .hljs-addition {
 89 |     background: #dfd;
 90 |   }
 91 | 
 92 |   .hljs-emphasis {
 93 |     font-style: italic;
 94 |   }
 95 | 
 96 |   .hljs-strong {
 97 |     font-weight: bold;
 98 |   }
 99 | </style>`;
100 | 


--------------------------------------------------------------------------------
/themes/kustom-dark.js:
--------------------------------------------------------------------------------
 1 | import {html} from '@polymer/polymer/polymer-element.js';
 2 | 
 3 | export const kustomDark = html`
 4 | <style>
 5 |   .hljs {
 6 |     line-height: 1.35;
 7 |     display: block;
 8 |     overflow-x: auto;
 9 |     color: var(--code-sample-color, #D7CCC8);
10 |     background: var(--code-sample-background, #2f1e1b);
11 |   }
12 | 
13 |   .hljs-comment,
14 |   .hljs-quote {
15 |     color: #5c6370;
16 |     font-style: italic;
17 |   }
18 | 
19 |   .hljs-doctag,
20 |   .hljs-keyword,
21 |   .hljs-formula {
22 |     color: #c678dd;
23 |   }
24 | 
25 |   .hljs-section,
26 |   .hljs-name,
27 |   .hljs-selector-tag,
28 |   .hljs-deletion,
29 |   .hljs-subst,
30 |   .hljs-tag {
31 |     color: #FF6F00;
32 |   }
33 | 
34 |   .hljs-string,
35 |   .hljs-regexp,
36 |   .hljs-addition,
37 |   .hljs-attribute,
38 |   .hljs-meta-string,
39 |   .hljs-literal {
40 |     color: #00BCD4;
41 |   }
42 | 
43 |   .hljs-built_in,
44 |   .hljs-class .hljs-title,
45 |   .hljs-params {
46 |     color: #e6c07b;
47 |   }
48 | 
49 |   .hljs-attr,
50 |   .hljs-variable,
51 |   .hljs-template-variable,
52 |   .hljs-type,
53 |   .hljs-selector-class,
54 |   .hljs-selector-attr,
55 |   .hljs-selector-pseudo,
56 |   .hljs-number {
57 |     color: #AFB42B;
58 |   }
59 | 
60 |   .hljs-symbol,
61 |   .hljs-bullet,
62 |   .hljs-link,
63 |   .hljs-meta,
64 |   .hljs-selector-id,
65 |   .hljs-title {
66 |     color: #61aeee;
67 |   }
68 | 
69 |   .hljs-emphasis {
70 |     font-style: italic;
71 |   }
72 | 
73 |   .hljs-strong {
74 |     font-weight: bold;
75 |   }
76 | 
77 |   .hljs-link {
78 |     text-decoration: underline;
79 |   }
80 | </style>`;
81 | 


--------------------------------------------------------------------------------
/themes/kustom-light.js:
--------------------------------------------------------------------------------
 1 | import {html} from '@polymer/polymer/polymer-element.js';
 2 | 
 3 | export const kustomLight = html`
 4 | <style>
 5 |   .hljs {
 6 |     line-height: 1.35;
 7 |     display: block;
 8 |     overflow-x: auto;
 9 |     color: var(--code-sample-color, #505359);
10 |     background: var(--code-sample-background, #f7f7f9);
11 |   }
12 | 
13 |   .hljs-comment,
14 |   .hljs-quote {
15 |     color: #5c6370;
16 |     font-style: italic;
17 |   }
18 | 
19 |   .hljs-doctag,
20 |   .hljs-keyword,
21 |   .hljs-formula {
22 |     color: #c678dd;
23 |   }
24 | 
25 |   .hljs-section,
26 |   .hljs-name,
27 |   .hljs-selector-tag,
28 |   .hljs-deletion,
29 |   .hljs-subst,
30 |   .hljs-tag {
31 |     color: #5b75c5;
32 |   }
33 | 
34 |   .hljs-literal {
35 |     color: #56b6c2;
36 |   }
37 | 
38 |   .hljs-string,
39 |   .hljs-regexp,
40 |   .hljs-addition,
41 |   .hljs-attribute,
42 |   .hljs-meta-string {
43 |     color: #268394;
44 |   }
45 | 
46 |   .hljs-built_in,
47 |   .hljs-class .hljs-title {
48 |     color: #e09306;
49 |   }
50 | 
51 |   .hljs-attr,
52 |   .hljs-variable,
53 |   .hljs-template-variable,
54 |   .hljs-type,
55 |   .hljs-selector-class,
56 |   .hljs-selector-attr,
57 |   .hljs-selector-pseudo,
58 |   .hljs-number {
59 |     color: #d06449;
60 |   }
61 | 
62 |   .hljs-symbol,
63 |   .hljs-bullet,
64 |   .hljs-link,
65 |   .hljs-meta,
66 |   .hljs-selector-id,
67 |   .hljs-title {
68 |     color: #61aeee;
69 |   }
70 | 
71 |   .hljs-emphasis {
72 |     font-style: italic;
73 |   }
74 | 
75 |   .hljs-strong {
76 |     font-weight: bold;
77 |   }
78 | 
79 |   .hljs-link {
80 |     text-decoration: underline;
81 |   }
82 | 
83 |   .hljs-params {
84 |     color: #e6c07b;
85 |   }
86 | </style>`;
87 | 


--------------------------------------------------------------------------------
/themes/one-dark.js:
--------------------------------------------------------------------------------
  1 | import {html} from '@polymer/polymer/polymer-element.js';
  2 | 
  3 | export const oneDark = html`
  4 | <style>
  5 |   /*
  6 | 
  7 |   Atom One Dark by Daniel Gamage
  8 |   Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
  9 | 
 10 |   base:    #282c34
 11 |   mono-1:  #abb2bf
 12 |   mono-2:  #818896
 13 |   mono-3:  #5c6370
 14 |   hue-1:   #56b6c2
 15 |   hue-2:   #61aeee
 16 |   hue-3:   #c678dd
 17 |   hue-4:   #98c379
 18 |   hue-5:   #e06c75
 19 |   hue-5-2: #be5046
 20 |   hue-6:   #d19a66
 21 |   hue-6-2: #e6c07b
 22 | 
 23 |   */
 24 | 
 25 |   .hljs {
 26 |     display: block;
 27 |     overflow-x: auto;
 28 |     color: var(--code-sample-color, #abb2bf);
 29 |     background: var(--code-sample-background, #282c34);
 30 |   }
 31 | 
 32 |   .hljs-comment,
 33 |   .hljs-quote {
 34 |     color: #5c6370;
 35 |     font-style: italic;
 36 |   }
 37 | 
 38 |   .hljs-doctag,
 39 |   .hljs-keyword,
 40 |   .hljs-formula {
 41 |     color: #c678dd;
 42 |   }
 43 | 
 44 |   .hljs-section,
 45 |   .hljs-name,
 46 |   .hljs-selector-tag,
 47 |   .hljs-deletion,
 48 |   .hljs-subst,
 49 |   .hljs-tag {
 50 |     color: #e06c75;
 51 |   }
 52 | 
 53 |   .hljs-literal {
 54 |     color: #56b6c2;
 55 |   }
 56 | 
 57 |   .hljs-string,
 58 |   .hljs-regexp,
 59 |   .hljs-addition,
 60 |   .hljs-attribute,
 61 |   .hljs-meta-string {
 62 |     color: #98c379;
 63 |   }
 64 | 
 65 |   .hljs-built_in,
 66 |   .hljs-class .hljs-title {
 67 |     color: #e6c07b;
 68 |   }
 69 | 
 70 |   .hljs-attr,
 71 |   .hljs-variable,
 72 |   .hljs-template-variable,
 73 |   .hljs-type,
 74 |   .hljs-selector-class,
 75 |   .hljs-selector-attr,
 76 |   .hljs-selector-pseudo,
 77 |   .hljs-number {
 78 |     color: #d19a66;
 79 |   }
 80 | 
 81 |   .hljs-symbol,
 82 |   .hljs-bullet,
 83 |   .hljs-link,
 84 |   .hljs-meta,
 85 |   .hljs-selector-id,
 86 |   .hljs-title {
 87 |     color: #61aeee;
 88 |   }
 89 | 
 90 |   .hljs-emphasis {
 91 |     font-style: italic;
 92 |   }
 93 | 
 94 |   .hljs-strong {
 95 |     font-weight: bold;
 96 |   }
 97 | 
 98 |   .hljs-link {
 99 |     text-decoration: underline;
100 |   }
101 | 
102 |   .hljs-params {
103 |     color: #e6c07b;
104 |   }
105 | </style>`;
106 | 


--------------------------------------------------------------------------------
/themes/one-light.js:
--------------------------------------------------------------------------------
  1 | import {html} from '@polymer/polymer/polymer-element.js';
  2 | 
  3 | export const oneLight = html`
  4 | <style>
  5 |   /*
  6 | 
  7 |   Atom One Light by Daniel Gamage
  8 |   Original One Light Syntax theme from https://github.com/atom/one-light-syntax
  9 | 
 10 |   base:    #fafafa
 11 |   mono-1:  #383a42
 12 |   mono-2:  #686b77
 13 |   mono-3:  #a0a1a7
 14 |   hue-1:   #0184bb
 15 |   hue-2:   #4078f2
 16 |   hue-3:   #a626a4
 17 |   hue-4:   #50a14f
 18 |   hue-5:   #e45649
 19 |   hue-5-2: #c91243
 20 |   hue-6:   #986801
 21 |   hue-6-2: #c18401
 22 | 
 23 |   */
 24 | 
 25 |   .hljs {
 26 |     display: block;
 27 |     overflow-x: auto;
 28 |     color: var(--code-sample-color, #383a42);
 29 |     background: var(--code-sample-background, #fafafa);
 30 |   }
 31 | 
 32 |   .hljs-comment,
 33 |   .hljs-quote {
 34 |     color: #a0a1a7;
 35 |     font-style: italic;
 36 |   }
 37 | 
 38 |   .hljs-doctag,
 39 |   .hljs-keyword,
 40 |   .hljs-formula {
 41 |     color: #a626a4;
 42 |   }
 43 | 
 44 |   .hljs-section,
 45 |   .hljs-name,
 46 |   .hljs-selector-tag,
 47 |   .hljs-deletion,
 48 |   .hljs-subst {
 49 |     color: #e45649;
 50 |   }
 51 | 
 52 |   .hljs-literal {
 53 |     color: #0184bb;
 54 |   }
 55 | 
 56 |   .hljs-string,
 57 |   .hljs-regexp,
 58 |   .hljs-addition,
 59 |   .hljs-attribute,
 60 |   .hljs-meta-string {
 61 |     color: #50a14f;
 62 |   }
 63 | 
 64 |   .hljs-built_in,
 65 |   .hljs-class .hljs-title {
 66 |     color: #c18401;
 67 |   }
 68 | 
 69 |   .hljs-attr,
 70 |   .hljs-variable,
 71 |   .hljs-template-variable,
 72 |   .hljs-type,
 73 |   .hljs-selector-class,
 74 |   .hljs-selector-attr,
 75 |   .hljs-selector-pseudo,
 76 |   .hljs-number {
 77 |     color: #986801;
 78 |   }
 79 | 
 80 |   .hljs-symbol,
 81 |   .hljs-bullet,
 82 |   .hljs-link,
 83 |   .hljs-meta,
 84 |   .hljs-selector-id,
 85 |   .hljs-title {
 86 |     color: #4078f2;
 87 |   }
 88 | 
 89 |   .hljs-emphasis {
 90 |     font-style: italic;
 91 |   }
 92 | 
 93 |   .hljs-strong {
 94 |     font-weight: bold;
 95 |   }
 96 | 
 97 |   .hljs-link {
 98 |     text-decoration: underline;
 99 |   }
100 | </style>`;
101 | 


--------------------------------------------------------------------------------
/themes/solarized-dark.js:
--------------------------------------------------------------------------------
 1 | import {html} from '@polymer/polymer/polymer-element.js';
 2 | 
 3 | export const solarizedDark = html`
 4 | <style>
 5 |   /* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> */
 6 | 
 7 |   .hljs {
 8 |     display: block;
 9 |     overflow-x: auto;
10 |     background: var(--code-sample-background, #002b36);
11 |     color: var(--code-sample-color, #839496);
12 |   }
13 | 
14 |   .hljs-comment,
15 |   .hljs-quote {
16 |     color: #586e75;
17 |   }
18 | 
19 |   /* Solarized Green */
20 |   .hljs-keyword,
21 |   .hljs-selector-tag,
22 |   .hljs-addition {
23 |     color: #859900;
24 |   }
25 | 
26 |   /* Solarized Cyan */
27 |   .hljs-number,
28 |   .hljs-string,
29 |   .hljs-meta .hljs-meta-string,
30 |   .hljs-literal,
31 |   .hljs-doctag,
32 |   .hljs-regexp {
33 |     color: #2aa198;
34 |   }
35 | 
36 |   /* Solarized Blue */
37 |   .hljs-title,
38 |   .hljs-section,
39 |   .hljs-name,
40 |   .hljs-selector-id,
41 |   .hljs-selector-class {
42 |     color: #268bd2;
43 |   }
44 | 
45 |   /* Solarized Yellow */
46 |   .hljs-attribute,
47 |   .hljs-attr,
48 |   .hljs-variable,
49 |   .hljs-template-variable,
50 |   .hljs-class .hljs-title,
51 |   .hljs-type {
52 |     color: #b58900;
53 |   }
54 | 
55 |   /* Solarized Orange */
56 |   .hljs-symbol,
57 |   .hljs-bullet,
58 |   .hljs-subst,
59 |   .hljs-meta,
60 |   .hljs-meta .hljs-keyword,
61 |   .hljs-selector-attr,
62 |   .hljs-selector-pseudo,
63 |   .hljs-link {
64 |     color: #cb4b16;
65 |   }
66 | 
67 |   /* Solarized Red */
68 |   .hljs-built_in,
69 |   .hljs-deletion {
70 |     color: #dc322f;
71 |   }
72 | 
73 |   .hljs-formula {
74 |     background: #073642;
75 |   }
76 | 
77 |   .hljs-emphasis {
78 |     font-style: italic;
79 |   }
80 | 
81 |   .hljs-strong {
82 |     font-weight: bold;
83 |   }
84 | </style>`;
85 | 


--------------------------------------------------------------------------------
/themes/solarized-light.js:
--------------------------------------------------------------------------------
 1 | import {html} from '@polymer/polymer/polymer-element.js';
 2 | 
 3 | export const solarizedLight = html`
 4 | <style>
 5 |   /* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> */
 6 | 
 7 |   .hljs {
 8 |     display: block;
 9 |     overflow-x: auto;
10 |     background: var(--code-sample-background, #fdf6e3);
11 |     color: var(--code-sample-color, #657b83);
12 |   }
13 | 
14 |   .hljs-comment,
15 |   .hljs-quote {
16 |     color: #93a1a1;
17 |   }
18 | 
19 |   /* Solarized Green */
20 |   .hljs-keyword,
21 |   .hljs-selector-tag,
22 |   .hljs-addition {
23 |     color: #859900;
24 |   }
25 | 
26 |   /* Solarized Cyan */
27 |   .hljs-number,
28 |   .hljs-string,
29 |   .hljs-meta .hljs-meta-string,
30 |   .hljs-literal,
31 |   .hljs-doctag,
32 |   .hljs-regexp {
33 |     color: #2aa198;
34 |   }
35 | 
36 |   /* Solarized Blue */
37 |   .hljs-title,
38 |   .hljs-section,
39 |   .hljs-name,
40 |   .hljs-selector-id,
41 |   .hljs-selector-class {
42 |     color: #268bd2;
43 |   }
44 | 
45 |   /* Solarized Yellow */
46 |   .hljs-attribute,
47 |   .hljs-attr,
48 |   .hljs-variable,
49 |   .hljs-template-variable,
50 |   .hljs-class .hljs-title,
51 |   .hljs-type {
52 |     color: #b58900;
53 |   }
54 | 
55 |   /* Solarized Orange */
56 |   .hljs-symbol,
57 |   .hljs-bullet,
58 |   .hljs-subst,
59 |   .hljs-meta,
60 |   .hljs-meta .hljs-keyword,
61 |   .hljs-selector-attr,
62 |   .hljs-selector-pseudo,
63 |   .hljs-link {
64 |     color: #cb4b16;
65 |   }
66 | 
67 |   /* Solarized Red */
68 |   .hljs-built_in,
69 |   .hljs-deletion {
70 |     color: #dc322f;
71 |   }
72 | 
73 |   .hljs-formula {
74 |     background: #eee8d5;
75 |   }
76 | 
77 |   .hljs-emphasis {
78 |     font-style: italic;
79 |   }
80 | 
81 |   .hljs-strong {
82 |     font-weight: bold;
83 |   }
84 | </style>`;
85 | 


--------------------------------------------------------------------------------
/vendor/highlight/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2006, Ivan Sagalaev
 2 | All rights reserved.
 3 | Redistribution and use in source and binary forms, with or without
 4 | modification, are permitted provided that the following conditions are met:
 5 | 
 6 |     * Redistributions of source code must retain the above copyright
 7 |       notice, this list of conditions and the following disclaimer.
 8 |     * Redistributions in binary form must reproduce the above copyright
 9 |       notice, this list of conditions and the following disclaimer in the
10 |       documentation and/or other materials provided with the distribution.
11 |     * Neither the name of highlight.js nor the names of its contributors 
12 |       may be used to endorse or promote products derived from this software 
13 |       without specific prior written permission.
14 | 
15 | THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
16 | EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25 | 


--------------------------------------------------------------------------------
/vendor/highlight/highlight.pack.js:
--------------------------------------------------------------------------------
1 | /*! highlight.js v9.12.0 | BSD3 License | git.io/hljslicense */
2 | !function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value).replace('"',"&quot;")+'"'}s+="<"+t(e)+E.map.call(e.attributes,r).join("")+">"}function u(e){s+="</"+t(e)+">"}function c(e){("start"===e.event?o:u)(e.node)}for(var l=0,s="",f=[];e.length||r.length;){var g=i();if(s+=n(a.substring(l,g[0].offset)),l=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===l);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return s+n(a.substr(l))}function l(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):x(a.k).forEach(function(e){u(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return l("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var c=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=c.length?t(c.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function l(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":I.classPrefix,i='<span class="'+a,o=t?"":C;return i+=e+'">',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=l(E,r),e?(B+=e[1],a+=p(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!y[E.sL])return n(k);var t=e?f(E.sL,k,!0,x[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(B+=t.r),e&&(x[E.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=null!=E.sL?d():h(),k=""}function v(e){L+=e.cN?p(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(k+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),b(),t.rB||t.eB||(k=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),b(),a.eE&&(k=n));do E.cN&&(L+=C),E.skip||(B+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return k+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,E=i||N,x={},L="";for(R=E;R!==N;R=R.parent)R.cN&&(L=p(R.cN,"",!0)+L);var k="",B=0;try{for(var M,j,O=0;;){if(E.t.lastIndex=O,M=E.t.exec(t),!M)break;j=m(t.substring(O,M.index),M[0]),O=M.index+j}for(m(t.substr(O)),R=E;R.parent;R=R.parent)R.cN&&(L+=C);return{r:B,value:L,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function g(e,t){t=t||I.languages||x(y);var r={r:0,value:n(e)},a=r;return t.filter(w).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return I.tabReplace||I.useBR?e.replace(M,function(e,n){return I.useBR&&"\n"===e?"<br>":I.tabReplace?n.replace(/\t/g,I.tabReplace):""}):e}function h(e,n,t){var r=n?L[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function d(e){var n,t,r,o,l,s=i(e);a(s)||(I.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,l=n.textContent,r=s?f(s,l,!0):g(l),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),l)),r.value=p(r.value),e.innerHTML=r.value,e.className=h(e.className,s,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){I=o(I,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,d)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=y[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function R(){return x(y)}function w(e){return e=(e||"").toLowerCase(),y[e]||y[L[e]]}var E=[],x=Object.keys,y={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="</span>",I={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=d,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",i:/:/,c:[{cN:"keyword",b:/\w+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}});hljs.registerLanguage("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)}/}]},s={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/\b-?[a-z\._]+\b/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",_:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"meta",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,s,a,t]}});hljs.registerLanguage("http",function(e){var t="HTTP/[0-9\\.]+";return{aliases:["https"],i:"\\S",c:[{b:"^"+t,e:"$",c:[{cN:"number",b:"\\b\\d{3}\\b"}]},{b:"^[A-Z]+ (.*?) "+t+"$",rB:!0,e:"$",c:[{cN:"string",b:" ",e:" ",eB:!0,eE:!0},{b:t},{cN:"keyword",b:"[A-Z]+"}]},{cN:"attribute",b:"^\\w",e:": ",eE:!0,i:"\\n|\\s|=",starts:{e:"$",r:0}},{b:"\\n\\n",starts:{sL:[],eW:!0}}]}});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/</,r:0,c:[{cN:"attr",b:e,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[t],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[t],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("json",function(e){var i={literal:"true false null"},n=[e.QSM,e.CNM],r={e:",",eW:!0,eE:!0,c:n,k:i},t={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(r,{b:/:/})],i:"\\S"},c={b:"\\[",e:"\\]",c:[e.inherit(r)],i:"\\S"};return n.splice(n.length,0,t,c),{c:n,k:i,i:"\\S"}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b:/</,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});hljs.registerLanguage("markdown",function(e){return{aliases:["md","mkdown","mkd"],c:[{cN:"section",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"quote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"^```w*s*$",e:"^```s*$"},{b:"`.+?`"},{b:"^( {4}|	)",e:"$",r:0}]},{b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"string",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"symbol",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:/^\[[^\n]+\]:/,rB:!0,c:[{cN:"symbol",b:/\[/,e:/\]/,eB:!0,eE:!0},{cN:"link",b:/:\s*/,e:/$/,eB:!0}]}]}});hljs.registerLanguage("coffeescript",function(e){var c={keyword:"in if for while finally new do return else break catch instanceof throw try this switch continue typeof delete debugger super yield import export from as default await then unless until loop of by when and or is isnt not",literal:"true false null undefined yes no on off",built_in:"npm require console print module global window document"},n="[A-Za-z$_][0-9A-Za-z$_]*",r={cN:"subst",b:/#\{/,e:/}/,k:c},i=[e.BNM,e.inherit(e.CNM,{starts:{e:"(\\s*/)?",r:0}}),{cN:"string",v:[{b:/'''/,e:/'''/,c:[e.BE]},{b:/'/,e:/'/,c:[e.BE]},{b:/"""/,e:/"""/,c:[e.BE,r]},{b:/"/,e:/"/,c:[e.BE,r]}]},{cN:"regexp",v:[{b:"///",e:"///",c:[r,e.HCM]},{b:"//[gim]*",r:0},{b:/\/(?![ *])(\\\/|.)*?\/[gim]*(?=\W|$)/}]},{b:"@"+n},{sL:"javascript",eB:!0,eE:!0,v:[{b:"```",e:"```"},{b:"`",e:"`"}]}];r.c=i;var s=e.inherit(e.TM,{b:n}),t="(\\(.*\\))?\\s*\\B[-=]>",o={cN:"params",b:"\\([^\\(]",rB:!0,c:[{b:/\(/,e:/\)/,k:c,c:["self"].concat(i)}]};return{aliases:["coffee","cson","iced"],k:c,i:/\/\*/,c:i.concat([e.C("###","###"),e.HCM,{cN:"function",b:"^\\s*"+n+"\\s*=\\s*"+t,e:"[-=]>",rB:!0,c:[s,o]},{b:/[:\(,=]\s*/,r:0,c:[{cN:"function",b:t,e:"[-=]>",rB:!0,c:[o]}]},{cN:"class",bK:"class",e:"$",i:/[:="\[\]]/,c:[{bK:"extends",eW:!0,i:/[:="\[\]]/,c:[s]},s]},{b:n+":",e:":",rB:!0,rE:!0,r:0}])}});


--------------------------------------------------------------------------------
/wct.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   suites: [
 3 |     'test',
 4 |   ],
 5 |   expanded: true,
 6 |   plugins: {
 7 |     local: {
 8 |       browsers: [
 9 |         'chrome',
10 |         'firefox',
11 |       ],
12 |       browserOptions: {
13 |         chrome: [
14 |           'headless',
15 |           'disable-gpu',
16 |           'no-sandbox',
17 |         ],
18 |         firefox: [
19 |           '-headless',
20 |         ],
21 |       },
22 |     },
23 |     istanbul: {
24 |       reporters: [
25 |         'text',
26 |         'text-summary',
27 |         'lcov',
28 |         'json',
29 |       ],
30 |       include: [
31 |         '**/code-sample.js',
32 |       ],
33 |       exclude: [
34 |         '/polymer/polymer.js',
35 |         '/platform/platform.js',
36 |       ],
37 |       thresholds: {
38 |         global: {
39 |           statements: 80,
40 |           branches: 80,
41 |           functions: 80,
42 |           lines: 80,
43 |         },
44 |       },
45 |     },
46 |     sauce: {
47 |       browsers: [{
48 |         browserName: 'MicrosoftEdge',
49 |         platform: 'Windows 10',
50 |         version: '17.17134',
51 |       }, {
52 |         browserName: 'safari',
53 |         platform: 'macOS 10.13',
54 |         version: '11.1',
55 |       }],
56 |     },
57 |   },
58 | };
59 | 


--------------------------------------------------------------------------------