angular使用highlight高亮顯示代碼

具體使用過程參考官方文檔：https://github.com/mattlewis92/angular-highlight-js

使用過程中遇到的問題及解決方式

1.安裝angular-highlight-js之後，引入了highlight.js，報錯，需要再安裝highlight.js；

2.在最初實踐的時候，我在app.module.ts裏面引入了相關依賴，當我需要將app.module.ts分離的時候，移走了使用highlt的模塊，卻未將highlight.js相關內容轉移到相應目錄下，因此，使用的模塊根本找不到他，這裏出現問題。

3.當可以實現相互依賴之後，字體只有部分實現了高亮，當時只有部分模塊的ts代碼實現了，相當多的模塊及其他代碼卻未實現。排查是否是語言類型的問題，發現，language當時只定義了TypeScript，因此這裏做了調整，調整之後卻依然沒有生效，排查發現，是相關語言的language沒有加入進來。

<code class="lang-javascript" mwlHighlightJs [source]="" language="less"></code>

hljs.registerLanguage('less', require('highlight.js/lib/languages/less'));

最終得以實現，具體代碼如下：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { IconsProviderModule } from './icons-provider/icons-provider.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import * as hljs from 'highlight.js';
import { HighlightJsModule, HIGHLIGHT_JS } from 'angular-highlight-js';
import { FormValidateModule } from './validate/form-validate.module';

// alternatively if you only need to include a subset of languages
const hljs: any = require('highlight.js/lib/highlight');
hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'));
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
hljs.registerLanguage('less', require('highlight.js/lib/languages/less'));

export function highlightJsFactory() {
  return hljs;
}

const MODULES = [
  CommonModule,
  NgZorroAntdModule,
  IconsProviderModule,
  ReactiveFormsModule,
  FormsModule,
  RouterModule,
  FormValidateModule
];
const COMPONENTS = [

];
@NgModule({
  imports: [
    ...MODULES,
    HighlightJsModule.forRoot({
      provide: HIGHLIGHT_JS,
      useFactory: highlightJsFactory
    })],
  exports: [...MODULES, ...COMPONENTS],
  declarations: [...COMPONENTS]
})
export class SharedModule { }

<pre class="language-angular">
    <code class="lang-javascript" mwlHighlightJs [source]="" language="xml"></code>
</pre>