Highlight Component

A flexible syntax highlighting component with line numbers, language tags, line highlighting, and customizable styling. Supports sticky positioning, custom backgrounds, and advanced features like highlighting specific lines or ranges.

Key Features

Optional line numbering with customizable starting number
Display 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
Configurable colors, borders, and backgrounds via CSS variables
Supports static, relative, absolute, or sticky positioning
Powered by highlight.js with language registration
Horizontal scroll for wide code blocks
Extensive customization through CSS custom properties

Props

Prop	Type	Default	Description
language	HighlightLanguage	required	Language configuration with name and register function
code	string	""	Code to highlight
numberLine	boolean	undefined	Show line numbers
langtag	boolean	false	Show language tag in top-right corner
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
class	string	"relative"	CSS class for the component

Types

numberLine?: boolean;
  language: HighlightLanguage;
  code: string;
  langtag?: boolean;
  hideBorder?: boolean;
  wrapLines?: boolean;
  startingLineNumber?: number;
  highlightedLines?: number[];
  highlightedRanges?: [number, number][];
  backgroundColor?: string;
  replaceLib?: string | false;
  position?: 'static' | 'relative' | 'absolute' | 'sticky' | undefined;
  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

Basic

The Highlight component requires language and code props. The langtag prop is optional and it will add a language tag.

let message = "Hello, world!";
console.log(message);
const age = 25;
if (age > 18) {
  console.log("You are more than 18 years.");
}

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import javascript from 'highlight.js/lib/languages/javascript';
  const code = `let message = "Hello, world!";
console.log(message);
const age = 25;
if (age > 18) {
  console.log("You are more than 18 years.");
}`;
  const jsLang = {
    name: 'javascript',
    register: javascript
  };
</script>

<Highlight langtag --langtag-color="LightCyan" --code-font-size="20px" language={jsLang} {code} />

Markdown

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

# 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 { Highlight } from 'svelte-rune-highlight';
  import markdown from 'highlight.js/lib/languages/markdown';
  const code = `# This is a heading This is some paragraph text. 

- Here is an unordered list item. 
- Another list item. 
 
**This text is bold.**`;
  const mdLang = {
    name: 'markdown',
    register: markdown
  };
</script>

<Highlight langtag --langtag-color="Violet" --langtag-background="Gold" --langtag-border-radius="20px" language={mdLang} {code} />

YAML

name: My Application
version: 1.0.0
services:

- name: web
  image: my-image:latest
  ports:
  - 80:80

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import yaml from 'highlight.js/lib/languages/yaml';
  const code = `name: My Application
version: 1.0.0
services:

- name: web
  image: my-image:latest
  ports:
  - 80:80
`;
  const jsYaml = {
    name: 'yaml',
    register: yaml
  };
</script>

<Highlight langtag --langtag-color="Pink" --code-line-height="2" --code-padding="2rem" --code-font-size="1rem" --code-font-family="Monaco" language={jsYaml} {code} />

JSON

{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "is_active": true,
  "hobbies": ["reading", "hiking", "coding"]
}

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import json from 'highlight.js/lib/languages/json';
  const code = `{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "is_active": true,
  "hobbies": ["reading", "hiking", "coding"]
}`;
  const jsonLang = {
    name: 'json',
    register: json
  };
</script>

<Highlight langtag --langtag-color="DeepPink" --code-font-size="10px" language={jsonLang} {code} />

Typescript

const message: string = "Hello, world!";
console.log(message);

function greet(fname: string): string {
  return "Hello, ${fname}!";
}
console.log(greet("Bard"));

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const code = `const message: string = "Hello, world!";
console.log(message);

function greet(fname: string): string {
  return "Hello, \${fname}!";
}
console.log(greet("Bard"));`;
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight langtag --langtag-color="Violet" --langtag-background="#fff" --langtag-border-radius="10px" --code-font-family="cursive" language={tsLang} {code} />