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
Import HighlightModule
library from any 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({
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 highlighting theme
@import '~highlight.js/styles/github.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
[language]: (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