HTML Inline Formatter

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

Options

Basic example

import {highlight} from '@lumis-sh/lumis'
import {htmlInline} from '@lumis-sh/lumis/formatters'
import rust from '@lumis-sh/lumis/langs/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">
    <div class="l-line" data-line="1">
      <span style="color: #ca9ee6;">fn</span>
      <span style="color: #8caaee;">main</span>
    </div>
  </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
• <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 style="..."> carries the token colors and font styles inline

When to use it

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