Height grows with code / HTML editing
Specific height / CSS editing
Height grows up to specific max height / JS editing
let foo = bar();
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.js and any language components,
or you can use the built-in dynamic loader and just include
prism-live.js with a
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
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.
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