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.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Angular'da highlight.js nasıl kullanılır?" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.