;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/projects/demo/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../out-tsc/e2e",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/projects/demo/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../../coverage/demo'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/projects/demo/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | Overview
3 |
4 | For full instructions on click
5 | here . To find out more about highlight.js can be found
10 | here
11 |
12 |
13 |
14 | Using the HighlightJsContent directive
15 |
16 |
17 | Use this directive to handle dynamic content which contains snippets. Both
18 | the sections below have innerHTML bound to the the sampleContent property.
19 |
20 | Raw pre code without highlighting
21 |
22 | Add dynamic content and highlight it
23 |
28 |
29 |
30 |
37 | add content
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/projects/demo/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | mat-card {
2 | margin: 12px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/demo/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async(() => {
6 | TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | }));
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 |
19 | it(`should have as title 'demo'`, () => {
20 | const fixture = TestBed.createComponent(AppComponent);
21 | const app = fixture.debugElement.componentInstance;
22 | expect(app.title).toEqual('demo');
23 | });
24 |
25 | it('should render title in a h1 tag', () => {
26 | const fixture = TestBed.createComponent(AppComponent);
27 | fixture.detectChanges();
28 | const compiled = fixture.debugElement.nativeElement;
29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to demo!');
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/projects/demo/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss']
7 | })
8 | export class AppComponent {
9 | sampleContent = `
10 |
11 |
12 | class Greeter {
13 | constructor(public greeting: string) { }
14 | greet() {
15 | return "hello world";
16 | }
17 | };
18 |
19 |
20 |
21 |
22 | alert('Hello, World!');
23 |
24 |
25 | `;
26 |
27 | dynamicContent: string;
28 |
29 | addContent() {
30 | this.dynamicContent = this.sampleContent;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/projects/demo/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { MatButtonModule } from '@angular/material/button';
3 | import { MatCardModule } from '@angular/material/card';
4 | import { BrowserModule } from '@angular/platform-browser';
5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6 | import { AngularHighlightJsModule } from 'angular-highlight-js';
7 | import { registerLanguage } from 'highlight.js';
8 | import javascript from 'highlight.js/lib/languages/javascript';
9 | import typescript from 'highlight.js/lib/languages/typescript';
10 | import { AppComponent } from './app.component';
11 |
12 | registerLanguage('typescript', typescript);
13 | registerLanguage('javascript', javascript);
14 |
15 | @NgModule({
16 | declarations: [AppComponent],
17 | imports: [
18 | BrowserModule,
19 | BrowserAnimationsModule,
20 | MatCardModule,
21 | MatButtonModule,
22 | AngularHighlightJsModule,
23 | ],
24 | providers: [],
25 | bootstrap: [AppComponent],
26 | })
27 | export class AppModule {}
28 |
--------------------------------------------------------------------------------
/projects/demo/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JayChase/angular2-highlight-js/308564f10bdf097cef7e3974174c188d7d82f5c4/projects/demo/src/assets/.gitkeep
--------------------------------------------------------------------------------
/projects/demo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/projects/demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/projects/demo/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JayChase/angular2-highlight-js/308564f10bdf097cef7e3974174c188d7d82f5c4/projects/demo/src/favicon.ico
--------------------------------------------------------------------------------
/projects/demo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Demo
6 |