npm i ngx-highlight-js

app.module.ts

import 'zone.js';

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { HighlightJsConfig, HIGHLIGHTJS_CONFIG } from 'ngx-highlight-js';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: HIGHLIGHTJS_CONFIG,
      useValue: { lang: 'html' } as HighlightJsConfig,
    },
  ],
}).catch((err) => console.error(err));

import 'zone.js';

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

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

import { HighlightJsConfig, HIGHLIGHTJS_CONFIG } from 'ngx-highlight-js';

bootstrapApplication(AppComponent, {

providers: [

{

provide: HIGHLIGHTJS_CONFIG,

useValue: { lang: 'html' } as HighlightJsConfig,

}).catch((err) => console.error(err));

app.component.ts

import { Component, OnInit } from "@angular/core";
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HighlightJsDirective } from 'ngx-highlight-js';

const r = (min: number, max: number) =>
  Math.floor(Math.random() * (max - min + 1) + min);

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  standalone: true,
  imports: [CommonModule, FormsModule, HighlightJsDirective],
})
export class AppComponent implements OnInit {
  switchStatus = true;
  html = `<textarea highlight-js [lang]="'html'" [ngModel]="html"></textarea>`;
  random = ``;
  code = `
<p>
  The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling
  <a href="http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload"><code>initHighlightingOnLoad</code></a
  >:
</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/styles/default.css&quot;&gt;
&lt;script src=&quot;/path/to/highlight.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
</code></pre>
<p>
  This will find and highlight code inside of <code>&lt;pre&gt;&lt;code&gt;</code> tags; it tries to detect the language automatically. If
  automatic detection doesn’t work for you, you can specify the language in the <code>class</code> attribute:
</p>
<pre><code class="language-html">&lt;pre&gt;&lt;code class=&quot;html&quot;&gt;...&lt;/code&gt;&lt;/pre&gt;
</code></pre>
`;

  private getHtml(): string {
    const DATA = [
      `<a href="">1</a>`,
      `<div>2</div>`,
      `<span>3</span>`,
      `<i>4</i>`,
      `<p>5</p>`
    ];
    return DATA[r(0, DATA.length - 1)];
  }

  updateHTML(): void {
    this.html = this.getHtml();
  }

  randomHtml(): void {
    this.random = this.getHtml();
  }

  ngOnInit(): void {
    this.randomHtml();
  }
}

import { Component, OnInit } from "@angular/core";

import { CommonModule } from '@angular/common';

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

import { HighlightJsDirective } from 'ngx-highlight-js';

const r = (min: number, max: number) =>

Math.floor(Math.random() * (max - min + 1) + min);

@Component({

selector: "my-app",

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

standalone: true,

imports: [CommonModule, FormsModule, HighlightJsDirective],

})

export class AppComponent implements OnInit {

switchStatus = true;

html = `<textarea highlight-js [lang]="'html'" [ngModel]="html"></textarea>`;

random = ``;

code = `

<p>

The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling

<a href="http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload"><code>initHighlightingOnLoad</code></a

</p>

</code></pre>

<p>

This will find and highlight code inside of <code><pre><code></code> tags; it tries to detect the language automatically. If

automatic detection doesn’t work for you, you can specify the language in the <code>class</code> attribute:

</p>

</code></pre>

private getHtml(): string {

const DATA = [

`<a href="">1</a>`,

`<div>2</div>`,

`<span>3</span>`,

`<i>4</i>`,

`<p>5</p>`

];

return DATA[r(0, DATA.length - 1)];

}

updateHTML(): void {

this.html = this.getHtml();

}

randomHtml(): void {

this.random = this.getHtml();

}

ngOnInit(): void {

this.randomHtml();

}

app.component.html

<div class="row mb-5">
  <div class="col-sm-12">
    <h5 class="mt-3 mb-3">Installation instructions</h5>
    <h6 class="mb-2">1、Install</h6>
    <textarea highlight-js [lang]="'bash'">
npm install --save ngx-highlight-js</textarea
    >
  </div>
  <div class="col-sm-12">
    <h6 class="mb-2">
      2、Import the `HighlightJsModule` in to your root `AppModule`.
    </h6>
    <textarea highlight-js lang="ts">
import { HighlightJsModule } from 'ngx-highlight-js';
@NgModule({
  imports: [ HighlightJsModule ],
  bootstrap: [AppComponent]
})
export class AppModule {
}
        </textarea
    >
  </div>
  <div class="col-sm-12">
    <h6 class="mb-2">3、Add highlight.js</h6>
    <p>Load the highlight.js and theme css in page.</p>
    <textarea highlight-js>
            <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
        </textarea
    >
    <textarea highlight-js>
            <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
        </textarea
    >
  </div>
  <div class="col-sm-12">
    <h5 class="mt-5 mb-3">Only `&lt;textarea>` Tag</h5>
    <div class="row">
      <div class="col-sm-6">
        <textarea highlight-js [lang]="'html'" *ngIf="switchStatus">
&lt;textarea highlight-js [options]="{}" [lang]="'typescript'">
/* tslint:disable */
import { Component } from '@angular/core';

@Component({
    selector: 'demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
    switchStatus: boolean = true;
}
&lt;/textarea>
                </textarea
        >
        <button
          class="btn btn-primary btn-sm mb-3"
          (click)="switchStatus = !switchStatus"
        >
          {{ switchStatus ? 'Hide' : 'Show' }}
        </button>
      </div>
      <div class="col-sm-6">
        <p>
          <strong>[options]</strong> equar
          <a
            href="http://highlightjs.readthedocs.io/en/latest/api.html#configure-options"
            target="_blank"
            >configure(options)</a
          >. (optional)
        </p>
        <p>
          <strong>[lang]</strong> uses language detection by default but you can
          specify the language. (optional)
        </p>
      </div>
    </div>
    <h5 class="mt-5 mb-3">Support `ngModel`</h5>
    <div class="row">
      <div class="col-sm-12">
        <textarea highlight-js [lang]="'html'" [ngModel]="html"></textarea>
        <button class="btn btn-primary btn-sm mb-3" (click)="updateHTML()">
          Update
        </button>
      </div>
    </div>
    <h5 class="mt-5 mb-3">Observe Content</h5>
    <div class="row">
      <div class="col-sm-12">
        <textarea highlight-js [lang]="'html'">
          {{ random }}
        </textarea>
        <button class="btn btn-primary btn-sm mb-3" (click)="randomHtml()">
          Random Html
        </button>
      </div>
    </div>
    <h5 class="mt-5 mb-3">Default mode</h5>
    <div class="row">
      <div class="col-sm-12">
        <p>Should be will render each &lt;pre>&lt;code></p>
        <textarea highlight-js>
&lt;div [innerHTML]="code" highlight-js mode="default">&lt;/div></textarea
        >
        <hr />
        <h6>Result</h6>
        <div [innerHTML]="code" highlight-js mode="default"></div>
      </div>
    </div>
    <p class="mt-5 mb-5">
      <strong>no more</strong>
    </p>
  </div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<h5 class="mt-3 mb-3">Installation instructions</h5>

<h6 class="mb-2">1、Install</h6>

npm install --save ngx-highlight-js</textarea

</div>

2、Import the `HighlightJsModule` in to your root `AppModule`.

</h6>

import { HighlightJsModule } from 'ngx-highlight-js';

@NgModule({

imports: [ HighlightJsModule ],

bootstrap: [AppComponent]

})

export class AppModule {

}

</textarea

</div>

<h6 class="mb-2">3、Add highlight.js</h6>

<p>Load the highlight.js and theme css in page.</p>

</textarea

</textarea

</div>

/* tslint:disable */

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

@Component({

selector: 'demo',

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

styleUrls: ['./demo.component.scss']

})

export class DemoComponent {

switchStatus: boolean = true;

}

</textarea>

</textarea

<button

class="btn btn-primary btn-sm mb-3"

(click)="switchStatus = !switchStatus"

</button>

</div>

<p>

<strong>[options]</strong> equar

href="http://highlightjs.readthedocs.io/en/latest/api.html#configure-options"

target="_blank"

>configure(options)</a

>. (optional)

</p>

<p>

<strong>[lang]</strong> uses language detection by default but you can

specify the language. (optional)

</p>

</div>

<h5 class="mt-5 mb-3">Support `ngModel`</h5>

Update

</button>

</div>

<h5 class="mt-5 mb-3">Observe Content</h5>

</textarea>

Random Html

</button>

</div>

<h5 class="mt-5 mb-3">Default mode</h5>

<p>Should be will render each <pre><code></p>

<div [innerHTML]="code" highlight-js mode="default"></div></textarea

<hr />

<h6>Result</h6>

</div>

</p>

</div>

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

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives