Live!

Demos

Height grows with code / HTML editing

Specific height / CSS editing

Height grows up to specific max height / JS editing

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>