要让PrismJS在Angular指令中高亮显示代码块,而不必实现1秒的超时延迟,可以按照以下步骤进行操作:
highlight
的指令:ng generate directive highlighthighlight.directive.ts
文件,将PrismJS引入到指令中。在文件开头添加以下代码:import 'prismjs';
import 'prismjs/themes/prism.css';highlight.directive.ts
文件中,实现指令的逻辑。可以使用@HostListener
装饰器监听元素加载事件,在元素加载完成后执行代码高亮逻辑。代码如下:import { Directive, ElementRef, HostListener } from '@angular/core';
declare var Prism: any;@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener('load')
onLoad() {
Prism.highlightElement(this.el.nativeElement);
}
}
<pre>
标签中使用指令,代码如下:<pre appHighlight>
<code class="language-javascript">
// Your code here
</code>
</pre>这样,当页面加载完成时,指令会自动将代码块高亮显示,而不需要实现1秒的超时延迟。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云