Livewire sayfa değişince (Pagination) yada sayfa güncellenince highlight.js sayfadaki kodları vurgulamıyor (çalışmıyor)

Livewire de sayfada highlight.js ile kodları renklendiriyorum, bunu gönderiler yada yorumlarda kod kullanılmışsa diye kullanıyorum. Ancak livewire sayfalandırma özelliğini kullandığımda, yada sayfada bir değişiklik yaptıktan sonra sayfa güncellendiğinde highlight.js ile ilk girişte çalışan kod vurgulama özelliği çalışmamaya başlıyor.

Sayfada sayfalama özelliğini kullanmıyorsanız kod bloğunun olduğu bölüme (kodu çevreleyen div’e) aşağıdaki kodu eklediğimde sorun çıkmıyor.

wire:ignore

Ancak sayfalamada olduğu gibi, önceki verinin gidip yerine farklı verilerin geldiği senaryoda maalesef ilk girişte çalışan kod vurulama, sayfayı değişince çalışmıyor.

Bu konuda neler yapılabilir, öneri yada fikri olan var mıdır?.

Sayfa değiştiğinde hljs kodlarını tekrar çalıştırmak gerekiyor. Bunun içinde sayfa değiştiğinde tarayıcıya değişiğine dair event gönderip, o bölümde hljs vurgulama kodlarını tekrar çalıştırarak sorunu çözebiliriz. Bunu nasıl yapacağız ?

Öncelikle sayfa her değiştiğinde bunu bilmemiz gerekiyor. Livewire sayfalama kullanıldığında sayfa her değiştiğinde bunu updatedPaginators($page, $pageName) fonksiyonunu livewire class 'ımızın içine eklememiz gerekiyor. Böylece sayfa her değiştiğinde bunu yakalarız ve tarayıcıya bilgi göndererek hljs kodlarını tekrar çalıştırmasını söyleyeceğiz. Örnek fonksiyonu sizin için hazırladım:

public function updatedPaginators($page, $pageName)
{
    $this->dispatchBrowserEvent('livewire_hareketleri', ['islem' => 'sayfadegisti', 'sayfa' => $page]);
}

Sonrasında app.js dosyamıza livewire_hareketleri eventini alıp yakalayacağımız kodları ekleyeceğiz ve içerisine hljs ile kodları vurgulayacak olan kodları yerleştireceğiz. Böylece sayfa her değiştiğinde bu event içerisinde hljs kodları tekrar çalışacak ve kodlar vurgulanacak. Önek kodu sizler için hazırladım, bu kodu app.js dosyanıza yerleştirin ve kaydedin:

window.addEventListener('livewire_hareketleri', event => {
  switch(event.detail.islem) {
     
    case "sayfadegisti": // gelen event icindeki islem parametresi sayfadegisti ise bu kisim calisir..
      setTimeout(function () {
        document.querySelectorAll('pre code').forEach((el) => {
          hljs.highlightElement(el);
        });
      }, 1000);
      break;
       
    case "baskaeventornegi": 
      // diger baska eventleri tarayicida yakalayip islem yaptirmak isterseniz eklemeye devam edebilirsiniz ;)
      break;
    default:
    // varsayılan kod bloğu
  }
});

Bu değişiklikleri kaydettikten sonra js yi yeniden derlemeniz gerekiyor, sonrasın da hazırsınız: npm run prod yada npm run dev komutlarından size uygun olanı kullanabilirsiniz.