Instant code highlighting, auto-detect language, super easy to use
NPM
$ npm install -S ngx-highlightjs highlight.jsYARN
$ yarn add ngx-highlightjs highlight.jsimport { HighlightModule } from 'ngx-highlightjs';
import xml from 'highlight.js/lib/languages/xml';
import scss from 'highlight.js/lib/languages/scss';
import typescript from 'highlight.js/lib/languages/typescript';
/**
* Import every language you wish to highlight here
* NOTE: The name of each language must match the file name its imported from
*/
export function hljsLanguages() {
return [
{name: 'typescript', func: typescript},
{name: 'scss', func: scss},
{name: 'xml', func: xml}
];
}
@NgModule({
imports: [
// ...
HighlightModule.forRoot({
languages: hljsLanguages
})
]
})
export class AppModule { }HighlightModule.forRoot(options) Should be called at least once to register highlighting languages.
forRoot(options) Accepts options parameter which have the following properties:
- languages: The set of languages to register.
- config: Configures global options, see configure-options.
@import '~highlight.js/styles/github.css';List of all available themes from highlight.js
Highlight host element
<pre><code [highlight]="someCode"></code></pre>Check this stackblitz
-
[highlight]: (string), Accept code string to highlight, default
null -
[languages]: (string[]), an array of language names and aliases restricting auto detection to only these languages, default:
null -
(highlighted): Stream that emits
HighlightResultobject when element is highlighted.
Highlight children code elements
<!-- Highlight child elements with 'pre code' selector -->
<div highlightChildren>
<pre><code [textContent]="htmlCode"></code></pre>
<pre><code [textContent]="tsCode"></code></pre>
<pre><code [textContent]="cssCode"></code></pre>
</div>Check this stackblitz
- Highlight children custom elements by selector
<!-- Highlight child elements with custom selector -->
<div highlightChildren="section p">
<section><p [textContent]="pythonCode"></p></section>
<section><p [textContent]="swiftCode"></p></section>
</div>Use this service if you wish to access the Official HighlightJS API.
This project uses Angular CLI to build the package.
$ ng build ngx-highlightjs --prodIf you identify any errors in the library, or have an idea for an improvement, please open an issue.
Murhaf Sousli