Liquid Highlighting
The problem
Personalization logic in Blueshift is written in Liquid, and on the Bee canvas it renders as flat gray text. A sophisticated template’s HTML block is a wall of undifferentiated code.
Syntax highlighting makes that kind of code much easier to scan, but the Bee canvas renders Liquid as plain text, so the people maintaining conditional content, loops, and shared-asset wiring do it with no color cues. Errors like an unclosed tag or a string missing its quote hide in the gray.
How it works
Nitro scans the text on the design canvas for Liquid constructs and paints them with the browser’s CSS Custom Highlight API. Painting is the operative word: the API styles ranges of existing text directly, without wrapping anything in extra markup. The canvas content itself is never modified.
Highlighting reacts live to edits and to the popup toggle, with no reload needed.
What gets colored
| Construct | Example |
|---|---|
| Logic tags | {% if premium_member %} |
| Output expressions | {{ first_name | capitalize }} |
| Shared-asset delimiters | [shared_asset] bsft_Header [/shared_asset] |
| Quoted strings inside tags | "utm_source=email" |
Using it
- Enable Liquid Highlighting in the Nitro popup (it is on by default).
- Open a template’s Content tab. Any Liquid in HTML blocks and shared assets on the canvas is colored automatically.
- Toggle it off and on from the popup at any time; the change applies instantly.
Why it can’t corrupt content
This one design decision matters more than any other: what you see on the Bee
canvas is serialized back into your saved template. A highlighter that wrapped
Liquid in <span> tags, the way most syntax highlighters work,
would leak those spans into your actual email HTML and corrupt it.
The CSS Custom Highlight API exists precisely to avoid that: it renders color over text ranges without adding a single node to the document. Nitro’s highlighting is therefore purely cosmetic by construction. Turn it off and the content is byte-for-byte what it always was, because it was never touched.