Skip to content

Commit 7c0be48

Browse files
AnthonyNahasAnthonyNahas
committed
fix(demo): upgraded ngx-highlightjs to v3 and added hammerjs to the project
1 parent a39784c commit 7c0be48

File tree

7 files changed

+96
-64
lines changed

7 files changed

+96
-64
lines changed

‎demo/package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
"bootstrap": "^4.1.3",
4747
"core-js": "^2.6.0",
4848
"font-awesome": "^4.7.0",
49+
"hammerjs": "^2.0.8",
50+
"highlight.js": "^9.13.1",
4951
"include-media": "^1.4.9",
5052
"material-design-icons": "^3.0.1",
5153
"ngx-clipboard": "^11.1.9",

‎demo/src/app/app.module.ts‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
import {NgModule} from '@angular/core';
22
import {FormsModule} from '@angular/forms';
33
import {BrowserModule} from '@angular/platform-browser';
4+
import {HttpClientModule} from '@angular/common/http';
5+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
6+
import {ServiceWorkerModule} from '@angular/service-worker';
47

58
import {AppRoutingModule} from './app-routing.module';
69
import {AppSharedModule} from './shared/shared.module';
710
import {HomeModule} from './home/home.module';
811
import {AppComponent} from './app.component';
9-
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
10-
import {HttpClientModule} from '@angular/common/http';
11-
import { ServiceWorkerModule } from '@angular/service-worker';
12-
import { environment } from '../environments/environment';
12+
import {environment} from '../environments/environment';
13+
14+
import {HighlightModule} from 'ngx-highlightjs';
15+
import typescript from 'highlight.js/lib/languages/typescript';
16+
import scss from 'highlight.js/lib/languages/scss';
17+
import xml from 'highlight.js/lib/languages/xml';
18+
19+
export function hljsLanguages() {
20+
return [
21+
{name: 'typescript', func: typescript},
22+
{name: 'scss', func: scss},
23+
{name: 'xml', func: xml}
24+
];
25+
}
1326

1427
@NgModule({
1528
declarations: [
@@ -26,7 +39,10 @@ import { environment } from '../environments/environment';
2639
AppRoutingModule,
2740
AppSharedModule,
2841
HomeModule,
29-
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
42+
HighlightModule.forRoot({
43+
languages: hljsLanguages
44+
}),
45+
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
3046
],
3147
providers: [],
3248
bootstrap: [AppComponent]

‎demo/src/app/getting-started/getting-started.component.html‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h1>Getting Started</h1>
2121
</mat-card-title>
2222
<mat-card>
2323
<mat-card-content fxLayout="row" fxLayoutAlign="space-between">
24-
<pre><code highlight [code]="'$ node -v'"></code></pre>
24+
<pre><code [highlight]="'$ node -v'"></code></pre>
2525
<button mat-icon-button
2626
ngxClipboard
2727
[cbContent]="'node -v'"
@@ -34,7 +34,7 @@ <h1>Getting Started</h1>
3434
</mat-card>
3535
<mat-card>
3636
<mat-card-content fxLayout="row" fxLayoutAlign="space-between">
37-
<pre><code highlight [code]="'$ npm -v'"></code></pre>
37+
<pre><code [highlight]="'$ npm -v'"></code></pre>
3838
<button mat-icon-button
3939
ngxClipboard
4040
[cbContent]="'node -v'"
@@ -56,7 +56,7 @@ <h1>Getting Started</h1>
5656
</mat-card-subtitle>
5757
<mat-card-content>
5858
<div fxLayout="row" fxLayoutAlign="space-between">
59-
<pre><code highlight [code]="'$ ng -v'"></code></pre>
59+
<pre><code [highlight]="'$ ng -v'"></code></pre>
6060
<button mat-icon-button
6161
ngxClipboard
6262
[cbContent]="'ng -v'"
@@ -67,13 +67,13 @@ <h1>Getting Started</h1>
6767
</div>
6868
<p>If angular cli is installed on you machine, you should get something like this</p>
6969

70-
<pre><code highlight [code]="ngVersion"></code></pre>
70+
<pre><code [highlight]="ngVersion"></code></pre>
7171

7272
<p>If not please run the following command to install angular cli globally in order to create an angular
7373
project</p>
7474

7575
<div fxLayout="row" fxLayoutAlign="space-between">
76-
<pre><code highlight [code]="'$ npm install -g @angular/cli'"></code></pre>
76+
<pre><code [highlight]="'$ npm install -g @angular/cli'"></code></pre>
7777
<button mat-icon-button
7878
ngxClipboard
7979
[cbContent]="'npm install -g @angular/cli'"
@@ -96,7 +96,7 @@ <h1>Getting Started</h1>
9696
<p>If you have already a setup angular project, you can skip this step, otherwise you can generate a project
9797
via the angular cli by running the following</p>
9898
<div fxLayout="row" fxLayoutAlign="space-between">
99-
<pre><code highlight [code]="'$ ng new yourappname'"></code></pre>
99+
<pre><code [highlight]="'$ ng new yourappname'"></code></pre>
100100
<button mat-icon-button
101101
ngxClipboard
102102
[cbContent]="'ng new yourappname'"
@@ -163,7 +163,7 @@ <h1>Getting Started</h1>
163163
</p>
164164
</div>
165165
<div fxLayout="row" fxLayoutAlign="space-between">
166-
<pre><code highlight [code]="'$ npm i -s @angular/material @angular/cdk'"></code></pre>
166+
<pre><code [highlight]="'$ npm i -s @angular/material @angular/cdk'"></code></pre>
167167
<button mat-icon-button
168168
ngxClipboard
169169
[cbContent]="'npm i -s @angular/material @angular/cdk'"
@@ -189,7 +189,7 @@ <h1>Getting Started</h1>
189189
</p>
190190
</div>
191191
<div fxLayout="row" fxLayoutAlign="space-between">
192-
<pre><code highlight [code]="'$ npm i -s @angular/animations'"></code></pre>
192+
<pre><code [highlight]="'$ npm i -s @angular/animations'"></code></pre>
193193
<button mat-icon-button
194194
ngxClipboard
195195
[cbContent]="'npm i -s @angular/animations'"
@@ -210,7 +210,7 @@ <h1>Getting Started</h1>
210210
</div>
211211
<mat-card>
212212
<mat-card-content>
213-
<pre><code highlight [code]="importBrowserAnimationsModule"></code></pre>
213+
<pre><code [highlight]="importBrowserAnimationsModule"></code></pre>
214214
</mat-card-content>
215215
</mat-card>
216216
<mat-card-footer fxLayoutAlign="center">
@@ -232,7 +232,7 @@ <h1>Getting Started</h1>
232232
in your style.css file.</p>
233233
</div>
234234
<div fxLayout="row" fxLayoutAlign="space-between">
235-
<pre><code highlight [code]="importMaterialThemeSCSS"></code></pre>
235+
<pre><code [highlight]="importMaterialThemeSCSS"></code></pre>
236236
<button mat-icon-button
237237
ngxClipboard
238238
[cbContent]="importMaterialThemeSCSS"
@@ -262,7 +262,7 @@ <h1>Getting Started</h1>
262262
<mat-card-subtitle>Custom material theme</mat-card-subtitle>
263263
<mat-card-content>
264264
<div fxLayout="row" fxLayoutAlign="space-between">
265-
<pre><code highlight [code]="customMaterialTheme"></code></pre>
265+
<pre><code [highlight]="customMaterialTheme"></code></pre>
266266
<button mat-icon-button
267267
ngxClipboard
268268
[cbContent]="customMaterialTheme"
@@ -290,11 +290,11 @@ <h1>Getting Started</h1>
290290
<p>The easiest way to load the material design icons is to provide the
291291
following link in your
292292
<p>
293-
<pre><code highlight [code]="'index.html '"></code></pre>
293+
<pre><code [highlight]="'index.html '"></code></pre>
294294
<p>file </p>
295295
</div>
296296
<div fxLayout="row" fxLayoutAlign="space-between">
297-
<pre><code highlight [code]="materialIconsLink"></code></pre>
297+
<pre><code [highlight]="materialIconsLink"></code></pre>
298298
<button mat-icon-button
299299
ngxClipboard
300300
[cbContent]="materialIconsLink"
@@ -319,7 +319,7 @@ <h1>Getting Started</h1>
319319
mat-button color="primary">material design icons' npm module</a></p>
320320
</div>
321321
<div fxLayout="row" fxLayoutAlign="space-between">
322-
<pre><code highlight [code]="'$ npm i -s material-design-icons'"></code></pre>
322+
<pre><code [highlight]="'$ npm i -s material-design-icons'"></code></pre>
323323
<button mat-icon-button
324324
ngxClipboard
325325
[cbContent]="'npm i -s material-design-icons'"
@@ -331,7 +331,7 @@ <h1>Getting Started</h1>
331331
<div class="comment-container">
332332
<p>After that, you need to update you
333333
<p>
334-
<pre><code highlight [code]="'angular-cli.json'"></code></pre>
334+
<pre><code [highlight]="'angular-cli.json'"></code></pre>
335335
<p>files. Under the styles sections, add
336336
the path of the material design icons in order to be imported to your distribution files
337337
when you build your app. <i>See below</i></p>
@@ -341,7 +341,7 @@ <h1>Getting Started</h1>
341341
</div>
342342
<div fxLayout="row" fxLayoutAlign="space-between">
343343
<pre><code highlight
344-
[code]="'../node_modules/material-design-icons/iconfont/material-icons.css'"></code></pre>
344+
[highlight]="'../node_modules/material-design-icons/iconfont/material-icons.css'"></code></pre>
345345
<button mat-icon-button
346346
ngxClipboard
347347
[cbContent]="'../node_modules/material-design-icons/iconfont/material-icons.css'"
@@ -356,7 +356,7 @@ <h1>Getting Started</h1>
356356
<mat-card-subtitle>Before</mat-card-subtitle>
357357
<div fxLayout="row" fxLayoutAlign="space-between">
358358
<pre><code highlight
359-
[code]="stylesBeforeImportMDI"></code></pre>
359+
[highlight]="stylesBeforeImportMDI"></code></pre>
360360
<button mat-icon-button
361361
ngxClipboard
362362
[cbContent]="stylesBeforeImportMDI"
@@ -368,7 +368,7 @@ <h1>Getting Started</h1>
368368
<mat-card-subtitle>After</mat-card-subtitle>
369369
<div fxLayout="row" fxLayoutAlign="space-between">
370370
<pre><code highlight
371-
[code]="stylesAfterImportMDI"></code></pre>
371+
[highlight]="stylesAfterImportMDI"></code></pre>
372372
<button mat-icon-button
373373
ngxClipboard
374374
[cbContent]="stylesAfterImportMDI"
@@ -408,7 +408,7 @@ <h1>Getting Started</h1>
408408
</div>
409409
<div fxLayout="row" fxLayoutAlign="space-between">
410410
<pre><code highlight
411-
[code]="'$ npm i -s ngx-material-faq'"></code></pre>
411+
[highlight]="'$ npm i -s ngx-material-faq'"></code></pre>
412412
<button mat-icon-button
413413
ngxClipboard
414414
[cbContent]="'npm i -s ngx-material-faq'"
@@ -418,11 +418,11 @@ <h1>Getting Started</h1>
418418
</button>
419419
</div>
420420
<!--<div fxLayoutAlign="center">-->
421-
<!--<video *ngIf="true" controls autoplay loop>-->
422-
<!--<source-->
423-
<!--src="assets/tutorials/npm_i_ngx_material_password_strength.mp4"-->
424-
<!--type="video/mp4">-->
425-
<!--</video>-->
421+
<!--<video *ngIf="true" controls autoplay loop>-->
422+
<!--<source-->
423+
<!--src="assets/tutorials/npm_i_ngx_material_password_strength.mp4"-->
424+
<!--type="video/mp4">-->
425+
<!--</video>-->
426426
<!--</div>-->
427427
<div class="comment-container">
428428
<p>Now you just need to import the library </p>
@@ -437,7 +437,7 @@ <h1>Getting Started</h1>
437437
<mat-card-content>
438438
<div fxLayout="row" fxLayoutAlign="space-between">
439439
<pre><code highlight
440-
[code]="systemJSModuleImport"></code></pre>
440+
[highlight]="systemJSModuleImport"></code></pre>
441441
<button mat-icon-button
442442
ngxClipboard
443443
[cbContent]="systemJSModuleImport"
@@ -453,7 +453,7 @@ <h1>Getting Started</h1>
453453
</div>
454454
<div fxLayout="row" fxLayoutAlign="space-between">
455455
<pre><code highlight
456-
[code]="importNgxMaterialFaqModule"></code></pre>
456+
[highlight]="importNgxMaterialFaqModule"></code></pre>
457457
<button mat-icon-button
458458
ngxClipboard
459459
[cbContent]="importNgxMaterialFaqModule"
@@ -472,7 +472,7 @@ <h1>Getting Started</h1>
472472
</div>
473473
<div fxLayout="row" fxLayoutAlign="space-between">
474474
<pre><code highlight
475-
[code]="importNgxMaterialFaqModuleInAppModule"></code></pre>
475+
[highlight]="importNgxMaterialFaqModuleInAppModule"></code></pre>
476476
<button mat-icon-button
477477
ngxClipboard
478478
[cbContent]="importNgxMaterialFaqModuleInAppModule"
@@ -486,7 +486,7 @@ <h1>Getting Started</h1>
486486
</div>
487487
<div fxLayout="row" fxLayoutAlign="space-between">
488488
<pre><code highlight
489-
[code]="importNgxMaterialFaqModuleInOtherModule"></code></pre>
489+
[highlight]="importNgxMaterialFaqModuleInOtherModule"></code></pre>
490490
<button mat-icon-button
491491
ngxClipboard
492492
[cbContent]="importNgxMaterialFaqModuleInOtherModule"
@@ -512,15 +512,15 @@ <h1>Getting Started</h1>
512512
<p>Add the following to your template</p>
513513

514514
<pre><code highlight
515-
[code]="componentExample"></code></pre>
515+
[highlight]="componentExample"></code></pre>
516516

517517
</div>
518518

519519
<div class="comment-container">
520520
<p>and the following to your component</p>
521521

522522
<pre><code highlight
523-
[code]="componentExampleInComponent"></code></pre>
523+
[highlight]="componentExampleInComponent"></code></pre>
524524

525525
</div>
526526
</mat-card-content>
@@ -533,7 +533,7 @@ <h1>Getting Started</h1>
533533
<p>and the following to your component</p>
534534

535535
<pre><code highlight
536-
[code]="adminComponentExampleInComponent"></code></pre>
536+
[highlight]="adminComponentExampleInComponent"></code></pre>
537537

538538
</div>
539539
</mat-card-content>
@@ -543,7 +543,7 @@ <h1>Getting Started</h1>
543543
<p>Add the following to your template as admin</p>
544544

545545
<pre><code highlight
546-
[code]="adminComponentExample"></code></pre>
546+
[highlight]="adminComponentExample"></code></pre>
547547

548548
</div>
549549

@@ -577,7 +577,7 @@ <h1>Getting Started</h1>
577577
</div>
578578
<div fxLayout="row" fxLayoutAlign="space-between">
579579
<pre><code highlight
580-
[code]="'git clone https://github.com/AnthonyNahas/ngx-material-faq.git'"></code></pre>
580+
[highlight]="'git clone https://github.com/AnthonyNahas/ngx-material-faq.git'"></code></pre>
581581
<button mat-icon-button
582582
ngxClipboard
583583
[cbContent]="'git clone https://github.com/AnthonyNahas/ngx-material-faq.git'"
@@ -591,7 +591,7 @@ <h1>Getting Started</h1>
591591
</div>
592592
<div fxLayout="row" fxLayoutAlign="space-between">
593593
<pre><code highlight
594-
[code]="'$ cd demo'"></code></pre>
594+
[highlight]="'$ cd demo'"></code></pre>
595595
<button mat-icon-button
596596
ngxClipboard
597597
[cbContent]="'cd demo'"
@@ -605,7 +605,7 @@ <h1>Getting Started</h1>
605605
</div>
606606
<div fxLayout="row" fxLayoutAlign="space-between">
607607
<pre><code highlight
608-
[code]="'$ npm i'"></code></pre>
608+
[highlight]="'$ npm i'"></code></pre>
609609
<button mat-icon-button
610610
ngxClipboard
611611
[cbContent]="'npm i'"
@@ -619,7 +619,7 @@ <h1>Getting Started</h1>
619619
</div>
620620
<div fxLayout="row" fxLayoutAlign="space-between">
621621
<pre><code highlight
622-
[code]="'$ ng serve --open'"></code></pre>
622+
[highlight]="'$ ng serve --open'"></code></pre>
623623
<button mat-icon-button
624624
ngxClipboard
625625
[cbContent]="'ng serve --open'"

‎demo/src/app/shared/shared.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {NgxMaterialPagesModule} from 'ngx-material-pages';
2929
NgbCollapseModule.forRoot(),
3030
MatFaqModule.forRoot(),
3131
NgxMaterialPagesModule.forRoot(),
32-
HighlightModule.forRoot(),
32+
HighlightModule,
3333
FormsModule,
3434
ReactiveFormsModule,
3535
FlexLayoutModule,

0 commit comments

Comments
 (0)