After developing a small application to address a specific issue, I encountered a problem while attempting to apply code highlighting using highlight.js. The issue arises when navigating from site1 to site2 or vice versa - the highlight does not take effect. However, if I refresh the page on either site, the highlighting works perfectly.
The reason I need to use navigation is to retain the values of variables without losing them.
testr.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import hljs from 'highlight.js';
@Component({
selector: 'app-testr',
templateUrl: './testr.component.html',
styleUrls: ['./testr.component.css']
})
export class TestrComponent implements OnInit {
constructor(
private router: Router
) {}
ngOnInit() {
hljs.initHighlightingOnLoad();
}
clickme(){
this.router.navigate(['/teste']);
}
}
testr.html
<p>testr works!</p>
<pre><code>var char; alert(1+1)</code></pre>
<button (click)="clickme()" value="Link">Link</button>
teste.ts
import { Component, OnInit } from '@angular/core';
import hljs from 'highlight.js';
import { Router } from '@angular/router';
@Component({
selector: 'app-teste',
templateUrl: './teste.component.html',
styleUrls: ['./teste.component.css']
})
export class TesteComponent implements OnInit {
constructor(
private router: Router
) { }
ngOnInit() {
hljs.initHighlighting();
}
clickme(){
this.router.navigate(['/testr']);
}
}
teste.html
<p>teste works!</p>
<pre><code>var char; alert(1+1)</code></pre>
<button (click)="clickme()" value="Link">Link</button>