在 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 内部




					

					

													

								
相关文章
							
							

																	
										
CSS 中实现忽略特定元素的奇偶选择（纯 CSS 解决方案）
									
																	
										
CSS 样式表不生效的常见原因及修复方法
									
																	
										
CSS 中正确选择嵌套结构中最后一个子容器内的特定类元素
									
																	
										
如何解决 Tailwind CSS 类名不生效的问题：常见拼写错误排查指南
									
																	
										
CSS 深度嵌套中精准定位最后一个子容器内的特定类元素
									
															
													

								
相关标签:
								

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

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

					

													

								

									
 
										
作者最新文章
									
								
																	

										

											
												
在 PHP 中嵌入 JavaScript 并正确传递 PHP 变量值的完整指南
											
											

												
2026-01-21 09:41
											
										
								
																	

										

											
												
如何使用正则表达式精准提取引号内外的非空白标识符（跳过引号内空格）
											
											

												
2026-01-21 09:44
											
										
								
																	

										

											
												
小红书达人种草下单平台是什么？小红书达人如何筛选？
											
											

												
2026-01-21 09:45
											
										
								
																	

										

											
												
Vue-Laravel 文件上传失败：FormData 为空的完整解决方案
											
											

												
2026-01-21 09:59
											
										
								
																	

										

											
												
Vue-Laravel 文件上传 FormData 为空问题的完整解决方案
											
											

												
2026-01-21 10:00
											
										
								
																	

										

											
												
高效导入 MariaDB 大数据集：低内存占用的 Python 实现方案
											
											

												
2026-01-21 10:03
											
										
								
																	

										

											
												
如何在 DataTables 服务端模式下正确设置默认每页显示行数
											
											

												
2026-01-21 10:19
											
										
								
																	

										

											
												
Java 8 Streams 实现嵌套 Map 结构的条件过滤与键提取
											
											

												
2026-01-21 10:28
											
										
								
																	

										

											
												
如何解析 Go 源文件中的 go:generate 指令
											
											

												
2026-01-21 10:29
											
										
								
																	

										

											
												
Kaggle 中解决 pip 依赖冲突的正确方法：使用 legacy 解析器
											
											

												
2026-01-21 10:30
											
										
								
															
						
						

							

								
 
									
热门AI工具
								
								更多
							

							

																	

										
											
											

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

																												
AI大模型
																													
开放平台
																											
																							
										
									
																	

										
											
											

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

																												
AI大模型
																											
																							
										
									
																	

										
											
											

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

																												
AI大模型
																											
																							
										
									
																	

										
											
											

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

																												
文档处理
																													
Excel 表格
																											
																							
										
									
																	

										
											
											

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

																												
AI大模型
																													
中文写作
																											
																							
										
									
																	

										
											
											

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

																												
中文写作
																													
写作工具
																											
																							
										
									
																	

										
											
											

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

																												
图片拼接
																													
图画生成
																											
																							
										
									
																	

										
											
											

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

																												
AI大模型
																													
中文写作
																											
																							
										
									
																	

										
											
											

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

																												
AI大模型
																													
PC软件