本文旨在解决 Angular 应用中，从数据库加载动态代码内容后，Prism.js 语法高亮无法自动更新的问题。通过利用 Prism.highlightElement() 方法，结合 Angular 的数据绑定和生命周期钩子，实现对特定代码块的精准高效刷新，确保动态加载的代码始终以正确的语法高亮形式呈现，提升用户体验。
引言
在现代 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进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。
0 查看详情 
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 内部
以上就是在 Angular 应用中动态刷新 Prism.js 语法高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580979.html
微信扫一扫
支付宝扫一扫
