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 'runes-webkit';
  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 'runes-webkit';
  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 />

Wraped 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 'runes-webkit';
  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 'runes-webkit';
  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 backgroudColor="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 'runes-webkit';
  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 backgroudColor="#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 'runes-webkit';
  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; } 

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

 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 'runes-webkit';
  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="#666" />

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; } 
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 'runes-webkit';
  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={[1, 3]}
  --line-number-color="pink"
  --border-color="rgba(25, 155, 55, 1)"
  --padding-left="1em"
  --padding-right="2em"
  --highlighted-background="#6e6e6e"
/>

`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`	`}`