https://github.com/vaibhav93/angular-prism
Minimal PrismJS component for code highlighting in Angular 2/4
https://github.com/vaibhav93/angular-prism
angular2 angular2-component angular4 angular4-component typescript
Last synced: 9 months ago
JSON representation
Minimal PrismJS component for code highlighting in Angular 2/4
- Host: GitHub
- URL: https://github.com/vaibhav93/angular-prism
- Owner: vaibhav93
- Created: 2017-04-06T18:33:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-02T17:24:52.000Z (almost 8 years ago)
- Last Synced: 2025-04-04T10:38:54.600Z (10 months ago)
- Topics: angular2, angular2-component, angular4, angular4-component, typescript
- Language: TypeScript
- Homepage: https://plnkr.co/edit/5z6Keq?p=preview
- Size: 25.4 KB
- Stars: 17
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# angular-prism
## [ View Demo ](https://plnkr.co/edit/5z6Keq?p=preview)
## Installation
To install this library, run:
```bash
$ npm install angular-prism --save
```
## Usage
Include the required prism theme CSS in your index.html or plug into your build System
```xml
```
Configure your System.config
```javascript
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`:
```typescript
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
```typescript
@Component({
selector: 'my-app',
template: `
`,
})
export class MyComponent {
cssCode : string;
constructor() {
this.cssCode = `p {
color:red;
}`;
}
}
```
## Development
To generate all `*.js`, `*.js.map` and `*.d.ts` files:
```bash
$ npm run tsc
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
## License
MIT © [Vaibhav Bansal](mailto:vaibhavbansal1993@gmail.com)