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, highlight_lines, header
Elixir	language, pre_class, highlight_lines, header
JavaScript	language, preClass, highlightLines, header
Java	withLang(), withFormatter(Formatter.HTML_LINKED)
CLI	--highlight-lines

Basic example

JavaScript

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}))

Rust

use lumis::{highlight, HtmlLinkedBuilder, languages::Language};

let html = highlight(
    "const x = 1",
    HtmlLinkedBuilder::new()
        .language(Language::Javascript)
        .pre_class(Some("demo".to_string()))
        .build()
        .unwrap(),
);

Elixir

Lumis.highlight!(
  "const x = 1",
  formatter: {:html_linked, language: "javascript", pre_class: "demo"}
)

Java

import io.roastedroot.lumis4j.core.Formatter;
import io.roastedroot.lumis4j.core.Lang;
import io.roastedroot.lumis4j.core.Lumis;

var lumis = Lumis.builder().build();

var highlighter = lumis.highlighter()
    .withLang(Lang.JAVASCRIPT)
    .withFormatter(Formatter.HTML_LINKED)
    .build();

var html = highlighter.highlight("const x = 1").string();
lumis.close();

CLI

lumis highlight index.js --formatter html-linked

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="line" data-line="1">
      <span class="keyword">const</span>
      <span class="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="line" data-line="N"> wraps each line
• <span class="..."> carries semantic highlight classes such as keyword or string

When to use it

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