在 Angular 应用中动态刷新 Prism.js 语法高亮

<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 #pre>
      <code [ngClass]="['code', 'language-' + codeType]" #codeContent>{{currentCode}}</code>
    </pre>
  </div>
</form>

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