index.html

<!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>&lt;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>&lt;script src="prism-live.mjs?load=css,html,javascript">&lt;/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>&lt;script src="prism-live.js?load=css,html,javascript">&lt;/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>&lt;textarea></code></h3>

		<p>If the primary use case is editing, it makes sense to intialize from a <code>&lt;textarea></code>,
			so that the code is still editable, even if the JavaScript fails to load.
			Just include a <code class="language-markup">&lt;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>&lt;pre>&lt;code></code></h3>

		<p>If the primary use case is displaying code, it makes sense to initialize from a <code>&lt;pre>&lt;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>&lt;textarea></code>, a <code>&lt;pre></code> after it, and a <code>&lt;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>&lt;pre></code> (if using that as a source), or set <code>--height</code> or <code>--max-height</code> respectively on the <code>&lt;textarea></code></p>
		<p>There are also <code>--selection-background</code> and <code>--selection-color</code> properties available on the <code>&lt;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>