在prism.js文本区域内刷新字符串属性(从数据库加载)

Question

我想显示一个字符串，我已经从我的数据库中加载，在我的prism.js语法高亮显示文本区域。我对HTML和JavaScript/TypeScript都是新手。

<form [formGroup]="form">
<div class="code-container line-numbers">
<textarea
#textArea
class="text-area-code-editor"
formControlName="content"
spellcheck="false"
></textarea>
<pre
aria-hidden="true"
class="pre line-numbers"
#pre
><code [ngClass]="['code', 'language-' + codeType]" #codeContent>{{currentCode}}</code>
</pre>
</div>
</form>

currentCode的正确字符串存在于组件属性中，但我如何触发文本区显示新加载的字符串?

export class DisplaySourcecodeComponent implements OnInit, AfterViewChecked, AfterViewInit, OnDestroy {
codeList = [];
currentCode = "";
nodesAndEdges = "";
nodes : any;
constructor(private data_service: DataService, private api_service: ApiService, private prismService: PrismService, private fb: FormBuilder,
private renderer: Renderer2 ) { }

@ViewChild('textArea', { static: true })
textArea!: ElementRef;
@ViewChild('codeContent', { static: true })
codeContent!: ElementRef;
@ViewChild('pre', { static: true })
pre!: ElementRef;
sub!: Subscription;
highlighted = false;
codeType = 'java';
form = this.fb.group({
content: ''
});
get contentControl() {
return this.form.get('content');
}

ngOnInit(): void {
this.listenForm();
this.synchronizeScroll();
}
ngAfterViewInit() {
this.prismService.highlightAll();
}
ngAfterViewChecked() {
if (this.highlighted) {
this.prismService.highlightAll();
this.highlighted = false;
}
}
ngOnDestroy() {
this.sub?.unsubscribe();
}

private listenForm() {
this.sub = this.form.valueChanges.subscribe((val) => {
const modifiedContent = this.prismService.convertHtmlIntoString(val.content);
this.renderer.setProperty(this.codeContent.nativeElement, 'innerHTML', modifiedContent);
//this.currentCode = val.content;
console.log("listenForm: " + this.currentCode)
this.highlighted = true;
});
}

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);
}
displaySourceCode(item : any): void {
this.currentCode = item.code;
//console.log("currentCode: " + this.currentCode);
}
loadSourceCodes() : void {
this.codeList = [];
this.api_service.getSourceCodes().subscribe(data => {
for(let item of data) {
this.codeList.push(item);
}
})
}
}

Answer 1

我今天遇到了这个问题，我发现这篇文章很有用

https://schier.co/blog/how-to-re-run-prismjs-on-ajax-content

highlightAll()可用于强制Prism在当前页面上重新运行，使用highlightElement()选择性地突出显示元素，避免重新扫描整个DOM

// Say you have a code block like this
<pre>
<code id="some-code" class="language-javascript">
// This is some random code
var foo = "bar"
</code>
</pre>

// Be sure to select the inner <code> and not the <pre>
// Using plain Javascript
var block = document.getElementById('some-code')
Prism.highlightElement(block);
// Using JQuery
Prism.highlightElement($('#some-code')[0]);