HTML Linked Formatter

Class-based HTML that pairs with a CSS theme file. Smaller output than inline styles.

Options

Runtime	Options
Rust	`language`, `pre_class`, `pre_attrs`, `code_attrs`, `rainbow_brackets`, `highlight_lines`, `line_numbers`, `header`
Elixir	`language`, `pre_class`, `pre_attrs`, `code_attrs`, `rainbow_brackets`, `highlight_lines`, `line_numbers`, `header`
JavaScript	`language`, `preClass`, `preAttrs`, `codeAttrs`, `rainbowBrackets`, `highlightLines`, `lineNumbers`, `header`
Java	`withLang()`, `withFormatter(Formatter.HTML_LINKED)`
CLI	`--pre-class`, `--pre-attr`, `--no-pre-attr`, `--code-attr`, `--no-code-attr`, `--rainbow-brackets`, `--highlight-lines`, `--highlight-lines-class`, `--line-numbers`, `--header-open`, `--header-close`

Basic example

import '@lumis-sh/themes/css/catppuccin_frappe.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}))

Theme files

Use CSS theme files from:

@lumis-sh/themes/css/<theme>.css
https://unpkg.com/@lumis-sh/themes/dist/css/<theme>.css
priv/static/css/ in Elixir

See CSS Theme Files for the full setup.

Output format

HTML Linked keeps the same block structure, but token styling moves to CSS classes instead of inline styles:

<pre class="lumis">
  <code class="language-javascript" translate="no" tabindex="0">
    <div class="l-line" data-line="1">
      <span class="l-keyword">const</span>
      <span class="l-variable">x</span>
    </div>
  </code>
</pre>

<pre class="lumis"> is the outer wrapper
<code class="language-*"> identifies the language and keeps the block focusable
<div class="l-line" data-line="N"> wraps each line
<span class="l-line-number"> opens the line when line_numbers is on, see Line Numbers
A source \n or \r\n sits just before that line's </div>; an unterminated final line gets no added newline
<span class="..."> carries semantic highlight classes such as l-keyword or l-string

When to use it

many code blocks
shared stylesheet pipeline
cacheable theme CSS
smaller HTML output