npm i @angular-package/prism

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ApPrismModule } from '@angular-package/prism';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports:      [ ApPrismModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { ApPrismModule } from '@angular-package/prism';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({

imports: [ ApPrismModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Highlight Code With Prims In Angular App ';
    content = `
<ngb-tabset>
  <ngb-tab title="Simple2">
    <ng-template ngbTabContent>
      <ngx-prism language="html">
        <ng-content select=".app-code-html"></ng-content>
        </ngx-prism>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
  `
}

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

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

title = 'Highlight Code With Prims In Angular App ';

content = `

<ngb-tabset>

<ngb-tab title="Simple2">

<ng-template ngbTabContent>

<ngx-prism language="html">

<ng-content select=".app-code-html"></ng-content>

</ngx-prism>

</ng-template>

</ngb-tab>

</ngb-tabset>

}

app.component.html

<h2>{{title}}</h2>
<ngx-prism language="html"> {{ content }}</ngx-prism>

1 2	<h2>{{title}}</h2> <ngx-prism language="html"> {{ content }}</ngx-prism>

Angular Prism.js Syntax Highlighter Example to Display Source Code in Browser Using TypeScript

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives