HighlightAuto Component

HighlightAuto automatically detects the programming language of the provided code using Highlight.js and applies syntax highlighting. Optionally, it can display a language tag overlay showing the detected language.

Key Features

Uses highlight.js auto-detection to identify code language
Optionally limit detection to specific languages for better accuracy
Optional line numbering with customizable starting number
Display detected language name in top-right corner
Highlight specific lines or ranges with custom background
Line numbers stay visible while scrolling horizontally
Optional line wrapping for long lines
Gracefully falls back to plaintext if detection fails
Handles empty or whitespace-only code strings
Configurable colors, borders, and backgrounds via CSS variables
Supports static, relative, absolute, or sticky positioning
Horizontal scroll for wide code blocks

Props

Prop	Type	Default	Description
code	string	""	Code to highlight with automatic language detection
langtag	boolean	false	Show detected language tag in top-right corner
numberLine	boolean	undefined	Show line numbers
hideBorder	boolean	undefined	Hide border between line numbers and code
wrapLines	boolean	undefined	Enable line wrapping
startingLineNumber	number	1	Starting line number for display
highlightedLines	number[]	[]	Array of line numbers to highlight
highlightedRanges	[number, number][]	[]	Array of line ranges to highlight [start, end]
backgroundColor	string	undefined	Background color for line numbers column
position	"static" \| "relative" \| "absolute" \| "sticky"	"sticky"	CSS position for line numbers column
languages	string[]	undefined	Optional subset of languages to restrict detection
class	string	undefined	CSS class for the component

Language Tag: Caution - This may not be accurate.

Set langtag to true to display the language name in the top right corner of the code block.

Types

code?: string;
langtag?: boolean;
numberLine?: boolean;
hideBorder?: boolean;
wrapLines?: boolean;
startingLineNumber?: number;
highlightedLines?: number[];
highlightedRanges?: [number, number][];
backgroundColor?: string;
position?: 'static' | 'relative' | 'absolute' | 'sticky' | undefined;
languages?: string[];
replaceLib?: string | false;
class?: string;

Style

Customize the language tag background, color, numberline style and border-radius using style props.

// language tag
--langtag-top = 0: Top position of the langtag
--langtag-right = 0: Right position of the langtag
--langtag-background = inherit: Background color of the langtag
--langtag-color = inherit: Text color of the langtag
--langtag-border-radius = 0: Border radius of the langtag
--langtag-padding = 1em: Padding of the langtag
// line number
--line-number-color
--highlighted-background
--border-color
--padding-left
--padding-right

Examples

HTML

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
  </html>

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  const code = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
  </html>`;
</script>

<HighlightAuto {code} />

CSS

body {
    font-family: sans-serif;
    margin: 0;
  }

  h1 {
    text-align: center;
    font-size: 2em;
  }

  p {
    color: #333;
    line-height: 1.5;
  }

  a {
    text-decoration: none;
    color: blue;
  }

  img {
    max-width: 100%;
    height: auto;
  }

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  const code = `body {
    font-family: sans-serif;
    margin: 0;
  }

  h1 {
    text-align: center;
    font-size: 2em;
  }

  p {
    color: #333;
    line-height: 1.5;
  }

  a {
    text-decoration: none;
    color: blue;
  }

  img {
    max-width: 100%;
    height: auto;
  }
`;
</script>

<HighlightAuto {code} />

Javascript

const items = [
  { id: 1, title: 'Book', price: 12 },
  { id: 2, title: 'Pen', price: 3 },
  { id: 3, title: 'Laptop', price: 999 },
  { id: 4, title: 'Bag', price: 45 }
];

const titles = items.map((i) => i.title);
const prices = items.map((i) => i.price);
const expensive = items.filter((i) => i.price > 20);
const total = prices.reduce((a, b) => a + b, 0);
const capped = items.map((i) => ({ ...i, capped: i.price > 50 }));

console.log(titles);
console.log(prices);
console.log(expensive);
console.log(total);
console.log(capped);

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  import jsCode from '../../examples/jsCode.js?raw';
</script>

<HighlightAuto code={jsCode} />

Markdown

# This is a heading

This is some paragraph text.

- Here is an unordered list item.
- Another list item.

**This text is bold.**

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  import mdCode from '../../examples/md.md?raw';
</script>

<HighlightAuto code={mdCode} />

Typescript

interface User {
  id: number;
  name: string;
  email: string;
}

function getUser(id: number): User {
  return { id, name: 'John', email: 'john@example.com' };
}

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  import tyCode from '../../examples/tsCode.ts?raw';
</script>

<HighlightAuto code={tyCode} />

Python

message = "Hello, world!"
print(message)

age = 25
if age >= 18:
print("You are eligible to vote.")

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  import pyCode from '../../examples/pyCode.py?raw';
</script>

<HighlightAuto code={pyCode} />

Rust

let message = "Hello, world!";
println!("{}", message);

let age = 25;
if age >= 18 {
  println!("You are eligible to vote.");
}

<script lang="ts">
  import { HighlightAuto } from 'svelte-rune-highlight';
  import rsCode from '../../examples/rustCode.rs?raw';
</script>

<HighlightAuto code={rsCode} />

Other examples

function greet(name) {
  return `Hello, ${name}!`;
}

1
function greet(name) {
2
  return `Hello, ${name}!`;
3
}

const App = () => { 
 const [count, setCount] = useState(0); 
 return <button onClick={() => setCount(count + 1)}>{count}</button>; 
}; 

<script>
  import { HighlightAuto } from 'svelte-rune-highlight';

  const unknownCode = `function greet(name) {
  return \`Hello, \${name}!\`;
}`;

  const webCode = `const App = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};`;
</script>

<!-- Basic auto-detection -->
<HighlightAuto code={unknownCode} class="border-b" />

<!-- With line numbers and highlighting -->
<HighlightAuto code={unknownCode} numberLine highlightedLines={[1]} highlightedRanges={[[2, 3]]} class="border-b" />

<!-- Restrict to web languages -->
<HighlightAuto code={webCode} languages={['javascript', 'typescript']} numberLine />

`1`	`function greet(name) {`
`2`	return `Hello, ${name}!`;
`3`	`}`

`1`	`const App = () => {`
`2`	`const [count, setCount] = useState(0);`
`3`	`return <button onClick={() => setCount(count + 1)}>{count}</button>;`
`4`	`};`