HTML Inline Formatter

Self-contained HTML with inline styles on each token. No external CSS required.

Options

Runtime	Options
Rust	`language`, `structure`, `theme`, `pre_class`, `pre_attrs`, `code_attrs`, `include_highlights`, `highlight_lines`, `line_numbers`, `header`
Elixir	`language`, `structure`, `theme`, `pre_class`, `pre_attrs`, `code_attrs`, `include_highlights`, `highlight_lines`, `line_numbers`, `header`
JavaScript / TypeScript	`language`, `structure`, `theme`, `preClass`, `preAttrs`, `codeAttrs`, `includeHighlights`, `highlightLines`, `lineNumbers`, `header`
Java	`withLang()`, `withTheme()`, `withFormatter(Formatter.HTML_INLINE)`
CLI	`--structure`, `--theme`, `--pre-class`, `--pre-attr`, `--no-pre-attr`, `--code-attr`, `--no-code-attr`, `--include-highlights`, `--highlight-lines`, `--highlight-lines-class`, `--highlight-lines-style`, `--line-numbers`, `--header-open`, `--header-close`

Use pre_attrs / preAttrs to set a custom block background or make it transparent so an enclosing card shows through. See Override the block background.

Basic example

import {highlight} from '@lumis-sh/lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import rust from '@lumis-sh/wasm-rust'
import frappe from '@lumis-sh/themes/catppuccin_frappe'

const html = await highlight(
  'fn main() {}',
  htmlInline({language: rust, theme: frappe}),
)

Add classes and metadata

const html = await highlight(
  'const x = 1',
  htmlInline({
    language: javascript,
    theme: frappe,
    preClass: 'code-block',
    includeHighlights: true,
  })
)

Wrap with custom HTML

const html = await highlight(
  'const x = 1',
  htmlInline({
    language: javascript,
    theme: frappe,
    header: {
      openTag: '<figure><figcaption>index.js</figcaption>',
      closeTag: '</figure>',
    },
  })
)

Output format

HTML Inline emits the full block structure with inline styles on each token:

<pre class="lumis" style="background-color: #303446; color: #c6d0f5;"><code class="language-rust" translate="no" tabindex="0"><span class="l-line" data-line="1"><span style="color: #ca9ee6;">fn</span> <span style="color: #8caaee;">main</span></span></code></pre>

<pre class="lumis"> is the outer wrapper and carries the block background
<code class="language-*"> identifies the language and keeps the block focusable
<span class="l-line" data-line="N"> wraps only a line's content
<span class="l-line-number"> opens the line when line_numbers is on, see Line Numbers
Lines are separated by \n text nodes; nothing follows the last line element
A final source newline ends its line rather than adding an empty numbered line
<span style="..."> carries the token colors and font styles inline

With structure: "inline" only the token spans are written, for a <code> or other element of your own. See Inline code.

Highlighted lines and empty lines carry inline layout styles to preserve their width and height. When highlight_lines is set, <code> expands to the scroll width, so backgrounds cover long lines too. Line numbers are excluded from selection copy. See Line layout if you supply custom CSS, and Custom formatters for line helpers.

For CSS or formatters written for line divs, see HTML line markup migration.

When to use it

self-contained HTML
email / CMS / markdown export
no external stylesheet pipeline