Rainbow brackets

Rainbow brackets color a language's bracket pairs by nesting depth. The pairs aren't a fixed set: they come from each language's Tree-sitter brackets.scm query, or a shared default when a language doesn't define one. Rainbow brackets are a formatter option, so they work with every built-in formatter: the HTML and terminal formatters color the brackets, and BBCode scoped emits them as tags.

Turn it on when you build the formatter:

JavaScript
Rust
Elixir
CLI

import {highlight} from '@lumis-sh/lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import javascript from '@lumis-sh/lumis/langs/javascript'
import dracula from '@lumis-sh/themes/dracula'

const html = await highlight(
  'foo(bar([1, 2], {a: 3}))',
  htmlInline({language: javascript, theme: dracula, rainbowBrackets: true})
)

use lumis::{highlight, HtmlInlineBuilder, languages::Language, themes};

let html = highlight(
    "foo(bar([1, 2], {a: 3}))",
    HtmlInlineBuilder::new()
        .language(Language::JavaScript)
        .theme(Some(themes::get("dracula").unwrap()))
        .rainbow_brackets(true)
        .build()
        .unwrap(),
);

Lumis.highlight!(
  "foo(bar([1, 2], {a: 3}))",
  formatter: {:html_inline, language: "javascript", theme: "dracula", rainbow_brackets: true}
)

lumis highlight main.js --rainbow-brackets

How depth maps to color

The shared default matches (), [], and {}. A language's own brackets.scm usually keeps those and adds more; Rust, for example, also colors generics (<>). Pairs tagged with (#set! rainbow.exclude) are matched but stay uncolored, such as string and template delimiters or JSX angle brackets.

Each depth maps to one of six theme scopes, punctuation.bracket.rainbow.1 through punctuation.bracket.rainbow.6, and wraps back to 1 after the sixth level. A theme can define these scopes; when it doesn't, Lumis falls back to six built-in colors.

How depth maps to color​

How depth maps to color