Angular'da highlight.js nasıl kullanılır?

Merhaba,

Burada paylaştığımız makalelerde örnek kodların daha okunaklı olması için highlight.js paketini dahil ettik. Bu paketi Angular projelerinizde nasıl kullanırsınız bununla ilgili 2 farklı yöntem paylaşacağım.

Yöntem 1;

1- İlk yöntemimiz Angular için hazırlanmış olan ngx-highlightjs paketi. Kullanımı oldukça kolay. Aşağıdaki komut ile paketi kuruyoruz.

npm i ngx-highlightjs --save

2- Kurulumun ardından app.module.ts dosyasında HighlightModule' i import ediyoruz;

import { HighlightModule } from 'ngx-highlightjs';

@NgModule({
  imports: [
    HighlightModule
  ]
})
export class AppModule { }

3- CSS dosyasını import ediyoruz. İsterseniz src/styles.scss içerisinde isterseniz angular.json içerisinde çağırabilirsiniz;

src/styles.scss;

@import '~highlight.js/styles/github.css';

veya angular.json;

"styles": [
  "styles.css",
  "../node_modules/highlight.js/styles/github.css",
]

Burada highlight.js/styles içerisindeki temalardan istediğiniz temayı import edip kullanabilirsiniz. Hangi tema nasıl görünüyor merak ediyorsanız da şu adreste sol taraftaki Styles bölümünden değiştirerek görebilirsiniz: https://highlightjs.org/static/demo/

4- Artık kullanabiliriz;

app.component.ts;

code = `<script>
var x = Number.POSITIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>`

app.component.html;

<pre><code [highlight]="code"></code></pre>

Ve ekran çıktımız da şu şekilde olacak;

Şimdi ben buraya kadar kullandım gayet güzel ancak şöyle bir ihtiyacınız olabilir. Sizin string tipinde bir değişkeniniz vardır ve bunun içerisinde html kodları yazıyordur. Bazıları <p> etiketi bazıları <pre> etiketidir. Ve siz bu string olan değişkeninizin içindeki <pre> etiketlerine highlight.js i uygulamak istiyorsunuzdur. Tıpkı benim bu blogda ihtiyacım olduğu gibi.

Bunuda highlight.service ile yapabiliyoruz. Yani şu şekilde;

ts;

import { HighlightJS } from 'ngx-highlightjs';

export class HomeComponent implements OnInit, AfterViewInit {

  content = `<p>S\u0131rayla \u00e7al\u0131\u015ft\u0131rman\u0131z gereken komutlar\u0131 yaz\u0131yorum;<\/p><pre class=\"ql-syntax\" spellcheck=\"false\">npm install --save chart.js\nnpm install --save quill\nnpm install --save @fullcalendar\/core\n<\/pre><p><br><\/p><p>S\u0131rayla \u00e7al\u0131\u015ft\u0131rman\u0131z gereken komutlar\u0131 yaz\u0131yorum;<\/p><pre class=\"ql-syntax\" spellcheck=\"false\">npm install --save chart.js\nnpm install --save quill\nnpm install --save @fullcalendar\/core\n<\/pre><p>S\u0131rayla \u00e7al\u0131\u015ft\u0131rman\u0131z gereken komutlar\u0131 yaz\u0131yorum;<\/p>`;

  @ViewChild('contentHtml') private contentHtml

  constructor(
    private highlightJS: HighlightJS
  ) {
  }

  ngOnInit() {
  }


  ngAfterViewInit() {
    this.contentHtml.nativeElement.childNodes.forEach((item) => {
      if (item.tagName === 'pre' || item.tagName === 'PRE') {
        this.highlightJS.highlightBlock(item)
        .subscribe((res: any) => {
        });
      }
    });
  }

}

html;

<div #contentHtml [innerHTML]="content"></div>

Burada neler yapmış olduk;

Html içinde #contentHtml id li bir div tanımladık ve [innerHTML] ile bu content değişkenini buraya bastık.
Ts içinde ViewChild ile bunu okuyabileceğimiz şekilde ayarladık.
ngAfterViewInit içerisinde HighlightJS içindeki highlightBlock fonksiyonuna contentHtml içindeki <pre> etiketlerini gönderdik.
O fonksiyonda kodları renklendirdi.

Ancak ben blogda bu şekilde kullanmadım. Çünkü bu son yaptığım işlemde bir hata aldım ve bu hata angular versiyonumdan kaynaklanan bir hataydı. Angular 9 ile problemsiz çalışıyor. Hatta çalışan örneğine şuradan ulaşabilirsiniz: https://stackblitz.com/edit/ngx-highlightjs-g2mvdz?file=src%2Fapp%2Fhome%2Fhome.component.ts

Bizim blogumuzda henüz Angular 8 var. Aldığım hata typescript'i 3.7'ye güncellesem düzelecekti ancak Angularımız 8 olduğu için 3.7 desteklenmiyor. Angular'ı güncellediğimde de sunucu tarafında bazı problemlerle karşılaşıyorum bu yüzden Angular 9 halini yayınlayamıyorum. Bende çok üzerine durmadım ve şu şekilde kullandım.

Geçelim 2. yöntemimize;

Yöntem 2;

1- highlight.js'yi kuralım;

npm install highlight.js --save

2- CSS'i import edelim;

İsterseniz src/styles.scss içerisinde isterseniz angular.json içerisinde import edebilirsiniz.

@import '~highlight.js/styles/github-gist.css';

Temalara şuradan gözatabilirsiniz: https://highlightjs.org/static/demo/

3- Kullanalım

app.component.ts;

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import hljs from 'highlight.js';

export class AppComponent implements AfterViewInit {
  
  code = `function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello there!";
  document.getElementById("demo2").innerHTML = "How are you?";
  }`

  constructor() {
  }


  ngAfterViewInit() {
    const codeElement = document.querySelector('#code');
    hljs.highlightBlock(codeElement);
  }


}

app.component.html;

<pre id="code">{{ code }}</pre>

Eveet bu kadar.

Şimdi aynı ilk yöntemdeki gibi string içerisindeki <pre> etiketlerini bulup onlara da uygulamak istersek nasıl olacak? Şöyle olacak;

app.component.ts;

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import hljs from 'highlight.js';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {


  content = `<p>S\u0131rayla \u00e7al\u0131\u015ft\u0131rman\u0131z gereken komutlar\u0131 yaz\u0131yorum;<\/p><pre class=\"ql-syntax\" spellcheck=\"false\">npm install --save chart.js\nnpm install --save quill\nnpm install --save @fullcalendar\/core\n<\/pre><p><br><\/p><p>S\u0131rayla \u00e7al\u0131\u015ft\u0131rman\u0131z gereken komutlar\u0131 yaz\u0131yorum;<\/p><pre class=\"ql-syntax\" spellcheck=\"false\">npm install --save chart.js\nnpm install --save quill\nnpm install --save @fullcalendar\/core\n<\/pre><p>S\u0131rayla \u00e7al\u0131\u015ft\u0131rman\u0131z gereken komutlar\u0131 yaz\u0131yorum;<\/p>`;


  @ViewChild('contentHtml') private contentHtml;


  constructor() {
  }


  ngAfterViewInit() {
    document.querySelectorAll('pre').forEach((block) => {
      hljs.highlightBlock(block);
    });
  }


}

app.component.html;

<div #contentHtml [innerHTML]="content"></div>

Evet bunda da işlemlerimiz bu kadar. Ben kodumunblogunda 2. yöntemi kullandım. Yine canlı örnek görebilmeniz için stackblitz üzerinden de yaptım onada şuradan ulaşabilirsiniz: https://stackblitz.com/edit/angular-highlightjs?file=src%2Fapp%2Fapp.component.ts

Ben blogda artık kodların renklenmesine sevindim :) umarım sizler içinde faydalı olur.

Angular'da highlight.js nasıl kullanılır?

Yorumlar Henüz yorum yapılmamış

Yeni Yorum