Syntax Highlight - Live (via Prism Live)

This page shows how Prism Live turns ordinary code blocks into editable, syntax-highlighted examples. Everything here runs against the local bundled assets included in the full example project.

Start with the quick-start pattern, then compare the editor behaviors below to choose the variant that best matches your use case.

• Use a <textarea> when editing is the primary goal.
• Use a <pre><code> source when display is primary but inline editing is still useful.
• Control vertical behavior with automatic growth, a fixed height, or a max-height limit.

Quick Start

Prism Live works best when the setup is treated as a small progression: load Prism first, choose the source element, then add any sizing or utility classes you need.

1. Load Assets in Order

Load Prism before Prism Live. If you want HTML, CSS, and JavaScript editing, include the core library plus the language bundles you expect to use.

<link rel="stylesheet" href="/asset/module/prism-live/prism-live.min.css">
<script src="/asset/js/module/prism/prism.min.js"></script>
<script src="/asset/module/prism-live/bliss.shy.min.js"></script>
<script src="/asset/module/prism-live/prism-live.min.js"></script>
<script src="/asset/module/prism-live/prism-live-css.min.js"></script>
<script src="/asset/module/prism-live/prism-live-javascript.min.js"></script>
<script src="/asset/module/prism-live/prism-live-markup.min.js"></script>

2. Start with the Smallest Useful Markup

A textarea-based setup is the most resilient default because the content is still editable even if Prism Live fails to initialize.

<textarea class="prism-live language-html fill" spellcheck="false">
&lt;section&gt;
  &lt;h2&gt;Editable Example&lt;/h2&gt;
&lt;/section&gt;
</textarea>

3. Layer on Behavior

Add line-numbers for scanning, --height when the editor should stay fixed, or --max-height when the editor can grow up to a limit.

Interactive Demos

Each example below uses the same base initialization pattern, then changes one behavior so the tradeoff is easy to see.

1. Auto Height While Editing HTML

Use this pattern when the amount of content is short or unpredictable and you want the editor to expand naturally as lines are added.

Markup:

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

2. Line Numbers for Longer Markup

Line numbers are useful once the example becomes reference material instead of a tiny snippet. They help when discussing or documenting specific rows.

Markup:

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

3. Fixed Height While Editing CSS

Use a fixed editor height when the surrounding layout should stay stable, such as inside cards, sidebars, or dense documentation pages.

Markup:

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

4. Max Height While Editing JavaScript

This is a middle ground between the first two approaches: the editor can expand for a while, then scroll once it reaches the defined limit.

Markup:

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

5. Initialization with <pre>

Use the pre-based variant when you want Prism-style display markup first and editable enhancement as a secondary behavior.

let foo = bar();

Markup:

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

Choosing the Right Pattern

Prism Live is straightforward once you decide whether the source markup should favor editing, presentation, or size constraints.

• Textarea source: best for forms, playgrounds, editable examples, and progressive enhancement.
• Pre source: best for documentation pages that already use Prism-style markup.
• Automatic height: best for short or changing snippets.
• Fixed height: best when the surrounding layout should not move.
• Max height: best when you want natural growth first and scrolling later.

Structure and Customization

After initialization, the editor is made from three prism-live elements: the source <textarea>, a generated <pre>, and a wrapping <div>. In practice, most visual changes can be handled on the wrapper or the generated pre element.

For sizing, set --height or --max-height on the source <textarea>. For selection styling, set --selection-background and --selection-color on that same source element.

The page you are reading adds a small layer of wrapper styling on top of Prism and Prism Live so the editors align with the rest of this project's code-block presentation.

Project Asset Notes

This example uses local bundled Prism Live files from /asset/module/prism-live/ together with the Prism theme and toolbar styles already used elsewhere in the project.

If you want a lighter integration, Prism Live also supports a query-string loader pattern such as the example below:

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

Attribution