Highlighjs用于Angular 8中的动态突出显示语法

时间:2019-06-19 03:26:22

标签: angular syntax-highlighting angular8 highlight.js

我正在尝试使用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>
  • 但是来自数据库的此字符串未突出显示:

enter image description here

  • 我希望将动态注入到<div>标签中的html内容,仅突出显示该动态html的<code>标签,而不是整个<div>标签

0 个答案:

没有答案