-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (91 loc) · 4.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prism Live: Lightweight, extensible, powerful web-based code editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.css" integrity="sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="src/prism-live.css">
<link rel="stylesheet" href="demo.css">
<style>
button[id*="theme"]{
background:lightgreen;
}
button[id*="wrap"]{
background-color: lightsalmon;
}
</style>
<script>
</script>
</head>
<body>
<plain style="display:none;">
</plain>
<main>
<section>
<h2>Demos</h2>
<div id="buttons"></div>
<h3>Height grows with code / HTML editing</h3>
<textarea class="prism-live language-html fill"></textarea>
<h3>Supports line-numbers</h3>
<textarea class="prism-live line-numbers language-html fill"></textarea>
<h3>Specific height / CSS editing</h3>
<textarea class="prism-live language-css fill" style="--height: 15em"></textarea>
<h3>Height grows up to specific max height / JS editing</h3>
<textarea class="prism-live language-js fill" style="--max-height: 30em"></textarea>
<h3>Initialization with <code><pre></code></h3>
<pre class="prism-live language-js"><code>let foo = bar();</code></pre>
</section>
</main>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.6/bliss.shy.min.js" integrity="sha512-MxBdQXQ8H/eviAINQi9I3C5hl/mG7hbiB5KEAUdKcr0CVJpjmyXNyRSh4wIzX3/5oHK8L1B8svUuKXWu70RAVA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js" integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js" integrity="sha512-dubtf8xMHSQlExGRQ5R7toxHLgSDZ0K7AunqPWHXmJQ8XyVIG19S1T95gBxlAeGOK02P4Da2RTnQz0Za0H0ebQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="src/prism-live-lite.js"></script>
<!--
<script src="src/prism-live.js"></script>
<script src="src/prism-live-css.js"></script>
<script src="src/prism-live-javascript.js"></script>
<script src="src/prism-live-markup.js"></script>-->
<script src="demo.js"></script>
<script>
function invertHex(hex) {
return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase()
}
async function makeTheme(css){
let url = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/${css}`
let link = document.querySelector('link[rel="stylesheet"][href^="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/"]');
link.integrity='';
link.href=url;
let i=0;
window.__cid__link=clearInterval(window.__cid__link)
window.__cid__link=setInterval(()=>{
if(++i>=8) clearInterval(window.__cid__link)
let elm =document.querySelector('pre.prism-live')
if(!elm) return;
let c1= [...getComputedStyle(elm).backgroundColor.matchAll( /\d+/g)].map(x=>(+x[0]).toString(16)).join('');
let c2 = invertHex(c1);
document.documentElement.style.setProperty('--caret-color','#'+c2)
},400)
}
let btns={
'toggle-wrap': ()=>document.querySelector('main').classList.toggle('toggle-wrap'),
'theme-prism': ()=>makeTheme('prism.min.css'),
'theme-prism-coy': ()=>makeTheme('prism-coy.min.css'),
'theme-prism-dark': ()=>makeTheme('prism-dark.min.css'),
'theme-prism-okaidia': ()=>makeTheme('prism-okaidia.min.css'),
'theme-prism-solarizedlight': ()=>makeTheme('prism-solarizedlight.min.css'),
'theme-prism-tomorrow': ()=>makeTheme('prism-tomorrow.min.css'),
'theme-prism-twilight': ()=>makeTheme('prism-twilight.min.css'),
}
for(var btnId in btns){
let btn = document.createElement('button');
btn.id=btnId;
btn.textContent=btnId;
btn.addEventListener('click', btns[btnId], false);
document.querySelector('#buttons').appendChild(btn)
}
</script>
</body>
</html>