Prism Live: Lightweight, extensible, powerful web-based code editor

Demos

Height grows with code / HTML editing

<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Prism Live: Lightweight, extensible, powerful web-based code editor</title>
	<link rel="stylesheet" href="./src/style.css" />
</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>
</body>
</html>

Specific height / CSS editing

div.prism-live {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
}

textarea.prism-live,
pre.prism-live {
	padding: 0.2rem 0.5rem;
	box-sizing: border-box;
	margin: 0;
}

@supports (not (caret-color: black)) and (-webkit-text-fill-color: black) {
	textarea.prism-live {
		color: inherit;
		-webkit-text-fill-color: transparent;
	}
}

Height grows up to specific max height / JS editing

var ret = {};
var canonical = new WeakMap(
	Object.entries(Prism.languages)
		.map((x) => x.reverse())
		.reverse()
);

for (var id in Prism.languages) {
	var grammar = Prism.languages[id];

	if (typeof grammar !== "function") {
		ret[id] = canonical.get(grammar);
	}
}

return ret;

Initialization with `<pre>`

let foo = bar();

Including the library

ESM

You will need to include Prism before including Prism Live. You can either manually include prism-live.css yourself, and import prism-live.js and any language components, and then call PrismLive.registerLanguage(id, lang) or you can use the built-in dynamic loader and just include prism-live.mjs with a load parameter about which components to include.

For example, to include definitions for CSS, HTML, and JS:

<script src="prism-live.mjs?load=css,html,javascript"></script>

or in JS:

import PrismLive from "prism-live.mjs?load=css,html,javascript";

Using the load parameter also automatically includes prism-live.css, regardless of the value.

Initialization

Via a `<textarea>`

If the primary use case is editing, it makes sense to intialize from a <textarea>, so that the code is still editable, even if the JavaScript fails to load. Just include a <textarea class="prism-live language-xxx"> in your HTML. It will automatically be initialized, with the contents of the textarea as the code.

Via a `<pre><code>`

If the primary use case is displaying code, it makes sense to initialize from a <pre><code>, same as the one you'd write for using Prism. Just use a class of prism-live on it, and Prism Live will take care of the rest.

Customization

The editor consists of three elements, all with the class prism-live: A <textarea>, a <pre> after it, and a <div> that wraps both.

In many cases, just applying CSS to pre.prism-live or div.prism-live should work.

For setting a height or maximum height on the editor, either set them on the <pre> (if using that as a source), or set --height or --max-height respectively on the <textarea>

There are also --selection-background and --selection-color properties available on the <textarea>