Skip to main content

Formatters

Lumis separates parsing from rendering. The parser finds tokens; the formatter decides how those tokens become output.

Built-in formatter types

OutputCLIRustElixirJavaScriptJava
HTML with inline styleshtml-inlineHtmlInlineBuilder:html_inlinehtmlInline()Formatter.HTML_INLINE
HTML with CSS classeshtml-linkedHtmlLinkedBuilder:html_linkedhtmlLinked()Formatter.HTML_LINKED
HTML with CSS variables for multiple themeshtml-multi-themesHtmlMultiThemesBuilder:html_multi_themeshtmlMultiThemes()
ANSI terminal outputterminalTerminalBuilder:terminalterminal()Formatter.TERMINAL
BBCode with scope tagsbbcode-scopedBBCodeScopedBuilder:bbcode_scopedbbcodeScoped()Formatter.BBCODE

Each built-in formatter has a dedicated page with options and more examples:

HTML Inline

Self-contained output with no external CSS.

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(
'const x = 1',
htmlInline({language: javascript, theme: dracula, preClass: 'code-block'})
);

HTML Linked

Smaller HTML. Pair with a CSS theme file.

import '@lumis-sh/themes/css/dracula.css';
import {highlight} from '@lumis-sh/lumis';
import {htmlLinked} from '@lumis-sh/lumis/formatters';
import javascript from '@lumis-sh/lumis/langs/javascript';
const html = await highlight(
'const x = 1',
htmlLinked({language: javascript, preClass: 'code-block'})
);

HTML Multi-Themes

One block, multiple themes via CSS custom properties.

import {highlight} from '@lumis-sh/lumis';
import {htmlMultiThemes} from '@lumis-sh/lumis/formatters';
import javascript from '@lumis-sh/lumis/langs/javascript';
import githubLight from '@lumis-sh/themes/github_light';
import githubDark from '@lumis-sh/themes/github_dark';
const html = await highlight(
'const x = 1',
htmlMultiThemes({
language: javascript,
themes: {light: githubLight, dark: githubDark},
defaultTheme: 'light-dark()',
})
);

Java does not support HTML Multi-Themes in lumis4j at the moment.

Terminal

ANSI output for the terminal.

import {highlight} from '@lumis-sh/lumis';
import {terminal} from '@lumis-sh/lumis/formatters';
import javascript from '@lumis-sh/lumis/langs/javascript';
import dracula from '@lumis-sh/themes/dracula';
const ansi = await highlight(
'const x = 1',
terminal({language: javascript, theme: dracula})
);

BBCode Scoped

Scope-based BBCode output for BBCode-aware renderers and custom pipelines.

import {highlight} from '@lumis-sh/lumis';
import {bbcodeScoped} from '@lumis-sh/lumis/formatters';
import javascript from '@lumis-sh/lumis/langs/javascript';
const output = await highlight(
'const x = "[url=x]"',
bbcodeScoped({language: javascript})
);

Custom formatters

Rust and JavaScript expose lower-level formatter APIs so you can render tokens however you want.

  • Rust: implement the Formatter trait
  • JavaScript: pass a formatter object with language and format(source), then call the sync free functions highlightIter() or highlightEvents() inside format() — see source

For deeper formatter-specific options, use the dedicated pages above. For theme data and formatter helpers, continue with Themes.