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
Super easy to use, auto highlight code and auto-detect language
Installation
- Install it with npm
$ npm install --save ngx-highlightjs
Head to highlight.js download page and get your custom package bundle including only the languages you need.
Create new folder in
src/assets/lib/hljs
and extract the downloaded zip file there.
SystemJS
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ngx-highlightjs
:
map: {
'ngx-highlightjs': 'node_modules/ngx-highlightjs/bundles/ngx-highlightjs.umd.js',
}
Import HighlightUmdModule
, you will need to import highlight.js script and style manually, Here is a working plunker.
Usage
Import HighlightModule
library from any module:
import { HighlightModule } from 'ngx-highlightjs';
@NgModule({
imports: [
// ...
HighlightModule.forRoot()
]
})
export class AppModule { }
default theme is github
, but you can choose any theme by HighlightModule.forRoot('theme-name')
with the .css
in the end
List of all available themes from highlight.js
forRoot(theme?, path?) function has two optional parameters:
- theme: theme name without the extension, default:
'github'
- path: package directory path, default:
'assets/lib/hljs'
Choose highlighting theme:
HighlightModule.forRoot('monokai-sublime');
Import from custom path
HighlightModule.forRoot('monokai-sublime', 'assets/js/highlight-js');
Now you can use the directive highlight
, you can:
- Highlight a code element
<!-- Highlight target element -->
<pre><code highlight [textContent]="someCode"></code></pre>
- Highlight all child code elements
<!-- Highlight child elements of type <pre><code> -->
<div highlight="all">
<pre><code [textContent]="htmlCode"></code></pre>
<pre><code [textContent]="tsCode"></code></pre>
<pre><code [textContent]="cssCode"></code></pre>
</div>
- Highlight custom elements
<!-- Highlight custom child elements -->
<div highlight="section code">
<section><code [textContent]="pythonCode"></code></section>
<section><code [textContent]="swiftCode"></code></section>
</div>
Options
Highlight element(s)
[highlight]: string, default
''
- Use just
highlight
on the element to highlight it. - Use
highlight="all"
to highlight all child code elements. - Use
highlight="{selector}"
to highlight custom child elements.
- Use just
Auto-highlight on changes
[hlAuto]: boolean, default
true
;Highlight delay
[hlDelay]: number, default
200
ms;
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
Issues
If you identify any errors in the library, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!