Prism Live

Demos

Height grows with code / HTML editing

Implementation:

<textarea class="prism-live language-html fill" spellcheck="false"></textarea>

Supports line-numbers

Implementation:

<textarea class="prism-live line-numbers language-html fill" spellcheck="false"></textarea>

Specific height / CSS editing

Implementation:

<textarea class="prism-live language-css fill" style="--height: 15rem" spellcheck="false"></textarea>

Height grows up to specific max height / JS editing

Implementation:

<textarea class="prism-live language-js fill" style="--max-height: 40vh" spellcheck="false"></textarea>

Initialization with <pre>

let foo = bar();

Implementation:

<pre class="prism-live language-js" spellcheck="false"><code></code></pre>

Including the library

You will need to include Prism before including Prism Live. You will also need to include Bliss, though if you don’t it will be loaded dynamically. You can either manually include prism-live.css, prism-live.js and any language components, or you can use the built-in dynamic loader and just include prism-live.js with a load parameter about which components to include.

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

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

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>

Special Thanks