在 Angular 应用中动态刷新 Prism.js 语法高亮-html教程-PHP中文网

在 angular 应用中动态刷新 prism.js 语法高亮

本文旨在解决 Angular 应用中，从数据库加载动态代码内容后，Prism.js 语法高亮无法自动更新的问题。通过利用 Prism.highlightElement() 方法，结合 Angular 的数据绑定和生命周期钩子，实现对特定代码块的精准高效刷新，确保动态加载的代码始终以正确的语法高亮形式呈现，提升用户体验。

引言

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

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

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

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

<code> 结构，并对其内容进行语法高亮。当通过 JavaScript 或 Angular 的数据绑定动态更改这些 <pre class="brush:php;toolbar:false;"><code> 标签内的文本内容时，Prism.js 不会默认重新扫描并高亮这些更新。为了使新内容生效，我们需要手动触发 Prism.js 的高亮机制。</p><p>Prism.js 提供了两种主要的刷新方法：</p><ul><li>Prism.highlightAll(): 重新扫描整个 DOM 并高亮所有符合条件的元素。这在页面初始化时非常有用，但在动态更新时效率较低，因为它会处理所有元素，即使它们没有改变。</li><li>Prism.highlightElement(element): 仅对指定的 DOM 元素进行高亮。这是处理动态内容的理想选择，因为它允许我们精确控制需要刷新的代码块，从而提高性能。</li></ul><h3>解决方案：结合 Angular 生命周期与 Prism.highlightElement()</h3><p>为了在 Angular 应用中动态刷新 Prism.js 高亮，我们需要在代码内容更新后，且 DOM 已经渲染了新内容时，调用 Prism.highlightElement() 方法。Angular 的数据绑定和生命周期钩子提供了完美的集成点。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9646">
                            <img src="https://img.php.cn/upload/webcode/000/000/013/175955760314470.png" alt="科威旅游管理系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9646">科威旅游管理系统</a>
                            <p>该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="科威旅游管理系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9646" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="科威旅游管理系统">
                        </a>
                    </div>
                <h4>1. HTML 模板结构</h4><p>首先，确保您的 HTML 模板遵循 Prism.js 的推荐结构，通常是 <pre class="brush:php;toolbar:false;"><code> 组合，并绑定动态内容和语言类型。textarea 用于用户输入或显示原始文本，而 pre/code 组合用于高亮显示。</p><pre class="brush:php;toolbar:false;"><form [formGroup]="form">
  <div class="code-container line-numbers">
    <!-- textarea 用于显示或编辑原始代码，通常与 formControlName 绑定 -->
    <textarea
      #textArea
      class="text-area-code-editor"
      formControlName="content"
      spellcheck="false"
    ></textarea>

    <!-- pre 标签通常用于行号和滚动同步，code 标签用于 Prism.js 高亮 -->
    <pre class="brush:php;toolbar:false;" #pre>
      <code [ngClass]="['code', 'language-' + codeType]" #codeContent>{{currentCode}}</code>

登录后复制

关键点：

#textArea: 用于引用元素。

#pre: 用于引用

 元素，通常用于滚动同步和行号。</li><li>#codeContent: 用于引用 <code> 元素，这是 Prism.js 实际高亮的目标。</li><li>{{currentCode}}: Angular 数据绑定，将组件中的 currentCode 属性值显示在 <code> 标签内。</li><li>[ngClass]="['code', 'language-' + codeType]": 动态设置 code 和 language-xxx 类，codeType 属性决定了高亮的语言。</li></ul><h4>2. Angular 组件逻辑</h4><p>在 Angular 组件中，我们需要管理代码内容、触发更新，并在 DOM 更新后通知 Prism.js 进行高亮。</p><pre class="brush:php;toolbar:false;">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 = ''; // 绑定到 <code> 标签的内容
  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. 更新绑定到 `<code>` 标签的 `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 内部