在 Angular 中动态更新 Prism.js 语法高亮代码块的实践指南

理解问题：动态内容与 Prism.js 的挑战

在现代前端应用中，从后端动态加载内容并进行展示是常见需求。当涉及到代码展示时，Prism.js 等语法高亮库能极大地提升用户体验。然而，将动态加载的代码字符串更新到 Angular 组件中的 textarea 和 <code> 元素，并确保 Prism.js 正确地重新高亮，可能会遇到以下挑战：

1. textarea 的更新机制： 在 Angular 响应式表单中，textarea 的内容通常通过 formControlName 绑定到 FormControl。直接修改组件的某个属性（如 currentCode）不会自动更新 FormControl 的值，因此 textarea 的显示内容不会改变。
2. <code> 元素的更新： <code> 元素的内容通常通过 Angular 的插值绑定（{{currentCode}}）或 innerHTML 属性绑定。虽然修改 currentCode 会触发 Angular 的变更检测并更新 <code> 的内容，但 Prism.js 不会默认监听 DOM 变化并自动重新高亮。
3. Prism.js 的重新高亮： Prism.highlightAll() 方法会扫描整个文档以查找需要高亮的代码块，这在处理动态局部内容更新时效率低下，可能导致性能问题。

为了解决这些问题，我们需要一种精确且高效的方法来更新 textarea 和 <code> 的内容，并触发 Prism.js 对特定元素进行重新高亮。

核心解决方案

解决此问题的关键在于两点：一是正确地更新与 textarea 关联的 FormControl；二是在内容更新后，使用 Prism.highlightElement() 方法精确地重新高亮目标 <code> 元素。

1. 更新 textarea 内容：使用 FormControl.setValue()

由于 textarea 绑定到响应式表单的 FormControl，我们必须通过该 FormControl 来更新其值。

// 假设您有一个名为 'content' 的 FormControl
this.form.get('content')?.setValue(newCodeString);

使用 setValue() 方法可以确保 textarea 显示最新的代码。为了避免在更新 FormControl 时意外触发 valueChanges 订阅（这可能导致循环更新或其他副作用），可以在 setValue() 时传入 emitEvent: false 选项：

this.form.get('content')?.setValue(newCodeString, { emitEvent: false });

2. 重新高亮代码块：利用 Prism.highlightElement()

Prism.highlightElement(element) 方法允许您指定一个特定的 HTMLElement 进行高亮，而不是扫描整个 DOM。这对于动态加载和更新的代码块来说是最高效的方法。

示例代码（PrismService 中的实现）：

意兔-AI漫画相机

照片变漫画手绘，做周边好物

下载

为了更好地封装 Prism.js 的功能，建议创建一个 PrismService。

// prism.service.ts
import { Injectable, ElementRef } from '@angular/core';
import * as Prism from 'prismjs'; // 确保已安装 prismjs 和对应的语言包

@Injectable({
  providedIn: 'root'
})
export class PrismService {
  constructor() { }

  /**
   * 对整个文档中所有符合条件的元素进行语法高亮
   * 注意：对于动态内容更新，推荐使用 highlightElement()
   */
  highlightAll(): void {
    Prism.highlightAll();
  }

  /**
   * 对指定的 HTML 元素进行语法高亮
   * @param element 需要高亮的 HTMLElement
   */
  highlightElement(element: HTMLElement): void {
    if (element) {
      Prism.highlightElement(element);
    }
  }

  /**
   * 示例：将 HTML 实体转换回字符串（如果需要）
   * @param htmlContent 包含 HTML 实体的字符串
   * @returns 转换后的字符串
   */
  convertHtmlIntoString(htmlContent: string): string {
    const doc = new DOMParser().parseFromString(htmlContent, 'text/html');
    return doc.documentElement.textContent || '';
  }
}

在组件中，您将调用 this.prismService.highlightElement(this.codeContent.nativeElement); 来高亮特定的 <code> 元素。

在 Angular 组件中集成

现在，我们将上述解决方案集成到您的 Angular 组件中。核心思路是在数据加载并更新组件属性后，立即更新 FormControl 并触发 Prism.highlightElement()。

首先，确保您的组件能够引用到 textarea 和 <code> 元素。

// display-sourcecode.component.ts
import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef, Renderer2, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription, fromEvent } from 'rxjs';
import { PrismService } from './prism.service'; // 假设 PrismService 路径正确

@Component({
  selector: 'app-display-sourcecode',
  templateUrl: './display-sourcecode.component.html',
  styleUrls: ['./display-sourcecode.component.css']
})
export class DisplaySourcecodeComponent implements OnInit, AfterViewChecked, OnDestroy {
  codeList: any[] = [];
  currentCode: string = "";
  codeType: string = 'java'; // 默认代码类型

  form: FormGroup;

  @ViewChild('textArea', { static: true })
  textArea!: ElementRef<HTMLTextAreaElement>;
  @ViewChild('codeContent', { static: true })
  codeContent!: ElementRef<HTMLElement>; // 确保是 HTMLElement 类型

  private sub!: Subscription;

  constructor(
    private prismService: PrismService,
    private fb: FormBuilder,
    private renderer: Renderer2
  ) {
    this.form = this.fb.group({
      content: ['']
    });
  }

  get contentControl() {
    return this.form.get('content');
  }

  ngOnInit(): void {
    this.listenForm();
    // 假设您有 loadSourceCodes 方法来加载数据
    // this.loadSourceCodes();
  }

  ngAfterViewChecked(): void {
    // 移除或简化此处的 highlightAll() 调用，因为我们将在特定事件中调用 highlightElement()
    // 如果没有其他需要全局高亮的需求，可以删除此方法或将其留空
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe();
  }

  /**
   * 当从数据库加载新代码并需要显示时调用
   * @param item 包含代码内容的项，例如 { code: "public class MyClass {}" }
   */
  displaySourceCode(item: any): void {
    const newCode = item.code;

    // 1. 更新 FormControl 的值，这会更新 <textarea>
    // 使用 { emitEvent: false } 避免触发 listenForm 订阅，
    // 因为我们将在下面手动更新 <code> 元素并高亮。
    this.contentControl?.setValue(newCode, { emitEvent: false });

    // 2. 直接更新 <code> 元素的内容
    // 确保使用 Renderer2 来安全地操作 DOM
    this.renderer.setProperty(this.codeContent.nativeElement, 'innerHTML', newCode);

    // 3. 触发 Prism.js 对特定 <code> 元素进行高亮
    // 由于 DOM 更新是异步的，为了确保 Prism.js 在内容更新后才执行，
    // 可以使用 setTimeout(..., 0) 或 Promise.resolve().then() 来将其放入微任务队列。
    // 在大多数情况下，直接调用也能工作，但微任务更健壮。
    setTimeout(() => {
      this.prismService.highlightElement(this.codeContent.nativeElement);
    }, 0);
  }

  /**
   * 监听表单内容变化，主要用于用户在 textarea 中手动输入时
   */
  private listenForm(): void {
    this.sub = this.form.valueChanges.subscribe((val) => {
      const modifiedContent = this.prismService.convertHtmlIntoString(val.content);
      this.renderer.setProperty(this.codeContent.nativeElement, 'innerHTML', modifiedContent);

      // 用户输入时，也直接高亮当前 <code> 元素
      setTimeout(() => {
        this.prismService.highlightElement(this.codeContent.nativeElement);
      }, 0);
    });
  }

  // 原始的滚动同步逻辑，此处保留
  // @ViewChild('pre', { static: true }) pre!: ElementRef; // 假设存在 <pre> 元素
  // private synchronizeScroll() {
  //   const localSub  = fromEvent(this.textArea.nativeElement, 'scroll').subscribe(() => {
  //     const toTop = this.textArea.nativeElement.scrollTop;
  //     const toLeft = this.textArea.nativeElement.scrollLeft;
  //     this.renderer.setProperty(this.pre.nativeElement, 'scrollTop', toTop);
  //     this.renderer.setProperty(this.pre.nativeElement, 'scrollLeft', toLeft + 0.2);
  //   });
  //   this.sub.add(localSub);
  // }
}

对应的 HTML 模板 (display-sourcecode.component.html)：

<form [formGroup]="form">
  <div class="code-container line-numbers">
    <textarea
      #textArea
      class="text-area-code-editor"
      formControlName="content"
      spellcheck="false"
    ></textarea>
    <!-- 移除 {{currentCode}} 绑定，让组件逻辑直接控制 innerHTML -->
    <code [ngClass]="['code', 'language-' + codeType]" #codeContent></code>
  </div>
</form>

关键修改点总结：

1. displaySourceCode 方法：
   • 使用 this.contentControl?.setValue(newCode, { emitEvent: false }); 更新 textarea 的值。
   • 使用 this.renderer.setProperty(this.codeContent.nativeElement, 'innerHTML', newCode); 直接更新 <code> 元素的内容。
   • 在内容更新后，调用 this.prismService.highlightElement(this.codeContent.nativeElement); 来重新高亮。使用 setTimeout(..., 0) 是为了确保 DOM 在高亮前已更新。
2. listenForm 方法：
   • 当用户在 textarea 中输入时，valueChanges 订阅会触发。
   • 同样，在更新 <code> 的 innerHTML 后，直接调用 this.prismService.highlightElement(this.codeContent.nativeElement); 进行高亮。
3. ngAfterViewChecked 方法：
   • 如果此方法仅用于调用 prismService.highlightAll()，则可以移除或清空，因为我们已经通过 highlightElement() 实现了更精确的高亮控制。
4. HTML 模板：
   • 将 <code> 元素中的 {{currentCode}} 绑定移除，因为其内容将由组件逻辑通过 renderer.setProperty 或 innerHTML 直接设置。

注意事项与最佳实践

• 性能优化： 始终优先使用 Prism.highlightElement() 而非 Prism.highlightAll()，尤其是在动态内容场景中。highlightAll() 会遍历整个 DOM，开销较大。
• DOM 元素引用： 确保 ViewChild 正确地获取到 <code> 元素。如果元素在 ngIf 等条件渲染中，可能需要在 ngAfterViewInit 或 ngAfterViewChecked 中检查其存在性。
• 异步数据处理： 当从 API 或数据库加载数据时，确保在数据成功获取并更新组件状态后，再执行 displaySourceCode 等方法来更新 UI 和触发高亮。
• 错误处理： 在调用 prismService.highlightElement() 之前，最好检查 this.codeContent.nativeElement 是否存在，以避免潜在的运行时错误。