<textarea class="prism-live language-html fill" spellcheck="false"></textarea>
<textarea class="prism-live line-numbers language-html fill" spellcheck="false"></textarea>
<textarea class="prism-live language-css fill" style="--height: 15em" spellcheck="false"></textarea>
<textarea class="prism-live language-js fill" style="--max-height: 40vh" spellcheck="false"></textarea>
let foo = bar();
<pre class="prism-live language-js" spellcheck="false"><code></code></pre>
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.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:
load parameter also automatically includes
prism-live.css, regardless of the value.
If the primary use case is editing, it makes sense to intialize from a
<textarea class="prism-live language-xxx"> in your HTML. It will automatically be initialized, with the contents of the textarea as the 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.
The editor consists of three elements, all with the class
<pre> after it, and a
<div> that wraps both.
In many cases, just applying CSS to
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
--max-height respectively on the
There are also
--selection-color properties available on the
This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):