Line Highlighting

Line highlighting lets you emphasize key lines without changing the rest of the block.

Common patterns

• highlight a few exact lines
• highlight a range such as 3..5
• use theme styling or your own CSS class / inline style

Examples

JavaScript

import {highlight} from '@lumis-sh/lumis';
import {htmlInline} from '@lumis-sh/lumis/formatters';
import javascript from '@lumis-sh/lumis/langs/javascript';
import frappe from '@lumis-sh/themes/catppuccin_frappe';

const html = await highlight(
  'line 1\nline 2\nline 3\nline 4',
  htmlInline({
    language: javascript,
    theme: frappe,
    highlightLines: {lines: [1, [3, 4]], style: 'theme'},
  })
);

For linked HTML, use htmlLinked({ highlightLines: { lines: [1, [3, 4]], class: 'active-line' } }).

Rust

use lumis::{highlight, HtmlInlineBuilder, languages::Language, themes};
use lumis::formatters::html_inline::{HighlightLines, HighlightLinesStyle};

let highlight_lines = HighlightLines {
    lines: vec![1..=1, 3..=4],
    style: Some(HighlightLinesStyle::Theme),
    class: None,
};

let formatter = HtmlInlineBuilder::new()
    .language(Language::PlainText)
    .theme(Some(themes::get("catppuccin_frappe").unwrap()))
    .highlight_lines(Some(highlight_lines))
    .build()
    .unwrap();

let html = highlight("line 1\nline 2\nline 3\nline 4", formatter);

Elixir

Lumis.highlight!(
  "line 1\nline 2\nline 3\nline 4",
  formatter: {:html_inline,
    language: "plaintext",
    theme: "catppuccin_frappe",
    highlight_lines: %{
      lines: [1, 3..4],
      style: :theme
    }
  }
)

For linked HTML, switch to :html_linked and set class: "active-line".

Java

Line highlighting is not currently exposed by lumis4j.

CLI

lumis highlight main.rs --formatter html-inline --highlight-lines 1,3-5,10

Custom style example

JavaScript

import {highlight} from '@lumis-sh/lumis';
import {htmlInline} from '@lumis-sh/lumis/formatters';
import javascript from '@lumis-sh/lumis/langs/javascript';
import frappe from '@lumis-sh/themes/catppuccin_frappe';

const html = await highlight(
  'line 1\nline 2\nline 3\nline 4',
  htmlInline({
    language: javascript,
    theme: frappe,
    highlightLines: {
      lines: [2, [4, 4]],
      style: 'background-color: rgba(255, 221, 87, 0.18); border-left: 3px solid #ffd54f;',
    },
  })
);

Rust

use lumis::{highlight, HtmlInlineBuilder, languages::Language, themes};
use lumis::formatter::html_inline::{HighlightLines, HighlightLinesStyle};

let highlight_lines = HighlightLines {
    lines: vec![2..=2, 4..=4],
    style: Some(HighlightLinesStyle::Style(
        "background-color: rgba(255, 221, 87, 0.18); border-left: 3px solid #ffd54f;".to_string(),
    )),
    class: None,
};

let formatter = HtmlInlineBuilder::new()
    .language(Language::PlainText)
    .theme(Some(themes::get("catppuccin_frappe").unwrap()))
    .highlight_lines(Some(highlight_lines))
    .build()
    .unwrap();

let html = highlight("line 1\nline 2\nline 3\nline 4", formatter);

Elixir

Lumis.highlight!(
  "line 1\nline 2\nline 3\nline 4",
  formatter: {:html_inline,
    language: "plaintext",
    theme: "catppuccin_frappe",
    highlight_lines: %{
      lines: [2, 4],
      style: "background-color: rgba(255, 221, 87, 0.18); border-left: 3px solid #ffd54f;"
    }
  }
)

Class without an inline style

Omitting the style uses the theme's highlighted style. To highlight by class alone, so a stylesheet or a utility framework owns the appearance, opt out of the inline style explicitly:

JavaScript

htmlInline({
  language: javascript,
  theme: frappe,
  highlightLines: {lines: [2], style: null, class: 'bg-yellow-500'},
})

null opts out; leaving style off entirely still uses the theme.

Rust

HighlightLines {
    lines: vec![2..=2],
    style: None,
    class: Some("bg-yellow-500".to_string()),
}

Elixir

{:html_inline, highlight_lines: %{lines: [2], style: nil, class: "bg-yellow-500"}}

CLI

lumis highlight -f html-inline -h 2 --highlight-lines-style none --highlight-lines-class bg-yellow-500 app.js

What changes between formatters

Formatter	Highlight style
HTML Inline	theme style, custom inline CSS, or class only
HTML Linked	CSS class names
HTML Multi-Themes	theme style, custom inline CSS, or class only
Terminal	no line highlight styling
BBCode Scoped	no line highlight styling