Browser-native code surfaces

MicroLighter Syntax Highlighter Examples

A tiny dependency-free syntax highlighter for the web. Add MicroLighter to a page and style code blocks with CSS highlight pseudo-elements.

Vanilla JS No jQuery No build step 35 grammars

Live syntax surface Change the theme to recolor every highlighted range.

Syntax theme

01 / AUTO RUN

Drop-in mode

Mark the block. Let the page scan.

A standard pre > code block is highlighted on load. The same runner can rescan markup added later.

auto-run / javascript

const block = document.querySelector("#auto-block");
const liveRanges = CSS.highlights;

document.documentElement.dataset.ready =
  liveRanges ? "highlighted" : "unsupported";

Dispatches syntax-highlight after insertion.

02 / CUSTOM ELEMENT

Encapsulated controls

Copy, count, and style the surface.

The opt-in element keeps the original code in the light DOM while adding copy controls, line numbers, language precedence, and exposed CSS parts.

Copy control controls="copy"

class Signal extends HTMLElement {
  connectedCallback() {
    this.textContent = "ready";
  }
}

customElements.define("x-signal", Signal);

Line numbers + inferred language line-numbers

def active_scope(name: str) -> str:
    return f"scope:{name}"


print(active_scope("function"))

Exposed parts ::part()

.custom-demo::part(copy-button) {
  background: var(--accent);
}

.custom-demo::part(line-numbers) {
  color: var(--accent);
}

type Status = "ready" | "busy";
const current: Status = "ready";

03 / PROGRAMMATIC

Editable rendering

Change the source. Repaint the ranges.

The editor below calls highlightAll() with a scoped root, a custom selector, and optional aliases.

programmatic playground ready for input

Grammar

Metadata mode

Source input

Highlighted preview

04 / GRAMMAR LAB

Load on demand

Pick any shipped grammar.

Each option below points at a separate grammar module. The preview requests only the language you choose.

Preview a language

35 grammar modules

Aliases: js -> javascript ts -> typescript py -> python sh -> bash md -> markdown yml -> yaml