首先官网下载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>
如有问题,望留言指正,期待与您的技术交流。