@ngx-prism/rxjs
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.5 • Public • Published

    @ngx-prism/rxjs

    npm version GitHub version Build Status Known Vulnerabilities

    GitHub issues GitHub forks GitHub stars GitHub license

    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 code input property.
    • Interpolate string to highlight with interpolation object.
    • @ngx-reactive/decorator with rxjs/Subject to Subscribe to code and language property changes.

    Cons:

    • With async true does not work properly.
    • Hooks are defined globally.


    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.git

    Go 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 start

    Open http://localhost:4200/ in your browser.

    Installation

    To install, run:

    npm install @ngx-prism/rxjs --save

    Usage

    1. Import PrismModule into 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 { }
    1. 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/cli like 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 use ng-content and property code separately. You can NOT use both the same time.

    @Input

    name Type Description
    async boolean Works only with ng-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 Hooks

    ngAfterViewInit()
    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.git

    Go to just created folder:

    cd rxjs

    To build a clean package, means before that script removes node_modules, dist folder and install dependencies:

    npm run start:clean

    To build a package:

    npm start

    To run karma tests:

    npm test

    GIT

    Commit

    Versioning

    Semantic Versioning 2.0.0

    Given 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.

    License

    MIT © ngx-prism

    Donate

    Click to donate

    Install

    npm i @ngx-prism/rxjs

    DownloadsWeekly Downloads

    20

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • ngxpackage