Demos
Height grows with code / HTML editing
Supports line-numbers
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.
Non-ESM
You will need to include Prism before including Prism Live.
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>