Code Highlighter

Shiki-powered syntax highlighting component.

Bordered

None

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

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

With Title

hello-world.ts

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

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

Diff (GitHub Style)

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

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');
  }
}

Full Feature

app.component.ts

TypeScript

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

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