在 Angular 应用中动态刷新 Prism.js 语法高亮

引言

在现代 Web 应用中，展示代码片段并进行语法高亮是一个常见需求。Prism.js 是一个轻量级、可扩展的语法高亮库，因其简洁高效而广受欢迎。然而，当代码内容不是静态存在于 HTML 中，而是从数据库或其他异步源动态加载到 Angular 组件时，Prism.js 往往不会自动对新内容进行高亮。这通常会导致新加载的代码显示为纯文本，而非预期的带颜色高亮效果。

本教程将详细阐述如何在 Angular 应用中解决这一问题，确保动态加载的代码内容能够被 Prism.js 正确识别并高亮显示。

问题分析：Prism.js 的工作机制与动态内容

Prism.js 在页面加载时会扫描 DOM，查找带有特定 language-xxx 类的

 结构，并对其内容进行语法高亮。当通过 JavaScript 或 Angular 的数据绑定动态更改这些 
 标签内的文本内容时，Prism.js 不会默认重新扫描并高亮这些更新。为了使新内容生效，我们需要手动触发 Prism.js 的高亮机制。
Prism.js 提供了两种主要的刷新方法：
Prism.highlightAll(): 重新扫描整个 DOM 并高亮所有符合条件的元素。这在页面初始化时非常有用，但在动态更新时效率较低，因为它会处理所有元素，即使它们没有改变。
Prism.highlightElement(element): 仅对指定的 DOM 元素进行高亮。这是处理动态内容的理想选择，因为它允许我们精确控制需要刷新的代码块，从而提高性能。
解决方案：结合 Angular 生命周期与 Prism.highlightElement()
为了在 Angular 应用中动态刷新 Prism.js 高亮，我们需要在代码内容更新后，且 DOM 已经渲染了新内容时，调用 Prism.highlightElement() 方法。Angular 的数据绑定和生命周期钩子提供了完美的集成点。

							

								
								

									科威旅游管理系统
									
该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。
								
								下载 
							
						
1. HTML 模板结构
首先，确保您的 HTML 模板遵循 Prism.js 的推荐结构，通常是 
 组合，并绑定动态内容和语言类型。textarea 用于用户输入或显示原始文本，而 pre/code 组合用于高亮显示。

  

    
    

    
    
      {{currentCode}}
    
  

关键点：

#textArea: 用于引用  元素。

#pre: 用于引用 
 元素，通常用于滚动同步和行号。
#codeContent: 用于引用  元素，这是 Prism.js 实际高亮的目标。
{{currentCode}}: Angular 数据绑定，将组件中的 currentCode 属性值显示在  标签内。
[ngClass]="['code', 'language-' + codeType]": 动态设置 code 和 language-xxx 类，codeType 属性决定了高亮的语言。
2. Angular 组件逻辑
在 Angular 组件中，我们需要管理代码内容、触发更新，并在 DOM 更新后通知 Prism.js 进行高亮。
import { Component, OnInit, AfterViewInit, AfterViewChecked, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription, fromEvent } from 'rxjs';
import * as Prism from 'prismjs'; // 确保正确导入 Prism.js

// 假设 DataService, ApiService, PrismService 已经定义
// PrismService 可能是一个封装了 Prism.js 方法的自定义服务，
// 但为了直接演示，我们此处直接使用 Prism 模块。

@Component({
  selector: 'app-display-sourcecode',
  templateUrl: './display-sourcecode.component.html',
  styleUrls: ['./display-sourcecode.component.css']
})
export class DisplaySourcecodeComponent implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
  codeList: any[] = [];
  currentCode = ''; // 绑定到  标签的内容
  codeType = 'java'; // 初始代码语言

  form: FormGroup; // 表单组，用于管理 textarea 内容

  // 获取模板中的元素引用
  @ViewChild('textArea', { static: true }) textArea!: ElementRef;
  @ViewChild('codeContent', { static: true }) codeContent!: ElementRef;
  @ViewChild('pre', { static: true }) pre!: ElementRef; // 确保 pre 标签存在于模板中

  private sub!: Subscription; // 用于管理订阅

  // 标志位，用于控制 ngAfterViewChecked 中的高亮逻辑
  highlighted = false;

  constructor(
    private data_service: any, // 替换为实际的服务类型
    private api_service: any, // 替换为实际的服务类型
    private prismService: any, // 替换为实际的服务类型，如果存在
    private fb: FormBuilder,
    private renderer: Renderer2
  ) {
    this.form = this.fb.group({
      content: [''] // 初始化表单控件
    });
  }

  ngOnInit(): void {
    this.listenForm(); // 监听表单变化
    this.synchronizeScroll(); // 同步滚动
    this.loadSourceCodes(); // 页面初始化时加载代码
  }

  ngAfterViewInit() {
    // 视图初始化后，对初始内容进行高亮
    // 确保 Prism.js 脚本已加载且 codeContent 元素存在
    if (this.codeContent && this.codeContent.nativeElement.textContent && typeof Prism !== 'undefined' && Prism.highlightElement) {
      Prism.highlightElement(this.codeContent.nativeElement);
    }
  }

  ngAfterViewChecked() {
    // ngAfterViewChecked 在每次 Angular 检查完组件视图及其子视图后调用。
    // 我们利用 'highlighted' 标志来精确控制何时重新高亮。
    if (this.highlighted && this.codeContent && this.codeContent.nativeElement) {
      if (typeof Prism !== 'undefined' && Prism.highlightElement) {
        Prism.highlightElement(this.codeContent.nativeElement);
      } else {
        console.warn('Prism.highlightElement is not available. Ensure Prism.js is loaded correctly.');
      }
      this.highlighted = false; // 重置标志，避免不必要的重复高亮
    }
  }

  ngOnDestroy() {
    this.sub?.unsubscribe(); // 取消所有订阅，防止内存泄漏
  }

  // 监听 textarea 内容变化，并更新 code 块
  private listenForm() {
    this.sub = this.form.valueChanges.subscribe((val) => {
      // 假设 prismService.convertHtmlIntoString 负责将 textarea 内容转换为纯文本
      const modifiedContent = this.prismService.convertHtmlIntoString(val.content);
      this.renderer.setProperty(this.codeContent.nativeElement, 'innerHTML', modifiedContent);
      this.highlighted = true; // 设置标志，在 ngAfterViewChecked 中触发高亮
    });
  }

  // 同步 textarea 和 pre 标签的滚动
  private synchronizeScroll() {
    const localSub = fromEvent(this.textArea.nativeElement, 'scroll').subscribe(() => {
      const toTop = this.textArea.nativeElement.scrollTop;
      const toLeft = this.textArea.nativeElement.scrollLeft;

      if (this.pre) { // 确保 pre 元素存在
        this.renderer.setProperty(this.pre.nativeElement, 'scrollTop', toTop);
        this.renderer.setProperty(this.pre.nativeElement, 'scrollLeft', toLeft + 0.2);
      }
    });
    this.sub.add(localSub);
  }

  // 从数据库加载代码后，显示特定代码片段的方法
  displaySourceCode(item: any): void {
    // 1. 更新绑定到 `` 标签的 `currentCode` 属性
    this.currentCode = item.code;
    this.codeType = item.language || 'java'; // 假设 item 中包含语言信息

    // 2. 如果 `textarea` 也需要显示此内容，则更新表单控件
    // 使用 { emitEvent: false } 避免触发 `valueChanges` 订阅，从而防止无限循环。
    this.form.get('content')?.setValue(item.code, { emitEvent: false });

    // 3. 设置 `highlighted` 标志，通知 `ngAfterViewChecked` 进行高亮刷新
    this.highlighted = true;
  }

  // 从 API 加载所有代码列表
  loadSourceCodes(): void {
    this.codeList = [];
    this.api_service.getSourceCodes().subscribe((data: any[]) => {
      this.codeList = data;
      // 示例：加载后显示第一段代码
      if (this.codeList.length > 0) {
        this.displaySourceCode(this.codeList[0]);
      }
    });
  }
}
3. 关键点解析


*`import  as Prism from 'prismjs';`**: 确保在组件中正确导入 Prism.js。如果 Prism.js 是通过 CDN 或全局脚本加载的，则可能不需要此导入，但建议通过 npm 安装并导入以获得更好的类型支持和模块化。

@ViewChild('codeContent', { static: true }) codeContent!: ElementRef;: 获取对  元素的引用。static: true 表示该元素在组件初始化时就存在于 DOM 中。


currentCode 属性与数据绑定: {{currentCode}} 负责将组件中的 currentCode 值绑定到  标签的文本内容。当 currentCode 更新时，Angular 会自动更新 DOM。


highlighted 标志: 这是一个布尔值标志，用于精确控制 ngAfterViewChecked 何时执行 Prism.js 高亮。只有当 highlighted 为 true 时，才会触发高亮逻辑。

ngAfterViewChecked() 生命周期钩子:

此钩子在 Angular 每次完成变更检测后执行。
当 displaySourceCode 方法更新了 currentCode 并设置 highlighted = true 后，ngAfterViewChecked 会被触发。
在 ngAfterViewChecked 内部




					

					

													

								
相关文章
							
							

																	
										
如何消除顶部双滚动条上方的多余空白
									
																	
										
如何让 SVG 装饰元素始终紧贴容器底部（响应式无缝衔接）
									
																	
										
如何消除顶部水平滚动条上方的多余空白
									
																	
										
如何为浏览器阅读模式（Reader View）定制样式与隐藏特定 UI 元素
									
																	
										
html个人页面怎么加loading_html加载动画编写【体验】
									
															
													

								
相关标签:
								

									css javascript java html js go app ai win cdn npm angular Static JS dom 异步 数据库								
							
						
						
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
						

													上一篇：动态导航元素显示/隐藏的JavaScript最佳实践
													下一篇：如何配置Prettier以避免单属性HTML标签被格式化为多行
												
					

					

													

								

									
 
										
作者最新文章
									
								
																	

										

											
												
使用 React Context API 管理跨路由的表单 ID 状态
											
											

												
2026-01-27 15:09
											
										
								
																	

										

											
												
去哪儿网app能值机吗
											
											

												
2026-01-27 15:13
											
										
								
																	

										

											
												
Vue 3 中使用 v-model 实现子组件对父组件 prop 的双向绑定
											
											

												
2026-01-27 15:13
											
										
								
																	

										

											
												
如何为标签（label）设置固定宽度以实现表单对齐
											
											

												
2026-01-27 15:19
											
										
								
																	

										

											
												
《噬血代码2》IGN6分 有亮点但没有跟上时代
											
											

												
2026-01-27 15:25
											
										
								
																	

										

											
												
如何在 Python 中动态获取父类名称而非当前实例的实际类名
											
											

												
2026-01-27 15:32
											
										
								
																	

										

											
												
Go 中通过值接收器无法修改结构体字段：必须使用指针接收器实现状态变更
											
											

												
2026-01-27 15:44
											
										
								
																	

										

											
												
Java Android 命名捕获组兼容性问题及解决方案
											
											

												
2026-01-27 15:49
											
										
								
																	

										

											
												
检测通过 window.open 打开的新窗口是否加载完成
											
											

												
2026-01-27 15:53
											
										
								
																	

										

											
												
3649元起！七彩虹5060 Ti、5070迷你白卡正式开卖
											
											

												
2026-01-27 16:18
											
										
								
															
						
						

							

								
 
									
热门AI工具
								
								更多
							

							

																	

										

											
												
											
											

												DeepSeek
												
幻方量化公司旗下的开源大模型平台
																									

														AI 编程开发AI 聊天问答													
																							
										
									
																	

										

											
												
											
											

												豆包大模型
												
字节跳动自主研发的一系列大型语言模型
																									

														AI 编程开发AI大模型													
																							
										
									
																	

										

											
												
											
											

												通义千问
												
阿里巴巴推出的全能AI助手
																									

														AI 编程开发Agent智能体													
																							
										
									
																	

										

											
												
											
											

												腾讯元宝
												
腾讯混元平台推出的AI助手
																									

														文档处理AI 聊天问答													
																							
										
									
																	

										

											
												
											
											

												文心一言
												
文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。
																									

														AI 编程开发AI 文本写作													
																							
										
									
																	

										

											
												
											
											

												讯飞写作
												
基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿
																									

														AI 文本写作中文写作													
																							
										
									
																	

										

											
												
											
											

												即梦AI
												
一站式AI创作平台，免费AI图片和视频生成。
																									

														图片拼接图画生成													
																							
										
									
																	

										

											
												
											
											

												ChatGPT
												
最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。
																									

														AI 编程开发AI 文本写作													
																							
										
									
																	

										

											
												
											
											

												智谱清言 - 免费全能的AI助手
												
智谱清言 - 免费全能的AI助手
																									

														AI 编程开发Agent智能体