Angular应用中动态刷新Prism.js语法高亮与文本内容

<form [formGroup]="form">
  <div class="code-container line-numbers">
    <!-- 用于显示和编辑代码的 textarea -->
    <textarea
      #textArea
      class="text-area-code-editor"
      formControlName="content"
      spellcheck="false"
    ></textarea>
    <!-- 用于 Prism.js 语法高亮的 code 块 -->
    <!-- 注意：class="language-..." 是 Prism.js 识别语言的关键 -->
    <code [ngClass]="['code', 'language-' + codeType]" #codeContent></code>
  </div>
</form>

import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription, fromEvent } from 'rxjs';
import { DataService } from './data.service'; // 假设的数据服务
import { ApiService } from './api.service';   // 假设的API服务
import { PrismService } from './prism.service'; // 自定义的Prism.js服务

export class DisplaySourcecodeComponent implements OnInit, AfterViewInit, OnDestroy {
  form!: FormGroup;
  codeType = 'java'; // 默认代码类型

  @ViewChild('textArea', { static: true }) textArea!: ElementRef;
  @ViewChild('codeContent', { static: true }) codeContent!: ElementRef;
  @ViewChild('pre', { static: true }) pre!: ElementRef; // 如果有 pre 标签用于滚动同步

  sub!: Subscription; // 用于管理所有订阅

  constructor(
    private data_service: DataService,
    private api_service: ApiService,
    private prismService: PrismService,
    private fb: FormBuilder,
    private renderer: Renderer2 // 用于直接操作DOM元素属性
  ) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      content: [''] // 初始化表单控件
    });
    this.listenFormChanges();
    this.synchronizeScroll(); // 可选：同步 textarea 和 code 块的滚动
  }

  ngAfterViewInit(): void {
    // 页面初始化时进行一次全页面高亮，或针对特定元素高亮
    // this.prismService.highlightAll();
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe(); // 清理订阅，防止内存泄漏
  }
}

private listenFormChanges(): void {
  this.sub = this.form.get('content')!.valueChanges.subscribe((newContent: string) => {
    // 1. 对新内容进行HTML实体转义，防止代码中的 < > & 等被浏览器解析为HTML标签
    const escapedContent = this.prismService.convertHtmlIntoString(newContent);

    // 2. 使用 Renderer2 更新 <code> 元素的 innerHTML
    // 注意：这里更新的是 <code> 元素，而不是 <pre> 元素（如果存在的话）
    this.renderer.setProperty(this.codeContent.nativeElement, 'innerHTML', escapedContent);

    // 3. 触发 Prism.js 对特定元素进行高亮
    // 避免使用 highlightAll()，因为它会重新扫描整个DOM，效率较低
    this.prismService.highlightElement(this.codeContent.nativeElement);
  });
}

// 示例：从服务加载代码并显示
displaySourceCode(item: any): void {
  // 假设 item.code 包含了要显示的代码字符串
  if (item && item.code) {
    // 使用 setValue 更新表单控件，这会触发 valueChanges 订阅
    this.form.get('content')?.setValue(item.code);
    // 可选：如果代码类型可能变化，也在这里更新
    // this.codeType = item.type || 'java';
  }
}

// 示例：加载所有源代码列表
loadSourceCodes(): void {
  this.api_service.getSourceCodes().subscribe(data => {
    // 假设 data 是一个包含代码对象的数组
    // this.codeList = data;
    if (data && data.length > 0) {
      // 可以在这里选择第一个代码进行显示
      this.displaySourceCode(data[0]);
    }
  });
}

// prism.service.ts
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

// 声明全局的 Prism 对象
declare var Prism: any;

@Injectable({
  providedIn: 'root'
})
export class PrismService {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  /**
   * 对整个文档进行语法高亮。
   * 适用于初始加载或大量DOM变化后。
   */
  highlightAll(): void {
    if (isPlatformBrowser(this.platformId) && typeof Prism !== 'undefined') {
      Prism.highlightAll();
    }
  }

  /**
   * 对指定的DOM元素进行语法高亮。
   * 推荐用于动态内容更新，效率更高。
   * @param element 要高亮的DOM元素 (通常是 <code> 标签)
   */
  highlightElement(element: HTMLElement): void {
    if (isPlatformBrowser(this.platformId) && typeof Prism !== 'undefined' && element) {
      Prism.highlightElement(element);
    }
  }

  /**
   * 将字符串中的HTML特殊字符转义，以便在 `innerHTML` 中安全显示为代码。
   * @param rawString 原始代码字符串
   * @returns 转义后的字符串
   */
  convertHtmlIntoString(rawString: string): string {
    if (!rawString) return '';
    return rawString
      .replace(/&/g, '&')
      .replace(/</g, '<')
      .replace(/>/g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, '&#039;');
  }
}

private synchronizeScroll(): void {
  // 确保 pre 元素存在，因为 codeContent 是直接子元素
  if (!this.pre || !this.textArea) {
    console.warn('Scroll synchronization requires both pre and textArea elements.');
    return;
  }

  const localSub = fromEvent(this.textArea.nativeElement, 'scroll').subscribe(() => {
    const toTop = this.textArea.nativeElement.scrollTop;
    const toLeft = this.textArea.nativeElement.scrollLeft;

    // 将 textarea 的滚动位置同步到 pre 元素
    this.renderer.setProperty(this.pre.nativeElement, 'scrollTop', toTop);
    this.renderer.setProperty(this.pre.nativeElement, 'scrollLeft', toLeft);
  });

  this.sub.add(localSub); // 将此订阅添加到主订阅中，以便在组件销毁时统一清理
}

// 假设你有一个ID为 'my-code-block' 的 <code> 元素
// <code id="my-code-block" class="javascript">...</code>

// 获取该元素的引用
const codeBlock = document.getElementById('my-code-block');

// 调用 Prism.highlightElement() 进行高亮
if (codeBlock) {
  Prism.highlightElement(codeBlock);
}