Line Numbers

The Highlight component has the option to add line numbers. See the following examples.

Number Lines

Add numberLine props to add line numbers.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} numberLine />

Hide Border

Add hideBorder props to hide the border.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} hideBorder numberLine />

Wrapped Lines

Add wrapLines props to wrap lines.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} wrapLines numberLine />

Background color

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} numberLine backgroundColor="red" />

Position

Use one of 'static' | 'relative' | 'abolute' | 'sticky' | undefined. The default value is 'sticky'.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} numberLine backgroundColor="#326bfc" position="relative" />

Starting Line Number

Use the startingLineNumber props to set the start line number.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} numberLine startingLineNumber={42} />

Highlighted Lines and Highlighted Background

Use the highlightedLines and highlightedBackground props to highlight lines.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 
2

class UserService { 
4
  private users: User[] = [];

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight language={tsLang} code={examples['./sample-1.md'] as string} numberLine highlightedLines={[2, 4]} --highlighted-background="#be46d4" />

Custom styles

Use the --line-number-color, --border-color --padding-left, --padding-right, and --highlighted-background props to customize the styles.

interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; } 

 
class UserService { 
 private users: User[] = []; 

 
 async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
   const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData }; 
   this.users.push(newUser); 
   return newUser; 
 } 

 
 getUserById(id: number): User | undefined { 
   return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined); 
 } 
} 

<script lang="ts">
  import { Highlight } from 'svelte-rune-highlight';
  import typescript from 'highlight.js/lib/languages/typescript';
  const examples = import.meta.glob('./*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  });
  const tsLang = {
    name: 'typescript',
    register: typescript
  };
</script>

<Highlight
  language={tsLang}
  code={examples['./sample-1.md'] as string}
  numberLine
  --highlighted-background="#be46d4"
  --border-color="#2bff0f"
  --line-number-color="red"
  --padding-left="2em"
  --padding-right="2em"
/>

Showing Type File

export type UserRole = 'admin' | 'editor' | 'viewer';

export interface User {
  id: number;
  name: string;
  email: string;
  role: UserRole;
  isActive: boolean;
  createdAt: Date;
}

export interface Post {
  id: string;
  title: string;
  content: string;
  authorId: number;
  tags?: string[];
}

export type ApiResponse<T> = {
  data: T;
  success: boolean;
  error?: string;
};

export type Nullable<T> = T | null;

<script lang="ts">
  import { HighlightAuto } from '$lib';
  const code = `export type UserRole = 'admin' | 'editor' | 'viewer';

export interface User {
  id: number;
  name: string;
  email: string;
  role: UserRole;
  isActive: boolean;
  createdAt: Date;
}

export interface Post {
  id: string;
  title: string;
  content: string;
  authorId: number;
  tags?: string[];
}

export type ApiResponse<T> = {
  data: T;
  success: boolean;
  error?: string;
};

export type Nullable<T> = T | null;
`;
</script>

<HighlightAuto {code} />

Numberline for Svelte file

<script lang="ts"> 
 function greet() { 
   alert('Welcome to Svelte!'); 
 } 
</script> 

 
<button onclick={greet}>click me</button> 

 
<style> 
 button { 
   font-size: 2em; 
 } 
</style> 

 

<script lang="ts">
  import { HighlightSvelte } from 'svelte-rune-highlight';
  const examples = import.meta.glob('../../examples/*.svelte', {
    query: '?raw',
    import: 'default',
    eager: true
  });
</script>

<HighlightSvelte code={examples['../../examples/Numberline.svelte'] as string} numberLine />

Highlighting lines

Use highlightedLines and/or highlightedRanges props to highlight lines as the following example.

[start, end] ranges are inclusive and 1‑based.

1
interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }
2 
 
3
class UserService {
4   private users: User[] = []; 
5 
 
6   async createUser(userData: Omit<User, 'id' | 'createdAt'>): Promise<User> { 
7
    const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };
8
    this.users.push(newUser);
9
    return newUser;
10   } 
11 
 
12
  getUserById(id: number): User | undefined {
13
    return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);
14
  }
15 } 

<script lang="ts">
  import { HighlightSvelte } from 'svelte-rune-highlight';
  const examples = import.meta.glob('./*.*', {
    query: '?raw',
    import: 'default',
    eager: true
  });
</script>

<HighlightSvelte
  code={examples['./sample-1.md'] as string}
  numberLine
  highlightedRanges={[
    [12, 14],
    [7, 9]
  ]}
  highlightedLines={[1, 3]}
  --highlighted-background="#3669f7"
/>

`1`	`interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }`
`2`
`3`	`class UserService {`
`4`	`private users: User[] = [];`
`5`
`6`	`async createUser(userData: Omit<User, 'id' \| 'createdAt'>): Promise<User> {`
`7`	`const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };`
`8`	`this.users.push(newUser);`
`9`	`return newUser;`
`10`	`}`
`11`
`12`	`getUserById(id: number): User \| undefined {`
`13`	`return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);`
`14`	`}`
`15`	`}`

`1`	`interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }`
`2`
`3`	`class UserService {`
`4`	`private users: User[] = [];`
`5`
`6`	`async createUser(userData: Omit<User, 'id' \| 'createdAt'>): Promise<User> {`
`7`	`const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };`
`8`	`this.users.push(newUser);`
`9`	`return newUser;`
`10`	`}`
`11`
`12`	`getUserById(id: number): User \| undefined {`
`13`	`return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);`
`14`	`}`
`15`	`}`

`1`	`interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }`
`2`
`3`	`class UserService {`
`4`	`private users: User[] = [];`
`5`
`6`	`async createUser(userData: Omit<User, 'id' \| 'createdAt'>): Promise<User> {`
`7`	`const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };`
`8`	`this.users.push(newUser);`
`9`	`return newUser;`
`10`	`}`
`11`
`12`	`getUserById(id: number): User \| undefined {`
`13`	`return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);`
`14`	`}`
`15`	`}`

`1`	`interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }`
`2`
`3`	`class UserService {`
`4`	`private users: User[] = [];`
`5`
`6`	`async createUser(userData: Omit<User, 'id' \| 'createdAt'>): Promise<User> {`
`7`	`const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };`
`8`	`this.users.push(newUser);`
`9`	`return newUser;`
`10`	`}`
`11`
`12`	`getUserById(id: number): User \| undefined {`
`13`	`return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);`
`14`	`}`
`15`	`}`

`1`	`interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }`
`2`
`3`	`class UserService {`
`4`	`private users: User[] = [];`
`5`
`6`	`async createUser(userData: Omit<User, 'id' \| 'createdAt'>): Promise<User> {`
`7`	`const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };`
`8`	`this.users.push(newUser);`
`9`	`return newUser;`
`10`	`}`
`11`
`12`	`getUserById(id: number): User \| undefined {`
`13`	`return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);`
`14`	`}`
`15`	`}`

`42`	`interface User { id: number; name: string; email?: string; active: boolean; createdAt: Date; lastLoginAt?: Date; }`
`43`
`44`	`class UserService {`
`45`	`private users: User[] = [];`
`46`
`47`	`async createUser(userData: Omit<User, 'id' \| 'createdAt'>): Promise<User> {`
`48`	`const newUser: User = { id: Date.now(), createdAt: new Date(), lastLoginAt: undefined, ...userData };`
`49`	`this.users.push(newUser);`
`50`	`return newUser;`
`51`	`}`
`52`
`53`	`getUserById(id: number): User \| undefined {`
`54`	`return this.users.find(user => user.id === id && user.active && user.name.length > 0 && user.email !== undefined);`
`55`	`}`
`56`	`}`

`1`	`<script lang="ts">`
`2`	`function greet() {`
`3`	`alert('Welcome to Svelte!');`
`4`	`}`
`5`	`</script>`
`6`
`7`	`<button onclick={greet}>click me</button>`
`8`
`9`	`<style>`
`10`	`button {`
`11`	`font-size: 2em;`
`12`	`}`
`13`	`</style>`
`14`