Package Exports

angular-prism

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 (angular-prism) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular-prism

View Demo

Installation

To install this library, run:

$ npm install angular-prism --save

Usage

Include the required prism theme CSS in your index.html or plug into your build System

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css"/>

Configure your System.config

System.config({
  defaultJSExtensions: true,
  map: {
    "angular2": "node_modules/angular2",
    "rxjs": "node_modules/rxjs",
    ...
    "prismjs": "node_modules/prismjs"
    "angular-prism" : "node_modules/angular-prism/dist"
  },
  packages: {        
    'app': {
      main : './main.ts',
      defaultJSExtensions : 'ts'
    },
    'prismjs' : {
      defaultExtension : 'js'
    },
    'angular-prism' : {
      main : './angular-prism.js',
      defaultExtension : 'js'
    }
  }
});

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

/* Import prism core */
import 'prismjs/prism';

/* Import the language you need to highlight */
import 'prismjs/components/prism-typescript';

import { PrismComponent } from 'angular-prism';

@NgModule({
  declarations: [
    AppComponent,
    PrismComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and in your component which displays code block

@Component({
  selector: 'my-app',
  template: `
    <div>
      <prism-block [code]="cssCode" [language]="'css'"></prism-block>
    </div>
  `,
})
export class MyComponent {
  cssCode : string;

  constructor() {
    this.cssCode = `p {
                      color:red;
                    }`;

    }
}

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

angular-prism

Package Exports

Readme

angular-prism

View Demo

Installation

Usage

Development

License