代码高亮插件syntaxhighlighter在angualr中的使用

首先官网下载syntaxhighlighter对应的文件，下载之后放到项目中。

第二：在index.html中引入需要的文件

  <link rel="stylesheet" href="assets/syntaxhighlighter-3.0.83/styles/shCore.css">
  <link rel="stylesheet" href="assets/syntaxhighlighter-3.0.83/styles/shThemeDefault.css">
  <script src="assets/syntaxhighlighter-3.0.83/scripts/XRegExp.js"></script>
  <script src="assets/syntaxhighlighter-3.0.83/scripts/shCore.js"></script>
  <script src="assets/syntaxhighlighter-3.0.83/scripts/shBrushJava.js"></script>

第三：在angualr.json中引入（不确定打包后是否还需要引入）

 "styles": [
      "src/styles.scss",
      "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
      "src/assets/syntaxhighlighter-3.0.83/styles/shCore.css",
      "src/assets/syntaxhighlighter-3.0.83/styles/shThemeDefault.css"
 ],
 "scripts": [
      "src/assets/syntaxhighlighter-3.0.83/scripts/shCore.js",
      "src/assets/syntaxhighlighter-3.0.83/scripts/shBrushJava.js"
 ]

在使用的组件的ts中声明SyntaxHighlighter，最外层与import同级

declare var SyntaxHighlighter: any;

在执行的地方使用以下方法

SyntaxHighlighter.defaults.toolbar = false;
SyntaxHighlighter.defaults['quick-code'] = false;
// SyntaxHighlighter.all();
SyntaxHighlighter.highlight();//异步情况下

虽然highlight()方法是针对异步的问题渲染，但仍存在有时不渲染问题，所以建议在请求到数据后用setTimeOut方法给其一个异步延时，时间设置为0即可。

最后在使用的html中加入以下代码即可

<pre class="brush: java;">{{sdk.code}}</pre>

如有问题，望留言指正，期待与您的技术交流。