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 dracula from '@lumis-sh/themes/dracula';

const html = await highlight(
  'line 1\nline 2\nline 3\nline 4',
  htmlInline({
    language: javascript,
    theme: dracula,
    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("dracula").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: "dracula",
    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 dracula from '@lumis-sh/themes/dracula';

const html = await highlight(
  'line 1\nline 2\nline 3\nline 4',
  htmlInline({
    language: javascript,
    theme: dracula,
    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("dracula").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: "dracula",
    highlight_lines: %{
      lines: [2, 4],
      style: "background-color: rgba(255, 221, 87, 0.18); border-left: 3px solid #ffd54f;"
    }
  }
)

What changes between formatters

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