@ngx-prism/rxjs
Simple Angular 2+ Prism highlighter module with Rxjs. Click to go to package without Rxjs.
Pros:
- Component changeDetection is set to
OnPush, it gives better overall performance. - Dynamically change highlight string with
codeinput property. - Interpolate string to highlight with
interpolationobject. @ngx-reactive/decoratorwithrxjs/Subjectto Subscribe tocodeandlanguageproperty changes.
Cons:
- With
asynctrue does not work properly. - Hooks are defined globally.
@Input Lifecycle Hooks Commit Versioning
Demonstration
If you want to see how @ngx-prism/rxjs works with @angular/cli, get simple example demonstration usage from github repository by opening your command line and do the following:git clone https://github.com/ngx-prism/demo.gitGo to file
src/app/app.module.ts line 3 comment it, and uncomment line 4.Go to file
src/style.css comment line 2 and uncomment line 3.npm install && npm startOpen http://localhost:4200/ in your browser.
Installation
To install, run:npm install @ngx-prism/rxjs --saveUsage
- Import
PrismModuleinto your module.
// example.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PrismModule } from '@ngx-prism/rxjs';
import { ExampleComponent } from './example.component';
@NgModule({
declarations: [ ExampleComponent ],
imports: [ CommonModule, PrismModule ],
exports: [ ExampleComponent ]
})
export class ExampleModule { }- Use prism component in your example component.
// example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'example-component',
template: `
<prism-highlight [language]="language">
{{content}}
</prism-highlight>
`
})
export class ExampleComponent {
language = 'html';
content = '<p>test</p>';
constructor() { }
}Use
PrismComponent by providing code and interpolation property in ExampleComponent.// example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'example-component',
template: `
<prism-highlight
[language] = "language"
[hooks] = "hooks"
[code] = "content"
[interpolation] = "interpolate"
></prism-highlight>`
})
export class ExampleComponent {
content = '<p>test {{language}}</p>';
hooks = {
'before-sanity-check': (env) => { console.log(`before-sanity-check`, env); },
'before-highlight': (env) => { console.log(`before-highlight`, env); },
'after-highlight': (env) => { console.log(`after-highlight`, env); },
'complete': (env) => { console.log(`complete`, env); },
'before-insert': (env) => { console.log(`before-insert`, env); }
};
interpolate = {
language: 'language interpolated'
};
language = 'html';
constructor() { }
}- It is possible to import themes files in
@angular/clilike below.
@import '~@ngx-prism/rxjs/dist/themes/prism-coy.css';
@import '~@ngx-prism/rxjs/dist/themes/prism-dark.css';
@import '~@ngx-prism/rxjs/dist/themes/prism-funky.css';
@import '~@ngx-prism/rxjs/dist/themes/prism-okaidia.css';
@import '~@ngx-prism/rxjs/dist/themes/prism-solarizedlight.css';
@import '~@ngx-prism/rxjs/dist/themes/prism-tomorrow.css';
@import '~@ngx-prism/rxjs/dist/themes/prism-twilight.css';
@import '~@ngx-prism/rxjs/dist/themes/prism.css';PrismComponent
It is designed to useng-content and property code separately. You can NOT use both the same time.@Input
| name | Type | Description | |----------|----------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| | async | boolean | Works only withng-content. "Whether to use Web Workers to improve performance and avoid blocking the UI when highlighting very large chunks of code." - prismjs |
| callback | (element: Element) => void \| undefined = undefined | "An optional callback to be invoked after the highlighting is done. Mostly useful when async is true, since in that case, the highlighting is done asynchronously." - prismjs |
| code | string | "A string with the code to be highlighted." - prismjs |
| hooks | Object | Callback with specific execute time and name: before-sanity-check, before-highlight, after-highlight, complete, before-insert. |
| interpolation | Object \| undefined | Data property values to inject. |
| language | string | "Valid language identifier, for example 'javascript', 'css'." - prismjs |Lifecycle Hooks
Angular Lifecycle HooksngAfterViewInit()
Performs
highlightElement(element, async, callback) prismjs method.ngOnChanges()
Detect input property
code or language changes by comparing currentValue to previousValue. If yes, set component property
change to true. ngOnDestroy()
Unsubscribe Rxjs.Subject subscription in Object property
subscription.code and subscription.language.ngOnInit()
Initiate subscribes to property
code and language with @ngx-reactive/decorator decorator Subscribe().Scripts
Clone repository:git clone https://github.com/ngx-prism/rxjs.gitGo to just created folder:
cd rxjsTo build a clean package, means before that script removes nodemodules, dist folder and install dependencies:
npm run start:cleanTo build a package:
npm startTo run karma tests:
npm testGIT
Commit
Versioning
Semantic Versioning 2.0.0Given a version number MAJOR.MINOR.PATCH, increment the:
MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backwards-compatible manner, and
PATCH version when you make backwards-compatible bug fixes.
Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.
FAQ How should I deal with revisions in the 0.y.z initial development phase? >The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.
How do I know when to release 1.0.0?
>If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.
