-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathindex.html
115 lines (94 loc) · 4.89 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
<!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://prismjs.com/themes/prism.css">
<link rel="stylesheet" href="https://prismjs.com/plugins/line-numbers/prism-line-numbers.css">
<link rel="stylesheet" href="prism-live.css">
<link rel="stylesheet" href="style.css">
<style>
foo {
background: black;
}
</style>
<script>
// Try writing some JS here!
</script>
</head>
<body>
<header>
<h1>
<img src="https://prismjs.com/assets/logo.svg" alt="Prism"> Live!
</h1>
<h2>
Lightweight, extensible, powerful web-based code editor
</h2>
</header>
<main>
<section>
<h2>Demos</h2>
<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>
<section>
<h2>Including the library</h2>
<h3>ESM</h3>
<p>You will need to include Prism before including Prism Live.
You can either manually include <code>prism-live.css</code> yourself, and import <code>prism-live.js</code> and any language components,
and then call <code>PrismLive.registerLanguage(id, lang)</code>
or you can use the built-in dynamic loader and just include <code>prism-live.mjs</code> with a <code>load</code> parameter
about which components to include.
</p>
<p>For example, to include definitions for CSS, HTML, and JS:</p>
<pre class="language-html"><code><script src="prism-live.mjs?load=css,html,javascript"></script></code></pre>
<p>or in JS:</p>
<pre class="language-js"><code>import PrismLive from "prism-live.mjs?load=css,html,javascript";</code></pre>
<p>Using the <code>load</code> parameter also automatically includes <code>prism-live.css</code>, regardless of the value.</p>
<h3>Non-ESM</h3>
<p>You will need to include Prism before including Prism Live.
You can either manually include <code>prism-live.css</code>, <code>prism-live.js</code> and any language components,
or you can use the built-in dynamic loader and just include <code>prism-live.js</code> with a <code>load</code> parameter
about which components to include.
</p>
<p>For example, to include definitions for CSS, HTML, and JS:</p>
<pre class="language-html"><code><script src="prism-live.js?load=css,html,javascript"></script></code></pre>
<p>Using the <code>load</code> parameter also automatically includes <code>prism-live.css</code>, regardless of the value.</p>
</section>
<section>
<h2>Initialization</h2>
<h3>Via a <code><textarea></code></h3>
<p>If the primary use case is editing, it makes sense to intialize from a <code><textarea></code>,
so that the code is still editable, even if the JavaScript fails to load.
Just include a <code class="language-markup"><textarea class="prism-live language-xxx"></code> in your HTML.
It will automatically be initialized, with the contents of the textarea as the code.</p>
<h3>Via a <code><pre><code></code></h3>
<p>If the primary use case is displaying code, it makes sense to initialize from a <code><pre><code></code>, same as the one you'd write for using Prism.
Just use a class of <code>prism-live</code> on it, and Prism Live will take care of the rest.</p>
</section>
<section>
<h2>Customization</h2>
<p>The editor consists of three elements, all with the class <code>prism-live</code>: A <code><textarea></code>, a <code><pre></code> after it, and a <code><div></code> that wraps both.</p>
<p>In many cases, just applying CSS to <code>pre.prism-live</code> or <code>div.prism-live</code> should work.</p>
<p>For setting a height or maximum height on the editor, either set them on the <code><pre></code> (if using that as a source), or set <code>--height</code> or <code>--max-height</code> respectively on the <code><textarea></code></p>
<p>There are also <code>--selection-background</code> and <code>--selection-color</code> properties available on the <code><textarea></code></p>
</section>
</main>
<footer>
Made by <a href="http://lea.verou.me">Lea Verou</a>, currently a work in progress.
</footer>
<script src="https://blissfuljs.com/bliss.shy.min.js"></script>
<script src="https://prismjs.com/prism.js"></script>
<script src="https://prismjs.com/plugins/line-numbers/prism-line-numbers.js"></script>
<script src="src/prism-live.js?load=markup,css,javascript"></script>
<script src="index.js"></script>
</body>
</html>