Skip to content

Commit 420f946

Browse files
AnthonyNahasAnthonyNahas
committed
fix(demo): upgraded ngx-highlightjs to v3
1 parent 8cfd22c commit 420f946

File tree

4 files changed

+51
-38
lines changed

4 files changed

+51
-38
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,15 @@ import {environment} from '../environments/environment';
1111
import {ServiceWorkerModule} from '@angular/service-worker';
1212
import {HttpClient, HttpClientModule} from '@angular/common/http';
1313
import {MatInputModule} from '@angular/material';
14+
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
1415
import {MarkdownModule} from 'ngx-markdown';
16+
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
17+
18+
// AoT requires an exported function for factories
19+
export function HttpLoaderFactory(http: HttpClient) {
20+
return new TranslateHttpLoader(http);
21+
}
22+
1523

1624
@NgModule({
1725
declarations: [
@@ -24,6 +32,13 @@ import {MarkdownModule} from 'ngx-markdown';
2432
BrowserModule.withServerTransition({appId: '@angular-material-extensions/password-strength-demo-id'}),
2533
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
2634
MarkdownModule.forRoot({loader: HttpClient}),
35+
TranslateModule.forRoot({
36+
loader: {
37+
provide: TranslateLoader,
38+
useFactory: HttpLoaderFactory,
39+
deps: [HttpClient]
40+
}
41+
}),
2742
BrowserAnimationsModule,
2843
FormsModule,
2944
HttpClientModule,

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

Lines changed: 31 additions & 34 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 [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>
@@ -340,8 +340,7 @@ <h1>Getting Started</h1>
340340
<p>First of all, copy the path of the material design icons</p>
341341
</div>
342342
<div fxLayout="row" fxLayoutAlign="space-between">
343-
<!--<pre><code highlight-->
344-
<!--[code]="'../node_modules/material-design-icons/iconfont/material-icons.css'"></code></pre>-->
343+
<pre><code [highlight]="'../node_modules/material-design-icons/iconfont/material-icons.css'"></code></pre>
345344
<button mat-icon-button
346345
ngxClipboard
347346
[cbContent]="'../node_modules/material-design-icons/iconfont/material-icons.css'"
@@ -355,7 +354,7 @@ <h1>Getting Started</h1>
355354
</div>
356355
<mat-card-subtitle>Before</mat-card-subtitle>
357356
<div fxLayout="row" fxLayoutAlign="space-between">
358-
<!--<pre><code highlight [code]="stylesBeforeImportMDI"></code></pre>-->
357+
<pre><code [highlight]="stylesBeforeImportMDI"></code></pre>
359358
<button mat-icon-button
360359
ngxClipboard
361360
[cbContent]="stylesBeforeImportMDI"
@@ -366,7 +365,7 @@ <h1>Getting Started</h1>
366365
</div>
367366
<mat-card-subtitle>After</mat-card-subtitle>
368367
<div fxLayout="row" fxLayoutAlign="space-between">
369-
<!--<pre><code highlight [code]="stylesAfterImportMDI"></code></pre>-->
368+
<pre><code [highlight]="stylesAfterImportMDI"></code></pre>
370369
<button mat-icon-button
371370
ngxClipboard
372371
[cbContent]="stylesAfterImportMDI"
@@ -405,8 +404,7 @@ <h1>Getting Started</h1>
405404
from npm
406405
</div>
407406
<div fxLayout="row" fxLayoutAlign="space-between">
408-
<!--<pre><code highlight-->
409-
<!--[code]="'$ npm i -s @angular-material-extensions/password-strength'"></code></pre>-->
407+
<pre><code [highlight]="'$ npm i -s @angular-material-extensions/password-strength'"></code></pre>
410408
<button mat-icon-button
411409
ngxClipboard
412410
[cbContent]="'npm i -s @angular-material-extensions/password-strength'"
@@ -434,7 +432,7 @@ <h1>Getting Started</h1>
434432
</mat-card-subtitle>
435433
<mat-card-content>
436434
<div fxLayout="row" fxLayoutAlign="space-between">
437-
<!--<pre><code highlight [code]="systemJSModuleImport"></code></pre>-->
435+
<pre><code [highlight]="systemJSModuleImport"></code></pre>
438436
<button mat-icon-button
439437
ngxClipboard
440438
[cbContent]="systemJSModuleImport"
@@ -449,7 +447,7 @@ <h1>Getting Started</h1>
449447
<p>Once installed you need to import the main module:</p>
450448
</div>
451449
<div fxLayout="row" fxLayoutAlign="space-between">
452-
<!--<pre><code highlight [code]="importMatPasswordStrengthModule"></code></pre>-->
450+
<pre><code [highlight]="importMatPasswordStrengthModule"></code></pre>
453451
<button mat-icon-button
454452
ngxClipboard
455453
[cbContent]="importMatPasswordStrengthModule"
@@ -467,7 +465,7 @@ <h1>Getting Started</h1>
467465
(usally app.component.ts)</p>
468466
</div>
469467
<div fxLayout="row" fxLayoutAlign="space-between">
470-
<!--<pre><code highlight [code]="importMatPasswordStrengthModuleInAppModule"></code></pre>-->
468+
<pre><code [highlight]="importMatPasswordStrengthModuleInAppModule"></code></pre>
471469
<button mat-icon-button
472470
ngxClipboard
473471
[cbContent]="importMatPasswordStrengthModuleInAppModule"
@@ -480,7 +478,7 @@ <h1>Getting Started</h1>
480478
<p>Other modules in your application can simply import MatPasswordStrengthModule:</p>
481479
</div>
482480
<div fxLayout="row" fxLayoutAlign="space-between">
483-
<!--<pre><code highlight [code]="importMatPasswordStrengthModuleInOtherModule"></code></pre>-->
481+
<pre><code [highlight]="importMatPasswordStrengthModuleInOtherModule"></code></pre>
484482
<button mat-icon-button
485483
ngxClipboard
486484
[cbContent]="importMatPasswordStrengthModuleInOtherModule"
@@ -504,7 +502,7 @@ <h1>Getting Started</h1>
504502
<div class="comment-container">
505503
<p>Add the following to your template</p>
506504

507-
<!--<pre><code highlight [code]="componentExample"></code></pre>-->
505+
<pre><code [highlight]="componentExample"></code></pre>
508506

509507
</div>
510508
</mat-card-content>
@@ -513,7 +511,7 @@ <h1>Getting Started</h1>
513511
<mat-card-title>Example</mat-card-title>
514512
<mat-card-content>
515513
<div fxLayout="row" fxLayoutAlign="space-between">
516-
<!--<pre><code highlight [code]="example"></code></pre>-->
514+
<pre><code [highlight]="example"></code></pre>
517515
<button mat-icon-button
518516
ngxClipboard
519517
[cbContent]="example"
@@ -581,8 +579,7 @@ <h1>Getting Started</h1>
581579
<p>Clone this repo by running this following command</p>
582580
</div>
583581
<div fxLayout="row" fxLayoutAlign="space-between">
584-
<!--<pre><code highlight-->
585-
<!--[code]="'git clone https://github.com/AnthonyNahas/@angular-material-extensions/password-strength.git'"></code></pre>-->
582+
<pre><code [highlight]="'git clone https://github.com/AnthonyNahas/@angular-material-extensions/password-strength.git'"></code></pre>
586583
<button mat-icon-button
587584
ngxClipboard
588585
[cbContent]="'git clone https://github.com/AnthonyNahas/@angular-material-extensions/password-strength.git'"
@@ -595,7 +592,7 @@ <h1>Getting Started</h1>
595592
<p>install the dependencies</p>
596593
</div>
597594
<div fxLayout="row" fxLayoutAlign="space-between">
598-
<!--<pre><code highlight [code]="'$ npm i'"></code></pre>-->
595+
<pre><code [highlight]="'$ npm i'"></code></pre>
599596
<button mat-icon-button
600597
ngxClipboard
601598
[cbContent]="'npm i'"
@@ -608,7 +605,7 @@ <h1>Getting Started</h1>
608605
<p>Link @angular-material-extensions/password-strength's package</p>
609606
</div>
610607
<div fxLayout="row" fxLayoutAlign="space-between">
611-
<!--<pre><code highlight [code]="'$ gulp link'"></code></pre>-->
608+
<pre><code [highlight]="'$ gulp link'"></code></pre>
612609
<button mat-icon-button
613610
ngxClipboard
614611
[cbContent]="'gulp link'"
@@ -621,7 +618,7 @@ <h1>Getting Started</h1>
621618
<p>navigate to the demo directory</p>
622619
</div>
623620
<div fxLayout="row" fxLayoutAlign="space-between">
624-
<!--<pre><code highlight [code]="'$ cd demo'"></code></pre>-->
621+
<pre><code [highlight]="'$ cd demo'"></code></pre>
625622
<button mat-icon-button
626623
ngxClipboard
627624
[cbContent]="'cd demo'"
@@ -634,7 +631,7 @@ <h1>Getting Started</h1>
634631
<p>install the dependencies</p>
635632
</div>
636633
<div fxLayout="row" fxLayoutAlign="space-between">
637-
<!--<pre><code highlight [code]="'$ npm i'"></code></pre>-->
634+
<pre><code [highlight]="'$ npm i'"></code></pre>
638635
<button mat-icon-button
639636
ngxClipboard
640637
[cbContent]="'npm i'"
@@ -647,7 +644,7 @@ <h1>Getting Started</h1>
647644
<p>start the app</p>
648645
</div>
649646
<div fxLayout="row" fxLayoutAlign="space-between">
650-
<!--<pre><code highlight [code]="'$ ng serve &#45;&#45;open'"></code></pre>-->
647+
<pre><code [highlight]="'$ ng serve --open'"></code></pre>
651648
<button mat-icon-button
652649
ngxClipboard
653650
[cbContent]="'ng serve --open'"

‎demo/src/app/home/home.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,12 @@ <h1>@angular-material-extensions/password-strength</h1>
4848
<!--tab 1-->
4949
<mat-tab>
5050
<ng-template mat-tab-label>HTML</ng-template>
51-
<!--<pre><code highlight [code]="html1"></code></pre>-->
51+
<pre><code highlight [highlight]="html1"></code></pre>
5252
</mat-tab>
5353

5454
<mat-tab>
5555
<ng-template mat-tab-label>TS</ng-template>
56-
<!--<pre><code highlight [code]="ts"></code></pre>-->
56+
<pre><code highlight [highlight]="ts"></code></pre>
5757
</mat-tab>
5858
</mat-tab-group>
5959
</mat-card-content>
@@ -123,12 +123,12 @@ <h1>@angular-material-extensions/password-strength</h1>
123123
<!--tab 1-->
124124
<mat-tab>
125125
<ng-template mat-tab-label>HTML</ng-template>
126-
<!--<pre><code highlight [code]="html2"></code></pre>-->
126+
<pre><code highlight [highlight]="html2"></code></pre>
127127
</mat-tab>
128128

129129
<mat-tab>
130130
<ng-template mat-tab-label>TS</ng-template>
131-
<!--<pre><code highlight [code]="ts"></code></pre>-->
131+
<pre><code highlight [highlight]="ts"></code></pre>
132132
</mat-tab>
133133
</mat-tab-group>
134134
</mat-card-content>

‎demo/src/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* You can add global styles to this file, and also import other style files */
2+
@import '~highlight.js/styles/github.css';
23
@import 'material_theme';
34
@import 'variables';
45
@import '~bootstrap/scss/bootstrap';

0 commit comments

Comments
 (0)