Highlight JS Lite

JamsEDU uses Highlight JS Lite (HLJSL) to provide syntax highlighting for code blocks. Out of the box it gives you automatic language detection, line numbers, a copy to clipboard button, automatic indentation correction, and colors that respect your site's light or dark mode. It is designed to work with zero configuration but can be customized when needed.

You can customize how highlighting behaves by editing jamsEduConfig.highlightJsLite in assets/js/main.js. Set only the properties you need and anything you omit will use the default values. To disable highlighting entirely, set the whole key to false. For more on how jamsEduConfig works across all built-ins, see Optional Settings.

useMutationObserver: When true (default), new pre > code blocks added to the page after load are automatically highlighted through the shared DOM watcher. When false, only code blocks present in the DOM at load time are processed.
version: The HLJSL version to load from jsDelivr. Currently defaults to 4.3.0.
Other keys: Forwarded directly to window.hljslConfig. See the HLJSL project for additional supported keys.

Basic Markup

Wrap your code in a pre element containing a code element. You can set a language class on the code element to specify the language explicitly, or leave it off and let HLJSL detect the language automatically. Thanks to the built-in indentation correction, you can indent your code blocks just like any other HTML in your source files.


        <pre><code class="javascript">
            const greeting = 'Hello';
            console.log(greeting);
        </code></pre>

Line Numbers

Line numbers are shown by default on all code blocks. You can control this per block by adding the class hide-numbers or show-numbers to the pre element. You can also set a minimum line threshold so that short blocks hide their numbers automatically.


        <!-- Hide line numbers on this block -->
        <pre class="hide-numbers"><code class="javascript">
            console.log('No line numbers here');
        </code></pre>

        <!-- Force line numbers even if globally hidden -->
        <pre class="show-numbers"><code class="javascript">
            console.log('Line numbers shown');
        </code></pre>

Mini Editors

HLJSL can turn any code block into an editable mini editor. Add the class editor to the pre element and the code area becomes editable with live syntax highlighting as you type. By default the language is detected automatically as the user types, but you can lock it to a specific language by adding both a language class and the locked class to the code element. Try editing the code below:


        def greet(name):
            return f"Hello, {name}!"

        print(greet("World"))

This editor is locked to HTML so only HTML syntax is highlighted regardless of what you type:


        <div class="callout notice">
            <div class="title">Hello</div>
            <p>Try editing this HTML.</p>
        </div>

Here is an example of how to add different types of editors to your page:


        <!-- Editable, language auto-detected -->
        <pre class="editor"><code class="python">
            def greet(name):
                return f"Hello, {name}!"
        </code></pre>

        <!-- Editable, locked to HTML -->
        <pre class="editor"><code class="html locked">
            &lt;div class="callout notice"&gt;
                &lt;div class="title"&gt;Hello&lt;/div&gt;
                &lt;p&gt;Try editing this HTML.&lt;/p&gt;
            &lt;/div&gt;
        </code></pre>

When displaying HTML markup inside a pre code block or editor, you must encode angle brackets as < and > so the browser does not interpret them as actual HTML tags.

Copy with Context

The copy button copies the code to the clipboard by default. You can enhance this by placing template elements directly before and after your pre block. Any content inside these templates will be included with the copied code, which is useful for sharing instructions, prompts, or context alongside your code. Try copying the code below and pasting it into a text editor or AI tool to see the full output.


        rooms = {
            'start': {
                'description': 'You are in a dimly lit entrance hall.',
                'north': 'hallway',
                'items': ['torch']
            },
            'hallway': {
                'description': 'A long hallway stretches before you.',
                'south': 'start',
                'east': 'treasure_room',
                'locked': True,
                'requires': 'key'
            },
            'treasure_room': {
                'description': 'Gold glimmers in the torchlight.',
                'items': ['treasure']
            }
        }


        <template>Your prompt or instructions before the code.</template>
        <pre><code class="python">
            your_code_here = True
        </code></pre>
        <template>Your prompt or instructions after the code.</template>

Styling

In a standard JamsEDU app that keeps the built-in theming stack, HLJSL automatically follows the same light and dark palettes as the rest of your site. If you need to customize the code block appearance specifically, you can override HLJSL variables like --highlight-bg, --highlight-color, and --editor-control-bar on :root or a wrapper element. Make sure your overrides load after the HLJSL stylesheet or use @layer so they take priority. For the full list of available variables see the HLJSL styling documentation. For details on how JamsEDU theming works as a whole, see the CSS and Theming guide.