Package Exports
- ngx-highlightjs
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-highlightjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Angular Highlight.js
Instant code highlighting, auto-detect language, super easy to use
Table of Contents
Installation
NPM
$ npm install -S ngx-highlightjs highlight.js
YARN
$ yarn add ngx-highlightjs highlight.js
Usage
OPTION 1: Import HighlightModule
in the root module
Note: this will include the whole library in your main bundle
import { 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 { }
forRoot(options: HighlightOptions)
Accepts options parameter which have the following properties:
- languages: The set of languages to register.
- config: Configures global options, see configure-options.
OPTION 2: Import HighlightModule
in a feature module
You probably don't want to load this library in the root module, you can lazy load it by importing it in your feature module, however Highlight.js languages has to be registered in the root module
import { 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({
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
languages: hljsLanguages,
config: { ... } // <= Optional
}
}
]
})
export class AppModule { }
After Highlight.js languages are registered, just import HighlightModule
in the feature module
@NgModule({
imports: [
// ...
HighlightModule
]
})
export class FeatureModule { }
Import highlighting theme
Import highlight.js theme from the node_modules directory in angular.json
"styles": [
"styles.css",
"../node_modules/highlight.js/styles/github.css",
]
Or import it in src/style.scss
@import '~highlight.js/styles/github.css';
You can also lazy load the theme by importing it in your lazy loaded component stylesheet
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'lazy-loaded',
templateUrl: './lazy-loaded.component.html',
styleUrls: [`
@import '~highlight.js/styles/github.css';
`],
encapsulation: ViewEncapsulation.None // <= Add this
})
export class LazyLoadedComponent {
}
Note: if you have multiple components that use
HighlightModule
, then it is better to import the theme in the global stylessrc/styles.css
List of all available themes from highlight.js
highlight
directive
Highlight host element
<pre><code [highlight]="someCode"></code></pre>
Check this stackblitz
Options
[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
HighlightResult
object when element is highlighted.
highlightChildren
directive
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>
HighlightJS
service
Use this service if you wish to access the Official HighlightJS API.
Development
This project uses Angular CLI to build the package.
$ ng build ngx-highlightjs --prod
Issues
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
Author
Murhaf Sousli