Nueglow API reference: glow() function and token mapping

Nueglow is Nue’s built-in syntax highlighter. Rather than shipping per-language grammar files, it recognizes universal code patterns — strings, comments, keywords, operators, numbers — and maps them to a small set of semantic HTML elements. Your CSS controls every color; no theme JSON files required.

Installation

bun add nueglow
# or
npm install nueglow

Export

import { glow } from 'nueglow'

`glow(str, opts?)`

The primary highlight function. Accepts a code string (or array of lines), applies syntax rules for the given language, and returns a <code> element string ready to embed inside a <pre>.

const html = glow(str, opts)

str

string | string[]

required

The source code to highlight. Either a multi-line string or an array of pre-split lines. Leading and trailing blank lines are stripped when a string is passed.

opts

object | string

Highlight options. When a plain string is passed it is interpreted as the language shorthand.

Show opts properties

language

string

The language identifier. See the Supported languages table below. When omitted, Nueglow checks whether the first line starts with < and defaults to html if so; otherwise no language-specific keywords are applied.

numbered

boolean

default:"false"

Wrap each line in a <span> element. Combined with CSS counters this enables line numbers without JavaScript:

pre code span { counter-increment: line }
pre code span::before { content: counter(line); }

prefix

boolean

default:"true"

Process line-prefix characters that signal diff markers and highlighted lines. When true:

+ prefix → <ins> wrapper (added line)
- prefix → <del> wrapper (removed line)
> prefix → <dfn> wrapper (highlighted/focus line)
\ prefix → strip the backslash and render the line normally (escape)

mark

boolean

default:"true"

Process ••text•• inline markers (the • character is Alt+Q). Single markers wrap with <mark>; double markers wrap with <u>.

Return value — a string: <code language="{lang}">{highlighted lines}</code>. When language is not detected, the attribute is language="*". Examples:

import { glow } from 'nueglow'

// Language as string shorthand
const html = glow(code, 'js')

// Full options object
const html = glow(code, {
  language: 'ts',
  numbered: true,
  prefix: true,
  mark: true
})

// Auto-detect HTML from leading '<'
const html = glow('<div class="hero">Hello</div>', { prefix: false })

Supported languages

Nueglow uses a universal rule set that works across all languages. In addition, these identifiers receive special treatment — extra keywords, custom token rules, or mixed-mode parsing:

Identifier(s)	Language	Special handling
`js`, `ts`, `jsx`, `tsx`	JavaScript / TypeScript	Property access tokens (`foo.bar`) highlighted for `js`; JSX treated as mixed HTML
`html`	HTML	Tag names highlighted as `<strong>`; mixed JS/CSS inside script and style
`jsx`, `php`, `astro`, `dhtml`, `vue`, `svelte`, `hb`	Mixed HTML	Same HTML tag highlighting as `html`
`css`	CSS	Hex colors → `<strong>`; `!important` → `<label>`; custom properties → `<em>`
`json`	JSON	Keys (`"foo":`) → `<b>`
`yaml`	YAML	Keys (`foo:`) → `<b>`; no common-word highlighting
`md`, `mdx`, `nuemark`	Markdown	Line-by-line context detection (headings, quotes, code spans, front matter)
`python`	Python	`#` line comments; extra keywords: `None`, `nonlocal`, `lambda`
`lua`	Lua	`--` line comments
`clojure`	Clojure	`;;` line comments
`go`	Go	Extra keywords: `chan`, `fallthrough`
`cpp`	C++	Extra keywords: `cout`, `cin`, `using`, `namespace`

Any identifier not in this table still gets the universal rule set — strings, numbers, common keywords, operators, and // line comments.

Token-to-element mapping

Nueglow maps token types to plain HTML elements. Style them with ordinary CSS selectors on pre code:

HTML element	Token type	Examples
`<strong>`	Keywords, HTML tag names, CSS hex colors	`function`, `import`, `<div>`, `#ff0000`
`<em>`	String literals, numeric values, CSS custom properties	`"hello"`, `'world'`, `42`, `--color`
`<sup>`	Line and block comments	`// note`, `# remark`, `/* block */`
`<b>`	Identifiers — variable names, function calls, property access	`myVar`, `fetch(`, `obj.key`
`<i>`	Operators, brackets, and interpolation delimiters	`=>`, `{`, `}`, `(`
`<label>`	Decorators, annotations, Markdown section labels	`@decorator`, `[section]`, `!important`
`<mark>`	Inline marked text (single `•` markers)	`••highlighted••`
`<u>`	Inline marked text (double `•` markers)	`••••double-marked••••`
`<ins>`	Added lines (diff prefix `+`)	Whole-line wrapper
`<del>`	Removed lines (diff prefix `-`)	Whole-line wrapper
`<dfn>`	Focused/highlighted lines (prefix `>`)	Whole-line wrapper

Multi-line comments

Nueglow detects block comments using opening and closing patterns and wraps every line of the comment in <sup>:

Language(s)	Opening	Closing
C, JS, Java, CSS	`/*`	`*/`
Jinja/Nunjucks	`{#`	`#}`
HTML	`<!--`	`-->`
Python, TOML	`'''`	`'''`
Ruby	`=begin`	`=end`

Diff and focus markers

When prefix: true (the default), lines starting with +, -, or > are treated as diff markers. The prefix character is stripped and the line is wrapped in the corresponding element:

+added line     →  <ins>added line</ins>
-removed line   →  <del>removed line</del>
>focus line     →  <dfn>focus line</dfn>
\escaped line   →  escaped line (no wrapping, prefix stripped)

Example:

const diff = `
function greet(name) {
-  return 'Hello ' + name
+  return \`Hello \${name}!\`
}
`
glow(diff, { language: 'js', prefix: true })

Inline marks

Surround any text with the • character (Alt+Q / Option+Q) to highlight it inline, independently of diff-line prefixes:

const ••x•• = 1    →  const <mark>x</mark> = 1
const ••••y•••• = 2  →  const <u>y</u> = 2

Disable this behavior with mark: false.

CSS custom properties

Nueglow does not ship a theme. Style the token elements directly in your stylesheet. The recommended approach uses CSS custom properties so you can swap themes by changing a few variables:

pre code {
  --string:  #a8c;
  --keyword: #e96;
  --comment: #888;
  --ident:   #4af;
  --punct:   #ccc;
  --label:   #fa0;
  --num:     #f80;
}

pre code em     { color: var(--string) }
pre code strong { color: var(--keyword) }
pre code sup    { color: var(--comment); font-style: italic }
pre code b      { color: var(--ident) }
pre code i      { color: var(--punct) }
pre code label  { color: var(--label) }

/* Diff colors */
pre code ins { background: #1a3a1a; display: block }
pre code del { background: #3a1a1a; display: block }
pre code dfn { background: #1a2a3a; display: block }

/* Inline marks */
pre code mark { background: #ff06; color: inherit }
pre code u    { border-bottom: 2px solid currentColor; text-decoration: none }

Integration with Nuemark

Nueglow is the default code-block renderer inside Nuemark. Any fenced code block is automatically highlighted:

```js
const x = 42
```

Nuemark passes the language identifier and code content to glow() internally — no configuration needed. To disable highlighting for a specific block, use a language of text or omit the language identifier entirely:

```
No highlighting applied to this block.
```

Standalone usage

Wrap the glow() output in a <pre> element for proper monospace display:

import { glow } from 'nueglow'

const code = `
async function fetchUser(id) {
  const res = await fetch(\`/api/users/\${id}\`)
  return res.json()
}
`

const highlighted = glow(code, { language: 'js', numbered: true })
document.querySelector('pre').innerHTML = highlighted

<!-- The resulting HTML structure -->
<pre>
  <code language="js">
    <span><em>async</em> <strong>function</strong> <b>fetchUser</b>(<b>id</b>) <i>{</i></span>
    <span>  <strong>const</strong> <b>res</b> = <strong>await</strong> <b>fetch</b>(<em>`/api/users/<i>${<b>id</b>}</i>`</em>)</span>
    <span>  <strong>return</strong> <b>res</b>.<b>json</b>()</span>
    <span><i>}</i></span>
  </code>
</pre>

Lower-level exports

parseRow and renderRow are exported for testing purposes and advanced use cases where you need to highlight a single line:

import { parseRow, renderRow, parseSyntax } from 'nueglow'

// Get token descriptors for one line
const tokens = parseRow('const x = 42', 'js')

// Render a single highlighted line
const line = renderRow('const x = 42', 'js')

// Parse all lines into blocks (handles multi-line comments)
const blocks = parseSyntax(lines, 'python')

CLI

Packages

Nueglow API reference: glow() function and token mapping

Installation

Export

`glow(str, opts?)`

Supported languages

Token-to-element mapping

Multi-line comments

Diff and focus markers

Inline marks

CSS custom properties

Integration with Nuemark

Standalone usage

Lower-level exports

Build docs developers (and LLMs) love

CLI

Packages

Documentation Index

​Installation

​Export

​glow(str, opts?)

​Supported languages

​Token-to-element mapping

​Multi-line comments

​Diff and focus markers

​Inline marks

​CSS custom properties

​Integration with Nuemark

​Standalone usage

​Lower-level exports

Build docs developers (and LLMs) love

Installation

Export

`glow(str, opts?)`

Supported languages

Token-to-element mapping

Multi-line comments

Diff and focus markers

Inline marks

CSS custom properties

Integration with Nuemark

Standalone usage

Lower-level exports