)?
|(
)+/gi, '\n')
273 | .replace(/<\/div>/gi, '')
274 | .replace(/ /gi, ' ');*/
275 |
276 | pre.innerHTML = innerHTML;
277 |
278 | var pasted = pre.textContent.slice(ss, newse);
279 |
280 | that.undoManager.action({
281 | add: pasted,
282 | del: selection,
283 | start: ss
284 | });
285 |
286 | ss += pasted.length;
287 |
288 | pre.setSelectionRange(ss, ss);
289 |
290 | pre.onkeyup();
291 | }, 10);
292 | }
293 | },
294 |
295 | keyup: function(evt) {
296 | var keyCode = evt && evt.keyCode || 0,
297 | code = this.textContent;
298 |
299 | if (keyCode < 9 || keyCode == 13 || keyCode > 32 && keyCode < 41) {
300 | $u.event.fire(this, 'caretmove');
301 | }
302 |
303 | if ([
304 | 9, 91, 93, 16, 17, 18, // modifiers
305 | 20, // caps lock
306 | 13, // Enter (handled by keydown)
307 | 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, // F[0-12]
308 | 27 // Esc
309 | ].indexOf(keyCode) > -1) {
310 | return;
311 | }
312 |
313 | if (keyCode !== 37 && keyCode !== 39) {
314 | $u.event.fire(this, 'contentchange', {
315 | keyCode: keyCode
316 | });
317 |
318 | var ss = this.selectionStart,
319 | se = this.selectionEnd;
320 |
321 | Prism.highlightElement(this);
322 |
323 | // Dirty fix to #2
324 | if (!/\n$/.test(code)) {
325 | this.innerHTML = this.innerHTML + '\n';
326 | }
327 |
328 | if (ss !== null || se !== null) {
329 | this.setSelectionRange(ss, se);
330 | }
331 | }
332 |
333 | // Show a previewer, if needed
334 | if (self.Previewer) {
335 | var selection = getSelection();
336 |
337 | if (selection.rangeCount) {
338 | var range = selection.getRangeAt(0),
339 | element = range.startContainer;
340 |
341 | if (element.nodeType == 3) {
342 | element = element.parentNode;
343 | }
344 |
345 | var type = Previewer.get(element);
346 |
347 | if (type) {
348 | Previewer.active = element;
349 | Previewer.s[type].token = element;
350 | }
351 | else {
352 | Previewer.hideAll();
353 | Previewer.active = null;
354 | }
355 | }
356 | }
357 | },
358 |
359 | click: function(evt) {
360 | $u.event.fire(this, 'caretmove');
361 | },
362 |
363 | focus: function() {
364 | var ss = this.getAttribute('data-ss'),
365 | se = this.getAttribute('data-se');
366 | var pre = this;
367 |
368 | if (ss || se) {
369 | setTimeout(function(){
370 | pre.setSelectionRange(ss, se);
371 | }, 2);
372 | }
373 |
374 | function modifiers(evt) {
375 | if (evt.altKey) {
376 | if (evt.shiftKey) {
377 | return 10;
378 | }
379 |
380 | if (evt.ctrlKey) {
381 | return .1;
382 | }
383 |
384 | return 1;
385 | }
386 |
387 | return 0;
388 | }
389 |
390 | if (!window.Incrementable) {
391 | $u.script('/code/incrementable.js', function() {
392 | that.incrementable = new Incrementable(pre, modifiers);
393 | });
394 | }
395 | else if (!that.incrementable) {
396 | that.incrementable = new Incrementable(pre, modifiers);
397 | }
398 | },
399 |
400 | blur: function() {
401 | self.Previewer && Previewer.hideAll();
402 | },
403 |
404 | mouseover: function(evt) {
405 | if (!self.Previewer) {
406 | return;
407 | }
408 |
409 | var target = evt.target,
410 | type = Previewer.get(target);
411 |
412 | if (type) {
413 |
414 | var previewer = Previewer.s[type];
415 |
416 | if (previewer.token != target) {
417 | previewer.token = target;
418 |
419 | target.onmouseout = function() {
420 | previewer.token = this.onmouseout = null;
421 |
422 | // Show the previewer again on the active token
423 | var active = Previewer.active;
424 |
425 | if (active) {
426 | var type = Previewer.get(active);
427 | Previewer.s[type].token = active;
428 | }
429 | };
430 | }
431 | }
432 | },
433 |
434 | input: function(evt) {
435 | if (evt.incrementable) {
436 | that.undoManager.action({
437 | add: evt.add,
438 | del: evt.del,
439 | start: evt.start
440 | });
441 | }
442 | }
443 | }, true);
444 |
445 | $u.event.bind(pre, 'caretmove', function() {
446 | var content = this.textContent,
447 | ss = this.selectionStart,
448 | se = this.selectionEnd;
449 |
450 | ss && this.setAttribute('data-ss', ss);
451 | se && this.setAttribute('data-se', se);
452 |
453 | // Update current line highlight
454 | var highlighter = that.lineHighlight,
455 | lines = (content.match(CRLF) || []).length,
456 | line = (content.slice(0, ss).match(CRLF) || []).length,
457 | height = parseFloat(getComputedStyle(highlighter).height),
458 | lineHeight = parseFloat(getComputedStyle(highlighter).lineHeight),
459 | // To choose the rendered height, WebKit floors the lineHeight. Copy this behaviour
460 | lineHeight = lineHeight === height? height : Math.floor(lineHeight);
461 |
462 | highlighter.setAttribute('data-line', line + 1);
463 | highlighter.style.top = line * lineHeight + 'px';
464 | });
465 |
466 | $u.event.fire(this.pre, 'caretmove');
467 | };
468 |
469 | _.prototype = {
470 | action: function(action, options) {
471 | options = options || {};
472 |
473 | var pre = this.pre,
474 | text = pre.textContent,
475 | ss = options.start || pre.selectionStart,
476 | se = options.end || pre.selectionEnd,
477 | state = {
478 | ss: ss,
479 | se: se,
480 | before: text.slice(0, ss),
481 | after: text.slice(se),
482 | selection: text.slice(ss, se)
483 | };
484 |
485 | var textAction = _.actions[action](state, options);
486 |
487 | pre.textContent = state.before + state.selection + state.after;
488 |
489 | if (textAction && !options.noHistory) {
490 | this.undoManager.action(textAction);
491 | }
492 |
493 | pre.setSelectionRange(state.ss, state.se);
494 |
495 | pre.onkeyup();
496 | }
497 | };
498 |
499 | _.actions = {
500 | indent: function(state, options) {
501 | var lf = state.before.lastIndexOf('\n') + 1;
502 |
503 | if (options.inverse) {
504 | if (/\s/.test(state.before.charAt(lf))) {
505 | state.before = state.before.splice(lf, 1);
506 |
507 | state.ss--;
508 | state.se--;
509 | }
510 |
511 | state.selection = state.selection.replace(/\r?\n\s/g, '\n');
512 | }
513 | else if (state.selection) {
514 | state.before = state.before.splice(lf, 0, '\t');
515 | state.selection = state.selection.replace(/\r?\n/g, '\n\t');
516 |
517 | state.ss++;
518 | state.se++;
519 | }
520 | else {
521 | state.before += '\t';
522 |
523 | state.ss++;
524 | state.se++;
525 |
526 | return {
527 | add: '\t',
528 | del: '',
529 | start: state.ss - 1
530 | };
531 | }
532 |
533 | state.se = state.ss + state.selection.length;
534 |
535 | return {
536 | action: 'indent',
537 | start: state.ss,
538 | end: state.se,
539 | inverse: options.inverse
540 | };
541 | },
542 |
543 | newline: function(state) {
544 | var ss = state.ss,
545 | lf = state.before.lastIndexOf('\n') + 1,
546 | indent = (state.before.slice(lf).match(/^\s+/) || [''])[0];
547 |
548 | state.before += '\n' + indent;
549 |
550 | var selection = state.selection;
551 | state.selection = '';
552 |
553 | state.ss += indent.length + 1;
554 | state.se = state.ss;
555 |
556 | return {
557 | add: '\n' + indent,
558 | del: selection,
559 | start: ss
560 | };
561 | },
562 |
563 | comment: function(state, options) {
564 | var open = options.lang === 'css'? '/*' : '';
566 |
567 | var start = state.before.lastIndexOf(open),
568 | end = state.after.indexOf(close),
569 | closeBefore = state.before.lastIndexOf(close),
570 | openAfter = state.after.indexOf(start);
571 |
572 | if (start > -1 && end > -1
573 | && (start > closeBefore || closeBefore === -1)
574 | && (end < openAfter || openAfter === -1)
575 | ) {
576 | // Uncomment
577 | state.before = state.before.splice(start, open.length);
578 | state.after = state.after.splice(end, close.length);
579 |
580 | var textAction = [{
581 | add: '',
582 | del: open,
583 | start: start
584 | }, {
585 | add: '',
586 | del: close,
587 | start: state.before.length + state.selection.length + end
588 | }];
589 |
590 | state.ss -= open.length;
591 | state.se -= open.length;
592 |
593 | return textAction;
594 | }
595 | else {
596 | // Comment
597 | if (state.selection) {
598 | // Comment selection
599 | state.selection = open + state.selection + close;
600 |
601 | textAction = [{
602 | add: open,
603 | del: '',
604 | start: state.ss
605 | }, {
606 | add: close,
607 | del: '',
608 | start: open.length + state.se
609 | }];
610 | }
611 | else {
612 | // Comment whole line
613 | var start = state.before.lastIndexOf('\n') + 1,
614 | end = state.after.indexOf('\n');
615 |
616 | if (end === -1) {
617 | end = after.length;
618 | }
619 |
620 | while (/\s/.test(state.before.charAt(start))) {
621 | start++;
622 | }
623 |
624 | state.before = state.before.splice(start, 0, open);
625 |
626 | state.after = state.after.splice(end, 0, close);
627 |
628 | var textAction = [{
629 | add: open,
630 | del: '',
631 | start: start
632 | }, {
633 | add: close,
634 | del: '',
635 | start: state.before.length + end
636 | }];
637 | }
638 |
639 | state.ss += open.length;
640 | state.se += open.length;
641 |
642 | return textAction;
643 | }
644 | }
645 | };
646 |
647 | })();
648 |
--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Variables
3 | */
4 |
5 | #easing > svg,
6 | #fontfamily,
7 | #entity {
8 | background: url(/img/noise.png), linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
9 | }
10 |
11 | /**
12 | * Styles
13 | */
14 |
15 | fieldset {
16 | padding: .5em;
17 | border: 0;
18 | margin-top: .5em;
19 | }
20 |
21 | [aria-hidden="true"] {
22 | display: none !important;
23 | }
24 |
25 | input:focus + label[for],
26 | label.focus {
27 | outline: auto;
28 | outline: 2px auto -webkit-focus-ring-color; /* Warning: nonstandard */
29 | }
30 |
31 | button, .button {
32 | padding: .45em .6em;
33 | border: 1px solid rgba(0,0,0,.4);
34 | border-radius: .3em;
35 | white-space: nowrap;
36 | text-decoration: none;
37 | background-image: url(/img/noise.png);
38 | background-color: inherit;
39 | color: inherit;
40 | font: inherit;
41 | box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset,
42 | rgba(255, 255, 255, .3) 0 25px 30px -12px inset,
43 | rgba(0, 0, 0, .6) 0 1px 2px;
44 | text-shadow: 0 -1px 1px black, 0 -1px 2px black;
45 | cursor: pointer;
46 | }
47 |
48 | button.danger,
49 | .button.danger {
50 | background-color: rgba(196, 0, 0, .8);
51 | text-shadow: 0 -1px 1px rgba(0,0,0,.5), 0 -1px 2px rgba(0,0,0,.5);
52 | }
53 |
54 | button.danger:hover,
55 | .button.danger:hover {
56 | background-color: red;
57 | }
58 |
59 | input[type="checkbox"] {
60 | appearance: none;
61 | display: inline-block;
62 | width: .9rem;
63 | height: .9rem;
64 | padding-left: .1rem;
65 | border: 0;
66 | box-sizing: border-box;
67 | margin: 0;
68 | background: rgba(0,0,0,.2);
69 | color: inherit;
70 | font: inherit;
71 | letter-spacing: inherit;
72 | outline: none;
73 | border-radius: 2px;
74 | box-shadow: 1px 1px 5px black inset;
75 | text-align: right;
76 | overflow: visible;
77 | color: transparent;
78 | font-size: 1.2rem;
79 | line-height: .6rem;
80 | }
81 |
82 | input[type="checkbox"]:checked {
83 | color: white;
84 | text-shadow: inherit;
85 | }
86 |
87 | input[type="checkbox"]::after {
88 | content: '✓';
89 | }
90 |
91 | .-webkit- input[type="range"] {
92 | appearance: none;
93 | height: 1px;
94 | border-top: 1px solid black;
95 | background: hsla(0,0%,100%,.3);
96 | }
97 |
98 | /* Warning: nonstandard */
99 | input[type="range"]::-webkit-slider-thumb {
100 | appearance: none;
101 | width: 1.4em;
102 | height: 1.4em;
103 | border: 1px solid rgba(0,0,0,.4);
104 | border-radius: 50%;
105 | cursor: pointer;
106 | background:
107 | hsl(200, 10%, 20%) url(/img/noise.png);
108 | box-shadow: rgba(255, 255, 255, .3) 0 1px 0 inset,
109 | rgba(255, 255, 255, .1) 0 5px 6px -2px inset,
110 | rgba(0, 0, 0, .6) 0 1px 2px;
111 | }
112 |
113 | input[type="range"]::-webkit-slider-thumb:active {
114 | width: 1.6em;
115 | height: 1.6em;
116 | }
117 |
118 | label.slider {
119 | display: none;
120 | }
121 |
122 | html.supports-range label.slider {
123 | display: block;
124 | }
125 |
126 | .segmented-control {
127 | display: table;
128 | }
129 |
130 | .segmented-control > input[type="radio"] {
131 | position: absolute;
132 | z-index: 1;
133 | opacity: 0;
134 | }
135 |
136 | .segmented-control > input[type="radio"] + label {
137 | float: none;
138 | display: table-cell;
139 | padding: .4em .9em;
140 | margin: .15em;
141 | overflow: hidden;
142 | text-align: left;
143 | line-height: 25px;
144 | border-radius: 0;
145 | }
146 |
147 | .segmented-control > input[type="radio"] + label:first-of-type,
148 | .segmented-control > input[type="radio"] + label:last-of-type {
149 | border-radius: .4em;
150 | }
151 |
152 | .segmented-control > input[type="radio"] + label:first-of-type {
153 | border-right: 0;
154 | border-top-right-radius: 0;
155 | border-bottom-right-radius: 0;
156 | }
157 |
158 | .segmented-control > input[type="radio"] + label:last-of-type {
159 | border-left: 0;
160 | border-top-left-radius: 0;
161 | border-bottom-left-radius: 0;
162 | }
163 |
164 | .segmented-control > input[type="radio"] + label:nth-of-type(n+2):nth-last-of-type(n+2) {
165 | border-left: 0;
166 | border-right: 0;
167 | }
168 |
169 | .no-cors #cloud {
170 | display: none;
171 | }
172 |
173 | .amp {
174 | font: italic 160%/.5 Baskerville, 'Palatino Linotype', 'Goudy Old Style', Constantia, Palatino, serif;
175 | vertical-align: -.1em;
176 | opacity: .7;
177 | }
178 |
179 | .page {
180 | display: block;
181 | position: absolute;
182 | top: 0;
183 | left: 0;
184 | width: 100%;
185 | height: 100%;
186 | border: 0;
187 | outline: none;
188 | resize: none;
189 | background: transparent;
190 | transition-duration: .5s;
191 | transition-property: top, left, width, height;
192 | }
193 |
194 | .editor.page {
195 | display: none;
196 | box-sizing: border-box;
197 | height: 100%;
198 | overflow: auto;
199 | background: url(/img/noise.png) hsl(24, 20%, 95%);
200 | font: 100%/1.5em Monaco, Consolas, Inconsolata, 'Deja Vu Sans Mono', 'Droid Sans Mono', 'Andale Mono', 'Lucida Console', monospace;
201 | tab-size: 4;
202 | word-wrap: normal;
203 | text-shadow: 0 1px white;
204 | box-shadow: 1px 1px 2px rgba(0,0,0,.3) inset;
205 | }
206 |
207 | body[data-page="all"]:not([data-seethrough]) #html-container {
208 | background-color: hsl(24, 20%, 92%);
209 | }
210 |
211 | .editor.page.focus {
212 | box-shadow: .1em .1em .4em rgba(0,0,0,.5) inset;
213 | }
214 |
215 | body[data-seethrough] > .editor.page {
216 | background: transparent;
217 | }
218 |
219 | body[data-seethrough] .editor.page,
220 | body[data-seethrough] .editor.page > pre,
221 | body[data-seethrough] .editor.page > pre > span.token {
222 | text-shadow: 0 .1em white, 0 -.1em white, .1em 0 white, -.1em 0 white,
223 | .1em .1em white, -.1em .1em white, .1em -.1em white, -.1em -.1em white;
224 | text-shadow: 0 0 0 .1em white;
225 | }
226 |
227 | .editor.page > pre {
228 | position: relative;
229 | padding: 1em 1.5em 1em 3em;
230 | overflow: visible;
231 | background: linear-gradient(90deg, hsl(24, 20%, 87%) 1px, hsl(24, 20%, 95%)) -3px no-repeat;
232 | background-size: 2px 100%;
233 | background-origin: content-box;
234 | word-wrap: normal;
235 | font: inherit;
236 | outline: none;
237 | }
238 |
239 | #result {
240 | z-index: 0;
241 | }
242 |
243 | body[data-page="css"] #css-container,
244 | body[data-page="html"] #html-container,
245 | body[data-page="javascript"] #javascript-container,
246 | body[data-page="all"] .page:not(#javascript-container) {
247 | display: block;
248 | }
249 |
250 | /*
251 | * Define the different views
252 | */
253 |
254 | body[data-view="split-vertical"] > .page,
255 | body[data-page="all"][data-view="separate"] .editor.page {
256 | width: 50%;
257 | }
258 |
259 | body[data-view="split-vertical"] > #result,
260 | body[data-page="all"][data-view="separate"] #html-container {
261 | left: 50%;
262 | }
263 |
264 | body[data-view="split"] > .page,
265 | body[data-page="all"][data-view="separate"] > .page,
266 | body:not([data-view]) > .page {
267 | height: 50%;
268 | }
269 |
270 | body[data-view="split"] > .editor.page,
271 | body:not([data-view]) > .editor.page,
272 | body[data-page="all"][data-view="separate"] .editor.page {
273 | top: 50%;
274 | }
275 |
276 | body[data-page="all"][data-view="split"] .page {
277 | height: 40%;
278 | }
279 |
280 | body[data-page="all"][data-view="split"] #css-container {
281 | top: 40%;
282 | }
283 |
284 | body[data-page="all"][data-view="split-vertical"] .page:not(#html-container) {
285 | height: 80%;
286 | }
287 |
288 | body[data-page="all"][data-view^="split"] #html-container {
289 | width: 100%;
290 | height: 20%;
291 | top: 80%;
292 | }
293 |
294 | body[data-seethrough] > #result,
295 | body[data-page="result"] > #result {
296 | top: 0 !important;
297 | left: 0 !important;
298 | width: 100% !important;
299 | height: 100% !important;
300 | }
301 |
302 | .for-code {
303 | display: none;
304 | position: absolute;
305 | right: 0;
306 | top: 0;
307 | margin: 10px 10px 0 0;
308 | font-weight: bold;
309 | transition-duration: .5s;
310 | transition-property: top, right;
311 | }
312 |
313 | body[data-page="css"] .for-code.css,
314 | body[data-page="javascript"] .for-code.javascript,
315 | body[data-page="html"] .for-code.html {
316 | display: block;
317 | }
318 |
319 | body[data-view="split-vertical"] .for-code {
320 | right: 50%;
321 | }
322 |
323 | body[data-view="split"] .for-code {
324 | top: 50%;
325 | }
326 |
327 | .line-highlight {
328 | position: absolute;
329 | left: 0;
330 | right: 0;
331 | padding-left: .6em;
332 | margin-top: 1em;
333 | background: url(/img/noise.png) hsla(24, 20%, 50%,.05);
334 | background: url(/img/noise.png), linear-gradient(left, hsla(24, 20%, 50%,.08) 70%, hsla(24, 20%, 50%,0));
335 | }
336 |
337 | .editor.page:not(.focus) > .line-highlight,
338 | body[data-seethrough] .line-highlight {
339 | display: none;
340 | }
341 |
342 | .line-highlight:before,
343 | #jserror .line-number {
344 | display: inline-block;
345 | min-width: 1em;
346 | padding: 0 .5em;
347 | background: inherit;
348 | font: bold 65%/1.5 sans-serif;
349 | text-align: center;
350 | vertical-align: .3em;
351 | border-radius: 999px;
352 | text-shadow: none;
353 | box-shadow: 0 1px white;
354 | }
355 |
356 | .line-highlight:before {
357 | content: attr(data-line);
358 | background-color: hsla(24, 20%, 50%,.4);
359 | color: hsl(24, 20%, 95%);
360 | }
361 |
362 | @keyframes jserror {
363 | 50% {
364 | padding-top: 1em;
365 | }
366 | }
367 |
368 | #jserror {
369 | display: none;
370 | position: absolute;
371 | left: 0;
372 | right: 0;
373 | bottom: 0;
374 | padding: .2em .5em;
375 | border-top: 1px solid #ebb;
376 | background: #edd;
377 | color: #800;
378 | text-shadow: 0 1px 1px white;
379 | line-height: 1.5;
380 | }
381 |
382 | body[data-page="javascript"] #jserror.active {
383 | display: block;
384 | animation: jserror .2s;
385 | }
386 |
387 | #jserror .line-number {
388 | margin-right: .5em;
389 | background: #e99;
390 | color: #fee;
391 | font-size: 80%;
392 | vertical-align: .15em;
393 | }
394 |
395 | #jserror:before {
396 | content: '✖';
397 | float: right;
398 | width: 1em;
399 | padding: .2em;
400 | border: 4px solid hsla(0,0%,100%,.6);
401 | border-radius: 50%;
402 | margin-top: -1em;
403 | text-align: center;
404 | background: #e00;
405 | color: white;
406 | text-shadow: 0 -1px 2px rgba(0,0,0,.5);
407 | font: bold 200%/1 Arial, sans-serif;
408 | }
409 |
410 | .popup {
411 | display: none;
412 | position: absolute;
413 | top: 10%;
414 | bottom: 10%;
415 | left: 50%;
416 | z-index: 20;
417 | width: 60%;
418 | padding: .6em .6em 5.2em;
419 | box-sizing: border-box;
420 | margin-left: -30%;
421 | }
422 |
423 | .popup:target {
424 | display: block;
425 | }
426 |
427 | .popup > h1 {
428 | color: white;
429 | font-size: 160%;
430 | }
431 |
432 | .popup > .close {
433 | position: absolute;
434 | top: 10px;
435 | right: 10px;
436 | width: 1.2em;
437 | font-size: 150%;
438 | line-height: 1.2;
439 | font-weight: bold;
440 | text-align: center;
441 | border-radius: 50%;
442 | }
443 |
444 | .popup > .content {
445 | height: 100%;
446 | padding: 1em;
447 | border: inherit;
448 | overflow: auto;
449 | background-clip: padding-box;
450 | border-radius: 3px;
451 | }
452 |
453 | /**
454 | * Code hightlighting
455 | */
456 | .token {
457 | /* See issue #3 */
458 | padding: .15em 0;
459 | }
460 |
461 | .comment {
462 | color: slategray;
463 | }
464 |
465 | .property,
466 | .tag,
467 | .boolean,
468 | .number,
469 | .popup > .content a {
470 | color: #905;
471 | }
472 |
473 | .selector,
474 | .attr-name,
475 | .string,
476 | .popup > .content a:hover {
477 | color: #690;
478 | }
479 |
480 | .keyword,
481 | .atrule,
482 | .attr-value,
483 | .popup > .content a:active {
484 | color: #07a;
485 | }
486 |
487 | .operator,
488 | .language-css .string {
489 | color: #a67f59;
490 | background: hsla(0,0%,100%,.5);
491 | }
492 |
493 | .important {
494 | color: #e90;
495 | font-weight: bold;
496 | }
497 |
498 | .color,
499 | .abslength,
500 | .easing,
501 | .time,
502 | .angle,
503 | .fontfamily,
504 | .gradient,
505 | .url,
506 | .entity {
507 | text-shadow: 0 1px white, 0 0 .2em hsla(24, 100%, 50%, .5);
508 | cursor: help;
509 | }
510 |
511 | .token[data-active] {
512 | text-shadow: 0 1px white, 0 0 .2em hsla(24, 100%, 50%, .8);
513 | }
514 |
515 | .punctuation {
516 | color: #999;
517 | }
518 |
519 |
520 | /**
521 | * Cute little value previewers
522 | */
523 | .previewer {
524 | display: none;
525 | position: absolute;
526 | left: 120%; /* off the page */
527 | margin-bottom: 10px;
528 | border-radius: 8px;
529 | box-shadow: 1px 1px 8px rgba(0,0,0,.7);
530 | }
531 |
532 | @keyframes previewer {
533 | from { transform: scale(.1); }
534 |
535 | to { transform: scale(1); }
536 | }
537 |
538 | .previewer.active {
539 | display: block;
540 | transform-origin: 50% 100%;
541 | animation: previewer .2s;
542 | animation-timing-function: cubic-bezier(.5,0,.7,1.8);
543 | }
544 |
545 | .previewer.flipped.active {
546 | transform-origin: 50% 0%;
547 | }
548 |
549 | /* pointer */
550 | .previewer:before {
551 | content: '';
552 | position: absolute;
553 | bottom: -6px;
554 | left: 50%;
555 | width: 12px;
556 | height: 12px;
557 | border: inherit;
558 | border-top-width:0;
559 | border-left-width:0;
560 | margin-left: -6px;
561 | border-radius: 12px 0 0;
562 | background: white;
563 | background: linear-gradient(135deg, transparent 48%, white 48%);
564 | transform: rotate(45deg);
565 | box-shadow: inherit;
566 | }
567 |
568 | .previewer.flipped:before {
569 | top: -6px;
570 | background: linear-gradient(315deg, transparent 48%, white 48%);
571 | border-radius: 0 0 12px;
572 | }
573 |
574 | .previewer:after,
575 | #gradient > div {
576 | content: '';
577 | position: absolute;
578 | top: 0; right: 0; bottom: 0; left: 0;
579 | z-index: 2;
580 | border: 5px solid white;
581 | border-radius: inherit;
582 | box-shadow: 1px 1px 5px rgba(0,0,0,.5) inset;
583 | }
584 |
585 | .previewer > img,
586 | .previewer > svg {
587 | display: block;
588 | z-index: 1;
589 | position: relative;
590 | }
591 |
592 | #color,
593 | #gradient,
594 | #url {
595 | background: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb) 5px 5px,
596 | linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb) 15px 15px;
597 | background-size:20px 20px;
598 | }
599 |
600 | #color {
601 | width: 60px;
602 | height: 60px;
603 | margin-left: -30px;
604 | }
605 |
606 | #color:after {
607 | background-color: inherit;
608 | }
609 |
610 | #gradient {
611 | width: 180px;
612 | height: 100px;
613 | margin-left: -100px;
614 | }
615 |
616 | #gradient:after {
617 | content: none;
618 | }
619 |
620 | #abslength {
621 | max-width: 100%;
622 | height: 20px;
623 | border: 1px solid white;
624 | border-radius: 0;
625 | transition: .3s;
626 | transition-property:width, margin-left;
627 | }
628 |
629 | #abslength:before {
630 | bottom: -7px;
631 | background: url(/img/noise.png),
632 | linear-gradient(135deg, hsla(200, 10%, 20%, 0) 47%, hsl(200, 10%, 20%) 48%);
633 | }
634 |
635 | #abslength.flipped:before {
636 | border: inherit;
637 | border-right-width: 0;
638 | border-bottom-width: 0;
639 | background: url(/img/noise.png),
640 | linear-gradient(135deg, hsla(200, 10%, 20%, 0.6), hsla(200, 10%, 20%, 0.8) 46%, transparent 46%);
641 | }
642 |
643 | #abslength[data-size="small"]:before {
644 | width: 6px;
645 | height: 6px;
646 | bottom: -3px;
647 | margin-left: -3px;
648 | }
649 |
650 | #abslength.flipped[data-size="small"]:before {
651 | top: -3px;
652 | }
653 |
654 | #abslength:after {
655 | border: 0;
656 | background:
657 | linear-gradient(left, transparent 19px, rgba(255,255,255,.6) 19px) left top repeat-x,
658 | linear-gradient(left, transparent 4px, rgba(255,255,255,.4) 4px) left top repeat-x,
659 | url(/img/noise.png), linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
660 | background:
661 | linear-gradient(to right, transparent 19px, rgba(255,255,255,.6) 19px) left top repeat-x,
662 | linear-gradient(to right, transparent 4px, rgba(255,255,255,.4) 4px) left top repeat-x,
663 | url(/img/noise.png), linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
664 | background-size: 20px 10px, 5px 5px, auto, auto;
665 | box-shadow: none;
666 | }
667 |
668 | #time,
669 | #angle {
670 | width: 74px;
671 | height: 74px;
672 | margin-left: -37px;
673 | background: linear-gradient(right, hsla(24, 20%, 95%, .4), hsl(24, 20%, 95%) 95%);
674 | border-radius: 37px;
675 | }
676 |
677 | #time:before,
678 | #angle:before {
679 | bottom: -4px;
680 | }
681 |
682 | #time:after,
683 | #angle:after {
684 | background: url(/img/noise.png);
685 | z-index: 2;
686 | }
687 |
688 | #angle > svg,
689 | #time > svg {
690 | margin: 5px;
691 | width: 64px;
692 | height: 64px;
693 | border-radius: 32px;
694 | background: inherit;
695 | transform: rotate(-90deg);
696 | -webkit-transform: translateZ(0) rotate(-90deg); /* bugfix for WebKit */
697 | }
698 |
699 | #angle[data-negative] > svg {
700 | transform: scaleX(-1) rotate(-90deg);
701 | -webkit-transform: translateZ(0) scaleX(-1) rotate(-90deg); /* bugfix for WebKit */
702 | }
703 |
704 | #time circle,
705 | #angle circle {
706 | stroke: hsl(200, 10%, 20%);
707 | stroke-opacity: .9;
708 | fill: transparent;
709 | stroke-width: 31.8;
710 | }
711 |
712 | #fontfamily {
713 | padding: .5em 0 .3em;
714 | width: 10em;
715 | margin-left: -5em;
716 | color: white;
717 | font-size: 150%;
718 | font-style: italic;
719 | line-height: 1.8;
720 | text-align: center;
721 | white-space: pre-line;
722 | }
723 |
724 | #fontfamily:first-line {
725 | display: block;
726 | font-style: normal;
727 | }
728 |
729 | #easing {
730 | width: 100px;
731 | height: 100px;
732 | padding: 5px;
733 | margin-left: -50px;
734 | }
735 |
736 |
737 | #easing:after {
738 | z-index: 2;
739 | }
740 |
741 |
742 | #easing circle {
743 | stroke: white;
744 | fill: hsl(200, 10%, 20%);
745 | }
746 |
747 | #easing path {
748 | fill: none;
749 | stroke: white;
750 | stroke-width: 4;
751 | stroke-linecap: round;
752 | }
753 |
754 | #easing line {
755 | stroke: white;
756 | stroke-opacity:.5;
757 | stroke-width: 2;
758 | marker: url(#marker);
759 | }
760 |
761 | #url {
762 | padding: 5px;
763 | }
764 |
765 | #url > img {
766 | max-width: 200px;
767 | max-height: 200px;
768 | }
769 |
770 | #url > img.error {
771 | width: 50px;
772 | height: 50px;
773 | }
774 |
775 | #entity {
776 | min-width: 1.6em;
777 | margin-left: -.8em;
778 | font-size: 500%;
779 | color: white;
780 | text-align: center;
781 | text-shadow: .02em .02em .06em black;
782 | }
--------------------------------------------------------------------------------
/code/prism.js:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.14.0
2 | http://prismjs.com/download.html?#themes=prism&languages=markup+css+clike+javascript&plugins=line-highlight */
3 | var _self = (typeof window !== 'undefined')
4 | ? window // if in browser
5 | : (
6 | (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
7 | ? self // if in worker
8 | : {} // if in node js
9 | );
10 |
11 | /**
12 | * Prism: Lightweight, robust, elegant syntax highlighting
13 | * MIT license http://www.opensource.org/licenses/mit-license.php/
14 | * @author Lea Verou http://lea.verou.me
15 | */
16 |
17 | var Prism = (function(){
18 |
19 | // Private helper vars
20 | var lang = /\blang(?:uage)?-([\w-]+)\b/i;
21 | var uniqueId = 0;
22 |
23 | var _ = _self.Prism = {
24 | manual: _self.Prism && _self.Prism.manual,
25 | disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
26 | util: {
27 | encode: function (tokens) {
28 | if (tokens instanceof Token) {
29 | return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
30 | } else if (_.util.type(tokens) === 'Array') {
31 | return tokens.map(_.util.encode);
32 | } else {
33 | return tokens.replace(/&/g, '&').replace(/ text.length) {
325 | // Something went terribly wrong, ABORT, ABORT!
326 | return;
327 | }
328 |
329 | if (str instanceof Token) {
330 | continue;
331 | }
332 |
333 | if (greedy && i != strarr.length - 1) {
334 | pattern.lastIndex = pos;
335 | var match = pattern.exec(text);
336 | if (!match) {
337 | break;
338 | }
339 |
340 | var from = match.index + (lookbehind ? match[1].length : 0),
341 | to = match.index + match[0].length,
342 | k = i,
343 | p = pos;
344 |
345 | for (var len = strarr.length; k < len && (p < to || (!strarr[k].type && !strarr[k - 1].greedy)); ++k) {
346 | p += strarr[k].length;
347 | // Move the index i to the element in strarr that is closest to from
348 | if (from >= p) {
349 | ++i;
350 | pos = p;
351 | }
352 | }
353 |
354 | // If strarr[i] is a Token, then the match starts inside another Token, which is invalid
355 | if (strarr[i] instanceof Token) {
356 | continue;
357 | }
358 |
359 | // Number of tokens to delete and replace with the new match
360 | delNum = k - i;
361 | str = text.slice(pos, p);
362 | match.index -= pos;
363 | } else {
364 | pattern.lastIndex = 0;
365 |
366 | var match = pattern.exec(str),
367 | delNum = 1;
368 | }
369 |
370 | if (!match) {
371 | if (oneshot) {
372 | break;
373 | }
374 |
375 | continue;
376 | }
377 |
378 | if(lookbehind) {
379 | lookbehindLength = match[1] ? match[1].length : 0;
380 | }
381 |
382 | var from = match.index + lookbehindLength,
383 | match = match[0].slice(lookbehindLength),
384 | to = from + match.length,
385 | before = str.slice(0, from),
386 | after = str.slice(to);
387 |
388 | var args = [i, delNum];
389 |
390 | if (before) {
391 | ++i;
392 | pos += before.length;
393 | args.push(before);
394 | }
395 |
396 | var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);
397 |
398 | args.push(wrapped);
399 |
400 | if (after) {
401 | args.push(after);
402 | }
403 |
404 | Array.prototype.splice.apply(strarr, args);
405 |
406 | if (delNum != 1)
407 | _.matchGrammar(text, strarr, grammar, i, pos, true, token);
408 |
409 | if (oneshot)
410 | break;
411 | }
412 | }
413 | }
414 | },
415 |
416 | tokenize: function(text, grammar, language) {
417 | var strarr = [text];
418 |
419 | var rest = grammar.rest;
420 |
421 | if (rest) {
422 | for (var token in rest) {
423 | grammar[token] = rest[token];
424 | }
425 |
426 | delete grammar.rest;
427 | }
428 |
429 | _.matchGrammar(text, strarr, grammar, 0, 0, false);
430 |
431 | return strarr;
432 | },
433 |
434 | hooks: {
435 | all: {},
436 |
437 | add: function (name, callback) {
438 | var hooks = _.hooks.all;
439 |
440 | hooks[name] = hooks[name] || [];
441 |
442 | hooks[name].push(callback);
443 | },
444 |
445 | run: function (name, env) {
446 | var callbacks = _.hooks.all[name];
447 |
448 | if (!callbacks || !callbacks.length) {
449 | return;
450 | }
451 |
452 | for (var i=0, callback; callback = callbacks[i++];) {
453 | callback(env);
454 | }
455 | }
456 | }
457 | };
458 |
459 | var Token = _.Token = function(type, content, alias, matchedStr, greedy) {
460 | this.type = type;
461 | this.content = content;
462 | this.alias = alias;
463 | // Copy of the full string this token was created from
464 | this.length = (matchedStr || "").length|0;
465 | this.greedy = !!greedy;
466 | };
467 |
468 | Token.stringify = function(o, language, parent) {
469 | if (typeof o == 'string') {
470 | return o;
471 | }
472 |
473 | if (_.util.type(o) === 'Array') {
474 | return o.map(function(element) {
475 | return Token.stringify(element, language, o);
476 | }).join('');
477 | }
478 |
479 | var env = {
480 | type: o.type,
481 | content: Token.stringify(o.content, language, parent),
482 | tag: 'span',
483 | classes: ['token', o.type],
484 | attributes: {},
485 | language: language,
486 | parent: parent
487 | };
488 |
489 | if (o.alias) {
490 | var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
491 | Array.prototype.push.apply(env.classes, aliases);
492 | }
493 |
494 | _.hooks.run('wrap', env);
495 |
496 | var attributes = Object.keys(env.attributes).map(function(name) {
497 | return name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
498 | }).join(' ');
499 |
500 | return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '' + env.tag + '>';
501 |
502 | };
503 |
504 | if (!_self.document) {
505 | if (!_self.addEventListener) {
506 | // in Node.js
507 | return _self.Prism;
508 | }
509 |
510 | if (!_.disableWorkerMessageHandler) {
511 | // In worker
512 | _self.addEventListener('message', function (evt) {
513 | var message = JSON.parse(evt.data),
514 | lang = message.language,
515 | code = message.code,
516 | immediateClose = message.immediateClose;
517 |
518 | _self.postMessage(_.highlight(code, _.languages[lang], lang));
519 | if (immediateClose) {
520 | _self.close();
521 | }
522 | }, false);
523 | }
524 |
525 | return _self.Prism;
526 | }
527 |
528 | //Get current script and highlight
529 | var script = document.currentScript || [].slice.call(document.getElementsByTagName("script")).pop();
530 |
531 | if (script) {
532 | _.filename = script.src;
533 |
534 | if (!_.manual && !script.hasAttribute('data-manual')) {
535 | if(document.readyState !== "loading") {
536 | if (window.requestAnimationFrame) {
537 | window.requestAnimationFrame(_.highlightAll);
538 | } else {
539 | window.setTimeout(_.highlightAll, 16);
540 | }
541 | }
542 | else {
543 | document.addEventListener('DOMContentLoaded', _.highlightAll);
544 | }
545 | }
546 | }
547 |
548 | return _self.Prism;
549 |
550 | })();
551 |
552 | if (typeof module !== 'undefined' && module.exports) {
553 | module.exports = Prism;
554 | }
555 |
556 | // hack for components to work correctly in node.js
557 | if (typeof global !== 'undefined') {
558 | global.Prism = Prism;
559 | }
560 | ;
561 | Prism.languages.markup = {
562 | 'comment': //,
563 | 'prolog': /<\?[\s\S]+?\?>/,
564 | 'doctype': //i,
565 | 'cdata': //i,
566 | 'tag': {
567 | pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
568 | greedy: true,
569 | inside: {
570 | 'tag': {
571 | pattern: /^<\/?[^\s>\/]+/i,
572 | inside: {
573 | 'punctuation': /^<\/?/,
574 | 'namespace': /^[^\s>\/:]+:/
575 | }
576 | },
577 | 'attr-value': {
578 | pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
579 | inside: {
580 | 'punctuation': [
581 | /^=/,
582 | {
583 | pattern: /(^|[^\\])["']/,
584 | lookbehind: true
585 | }
586 | ]
587 | }
588 | },
589 | 'punctuation': /\/?>/,
590 | 'attr-name': {
591 | pattern: /[^\s>\/]+/,
592 | inside: {
593 | 'namespace': /^[^\s>\/:]+:/
594 | }
595 | }
596 |
597 | }
598 | },
599 | 'entity': /?[\da-z]{1,8};/i
600 | };
601 |
602 | Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
603 | Prism.languages.markup['entity'];
604 |
605 | // Plugin to make entity title show the real entity, idea by Roman Komarov
606 | Prism.hooks.add('wrap', function(env) {
607 |
608 | if (env.type === 'entity') {
609 | env.attributes['title'] = env.content.replace(/&/, '&');
610 | }
611 | });
612 |
613 | Prism.languages.xml = Prism.languages.markup;
614 | Prism.languages.html = Prism.languages.markup;
615 | Prism.languages.mathml = Prism.languages.markup;
616 | Prism.languages.svg = Prism.languages.markup;
617 |
618 | Prism.languages.css = {
619 | 'comment': /\/\*[\s\S]*?\*\//,
620 | 'atrule': {
621 | pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i,
622 | inside: {
623 | 'rule': /@[\w-]+/
624 | // See rest below
625 | }
626 | },
627 | 'url': /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
628 | 'selector': /[^{}\s][^{};]*?(?=\s*\{)/,
629 | 'string': {
630 | pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
631 | greedy: true
632 | },
633 | 'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
634 | 'important': /\B!important\b/i,
635 | 'function': /[-a-z0-9]+(?=\()/i,
636 | 'punctuation': /[(){};:]/
637 | };
638 |
639 | Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
640 |
641 | if (Prism.languages.markup) {
642 | Prism.languages.insertBefore('markup', 'tag', {
643 | 'style': {
644 | pattern: /(