在angular中使用highlightjs

 参考资料

highlight.js

ngx-highlightjs - npm

安装包

npm i ngx-highlightjs

配置模块

配置imports和providers

@NgModule({
    imports: [
        AuthModule, ComponentsRoutingModule, NzInputModule, FormsModule, NzButtonModule, NzCardModule
        , HttpClientModule, NzTypographyModule,HighlightModule
    ],
  declarations: [
    ChatPageComponent
  ],
  exports: [
    ChatPageComponent
  ],
  providers: [
    DataService,
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        fullLibraryLoader: () => import('highlight.js')
      },
    }
  ]
})
export class ComponentsModule{

 这里使用的是包含所有包，如果需要更精准地导入，减少编译大小，请自行查阅。

在组件中使用

<pre>
  <code [highlight]="receivedData" [lineNumbers]="true" >
  </code>
</pre>

在根html中导入css样式表

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> 

 查看显示效果

 

 

行号没有显示出来，似乎哪里有问题，但是不是很重要。

主要的一点是不要忘记导入css