我正在尝试使用highligh-js突出显示语法
details.component.html文件:
<pre highlight-js> <!–– this block gets highlihgted -->
<code>
/* tslint:disable */
import numpy as np
def printing():
hello_srt = "hello"
for i in range():
print(i)
return hello_str
printing()<br>
</code>
</pre>
<div innerHtml="{{question}}">
<!–– this block is not highlihgted -->
</div>
details.component.html:
@Component({
selector: 'app-details',
templateUrl: './details.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./details.component.css']
})
export class InterviewDetailsComponent implements OnInit, AfterViewChecked, AfterViewInit {
@ViewChild('dataContainer', {static: true}) dataContainer: ElementRef;
@ViewChild('description-content', {static: false}) questionContainer: ElementRef;
companyDetails: CompanyDetails;
question: string;
// dataService: DataService;
constructor(private dataService: DataService,
private highlightService: HighlightService,
private interViewSharedService: InterviewSharedService,
private dynamicScriptLoaderService: DynamicScriptLoaderService) {
this.question = 'Loading';
this.getPage(this.interViewSharedService.interviewId);
}
getPage(page: number) {
// this
this.dataService.getInterviewPage(page)
.subscribe((response: CompanyInterview) => {
// response coming form service
// service pulls data from dabase server
this.companyDetails = response;
this.rounds = [];
this.question = this.companyDetails.rounds[0];
});
}
ngOnInit(): void {
}
}
来自响应的变量this.question
的值与html中的同一块相同:
<pre highlight-js> <!–– this block gets highlihgted -->
<code>
/* tslint:disable */<br>
import numpy as np<br>
def printing():<br>
hello_srt = "hello"<br>
for i in range():<br>
print(i)<br>
return hello_str<br>
printing()<br>
</code>
</pre>
<div>
标签中的html内容,仅突出显示该动态html的<code>
标签,而不是整个<div>
标签