highlight.js 不适用于 Angular 2
highlight.js does not work with Angular 2
我正在尝试使用 highlight.js 向我的应用程序添加语法突出显示,但它似乎不适用于 Angular 2.
你能告诉我我可能做错了什么吗?
这是 Plnkr:https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview
这是组件:
import {Component} from 'angular2/core';
@Component({
selector: "my-app",
template: `
Hello!
<pre>
<code class="html">
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</code>
</pre>
`
})
export class AppComponent{
}
这是我使用 cdn 添加 highlight.js 的地方:
<!DOCTYPE html>
<html>
<head>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<!-- Angular polyfill required everywhere -->
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/solarized-light.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'api': {defaultExtension: 'ts'},
'app': {defaultExtension: 'ts'}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
您需要以这种方式在块上显式应用 highlightjs
:
import {Component, ElementRef, ViewChild} from 'angular2/core';
declare var hljs: any;
@Component({
selector: "my-app",
template: `
Hello!
<pre>
<code #code class="html">
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</code>
</pre>
`
})
export class AppComponent{
@ViewChild('code')
codeElement: ElementRef;
ngAfterViewInit() {
hljs.highlightBlock(this.codeElement.nativeElement);
}
}
看到这个plunkr
一个好的方法是为此创建一个自定义指令:
@Directive({
selector: 'code[highlight]'
})
export class HighlightCodeDirective {
constructor(private eltRef:ElementRef) {
}
ngAfterViewInit() {
hljs.highlightBlock(this.eltRef.nativeElement);
}
}
并这样使用它:
@Component({
selector: "my-app",
template: `
Hello!
<pre>
<code highlight class="html">
(...)
</code>
</pre>
`,
directives: [ HighlightCodeDirective ]
})
(...)
我认为您必须手动触发突出显示。
为此,您可以将此功能委托给特殊指令,例如:
@Directive({
selector: 'pre'
})
class PreHighlight implements AfterViewInit {
constructor(private elRef: ElementRef) {}
ngAfterViewInit() {
hljs.highlightBlock(this.elRef.nativeElement);
}
}
我已经为 angular 发布了 highlight.js 模块,从 npm 安装它
npm install --save ngx-highlightjs
使用起来非常简单,它会自动为您加载 highlight.js 并使用惰性模块,查看 demo
到目前为止 angular 最好的 highlightjs 模块是 angular2-highlight-js
https://www.npmjs.com/package/angular2-highlight-js
npm i angular2-highlight-js
Angular 12+
另一种方法是 custom usage of highlight.js
首先,安装库
npm install highlight.js
将样式文件添加到 angular.json
"styles": [
"./node_modules/highlight.js/styles/default.css" // I choose default but you can choose your favorite one.
],
在组件中,要使用高亮导入highlight.js
import hljs from 'highlight.js';
...
constructor(@Inject(DOCUMENT) private document: Document) { }
ngOnInit(): void {
setTimeout(() => {
this.document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
}, 500)
}
注意: 如果您从 API 获取数据,请确保您的数据呈现在页面上然后 运行 forEach()
我正在尝试使用 highlight.js 向我的应用程序添加语法突出显示,但它似乎不适用于 Angular 2.
你能告诉我我可能做错了什么吗?
这是 Plnkr:https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview
这是组件:
import {Component} from 'angular2/core';
@Component({
selector: "my-app",
template: `
Hello!
<pre>
<code class="html">
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</code>
</pre>
`
})
export class AppComponent{
}
这是我使用 cdn 添加 highlight.js 的地方:
<!DOCTYPE html>
<html>
<head>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<!-- Angular polyfill required everywhere -->
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/solarized-light.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'api': {defaultExtension: 'ts'},
'app': {defaultExtension: 'ts'}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
您需要以这种方式在块上显式应用 highlightjs
:
import {Component, ElementRef, ViewChild} from 'angular2/core';
declare var hljs: any;
@Component({
selector: "my-app",
template: `
Hello!
<pre>
<code #code class="html">
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</code>
</pre>
`
})
export class AppComponent{
@ViewChild('code')
codeElement: ElementRef;
ngAfterViewInit() {
hljs.highlightBlock(this.codeElement.nativeElement);
}
}
看到这个plunkr
一个好的方法是为此创建一个自定义指令:
@Directive({
selector: 'code[highlight]'
})
export class HighlightCodeDirective {
constructor(private eltRef:ElementRef) {
}
ngAfterViewInit() {
hljs.highlightBlock(this.eltRef.nativeElement);
}
}
并这样使用它:
@Component({
selector: "my-app",
template: `
Hello!
<pre>
<code highlight class="html">
(...)
</code>
</pre>
`,
directives: [ HighlightCodeDirective ]
})
(...)
我认为您必须手动触发突出显示。
为此,您可以将此功能委托给特殊指令,例如:
@Directive({
selector: 'pre'
})
class PreHighlight implements AfterViewInit {
constructor(private elRef: ElementRef) {}
ngAfterViewInit() {
hljs.highlightBlock(this.elRef.nativeElement);
}
}
我已经为 angular 发布了 highlight.js 模块,从 npm 安装它
npm install --save ngx-highlightjs
使用起来非常简单,它会自动为您加载 highlight.js 并使用惰性模块,查看 demo
到目前为止 angular 最好的 highlightjs 模块是 angular2-highlight-js
https://www.npmjs.com/package/angular2-highlight-js
npm i angular2-highlight-js
Angular 12+
另一种方法是 custom usage of highlight.js
首先,安装库
npm install highlight.js
将样式文件添加到 angular.json
"styles": [
"./node_modules/highlight.js/styles/default.css" // I choose default but you can choose your favorite one.
],
在组件中,要使用高亮导入highlight.js
import hljs from 'highlight.js';
...
constructor(@Inject(DOCUMENT) private document: Document) { }
ngOnInit(): void {
setTimeout(() => {
this.document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
}, 500)
}
注意: 如果您从 API 获取数据,请确保您的数据呈现在页面上然后 运行 forEach()