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

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

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

// 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 || '';
  }
}

// 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);
  // }
}

<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>