Angular 结合HighlightJS

Highlight

HighlightJS 是轻量级的代码高亮插件,支持众多的语言类型。在 Angular 中使用Highlight时候经常会遇到关键字字符问题,在Angular中 ”{“、 “}“ 大括号有自己的含义,用于数据的绑定,但是在开发语言中经常会遇到大括号。TalkingUI Angular 框架对Highlight进行了封装,可以非常简单的使用,并且没有关键字符冲突问题。

代码示例

appTkHighlight 为 TalkingUI指令,如果可能出现关键字字符冲突,代码内容放入到textarea中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<pre>
<code appTkHighlight class='typescript' >
<textarea>
class MyClass {
public static myValue: string;
constructor(init: string) {
this.myValue = init;
}
}
import fs = require("fs");
module MyModule {
export interface MyInterface extends Other {
myProperty: any;
}
}
declare magicNumber number;
myArray.forEach(() => { }); // f
</textarea>
</code>
</pre>

参考 TalkingUI Highlight https://www.talkingui.com/product/highlight