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>