Code Highlighter

Code Highlighter shows read-only source code with syntax highlighting. Use it for documentation snippets, API examples, configuration blocks, code previews, and small diffs that users need to read or copy.

Use it for:

Showing code examples in documentation, onboarding screens, or developer tools.
Displaying a filename or title above a code block.
Highlighting important lines or ranges inside a snippet.
Showing added and removed lines in a compact diff view.
Letting users copy code with an optional copy button.

Do not use Code Highlighter as a code editor, textarea, terminal log, markdown article, or general text container. It is only for displaying code that is not edited in place.

The NgStarter Angular Code Highlighter component lets you render formatted source code snippets with syntax highlighting. Use in docs, developer tools, examples, and configuration previews. It includes examples for Basic Code Highlighter, With Title, Diff, and Highlight Lines.

Basic Code Highlighter

Use the basic code highlighter to show a read-only source code snippet with syntax highlighting.

Bordered

None

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: '<h1>Hello, world!</h1>'
})
export class HelloWorld {}

With Title

Add a title when the snippet represents a file, command, configuration block, or named example.

hello-world.ts

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: '<h1>Hello, world!</h1>'
})
export class HelloWorld {}

Diff

Use diff mode to show small before-and-after code changes with added and removed lines.

Changes in app.component.ts

  @Component({
   selector: 'old-selector',
   selector: 'new-selector',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
   title = 'old-app';
   title = 'new-app';
  }

Highlight Lines

Highlight lines when the example needs to draw attention to the important part of the code.

Single range highlight [5, 8]

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello World</h1>'
})
export class AppComponent {
  title = 'ngstarter';

  constructor() {
    console.log('AppComponent initialized');
  }
}

Multiple ranges highlight [[4, 6], [10, 12]]

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello World</h1>'
})
export class AppComponent {
  title = 'ngstarter';

  constructor() {
    console.log('AppComponent initialized');
  }
}

With Language and Copy

Show the language label and copy button when users need to recognize and reuse the snippet.

app.component.ts

TypeScript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello World</h1>'
})
export class AppComponent {}