fixed highlighting (#955)

SAP · Jun 19, 2019 · 98737cf · 98737cf
1 parent 910d2bb
commit 98737cf
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 25 deletions.
diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
@@ -5,6 +5,18 @@ import { MarkdownModule } from 'ngx-markdown';
 
 import { AppComponent } from './app.component';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HighlightModule } from 'ngx-highlightjs';
+import scss from 'highlight.js/lib/languages/scss';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+
+export function hljsLanguages() {
+    return [
+        {name: 'typescript', func: typescript},
+        {name: 'scss', func: scss},
+        {name: 'html', func: xml},
+    ];
+}
 
 const routes: Routes = [
     { path: '', loadChildren: './documentation/documentation.module#DocumentationModule' },
@@ -17,7 +29,8 @@ const routes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(routes),
         HttpClientModule,
-        MarkdownModule.forRoot({ loader: HttpClient })
+        MarkdownModule.forRoot({ loader: HttpClient }),
+        HighlightModule.forRoot({ languages: hljsLanguages })
     ],
     bootstrap: [AppComponent],
     entryComponents: []

diff --git a/docs/app/documentation/component-docs/breadcrumb/breadcrumb-docs.component.html b/docs/app/documentation/component-docs/breadcrumb/breadcrumb-docs.component.html
@@ -10,5 +10,4 @@ <h2>An example using <b>href</b></h2>
 <component-example [name]="'ex2'">
   <fd-breadcrumb-href-example></fd-breadcrumb-href-example>
 </component-example>
-<pre><code mwlHighlightJs [language]="'HTML'" [source]="breadcrumbHrefHtml"></code></pre>
 <code-example [code]="breadcrumbHrefHtml" [language]="'HTML'"></code-example>
diff --git a/docs/app/documentation/core-helpers/code-example/code-example.component.html b/docs/app/documentation/core-helpers/code-example/code-example.component.html
@@ -7,7 +7,7 @@
             [title]="'Copy example to clipboard'">
     </button>
     <pre>
-        <code mwlHighlightJs [language]="language" [source]="code"></code>
+        <code [highlight]="code" [languages]="[language]"></code>
     </pre>
 </div>
 

diff --git a/docs/app/documentation/core-helpers/code-example/code-example.component.ts b/docs/app/documentation/core-helpers/code-example/code-example.component.ts
@@ -7,7 +7,15 @@ import { CopyService } from '../../services/copy.service';
     styleUrls: ['./code-example.component.scss']
 })
 export class CodeExampleComponent implements OnInit {
+
+    /**
+     * Code to highlight.
+     */
     @Input() code: string;
+
+    /**
+     * Language to limit the auto-detection to.
+     */
     @Input() language: string;
 
     smallScreen: boolean;

diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts
@@ -202,8 +202,7 @@ import {
     TimePickerDisabledExampleComponent,
     TimePickerNoSecondsExampleComponent,
     TimePickerCompactExampleComponent,
-    TimePickerAllowNullExampleComponent,
-
+    TimePickerAllowNullExampleComponent
 } from './component-docs/time-picker/examples/time-picker-examples.component';
 import { TimePickerFormExampleComponent } from './component-docs/time-picker/examples/time-picker-form-example.component';
 import { ToggleDocsComponent } from './component-docs/toggle/toggle-docs.component';
@@ -258,8 +257,6 @@ import { NewComponentComponent } from './component-docs/new-component/new-compon
 
 import { COMPONENT_SCHEMAS } from './component-docs/schemas';
 
-import * as hljs from 'highlight.js';
-import { HighlightJsModule, HIGHLIGHT_JS } from 'angular-highlight-js';
 import { BackdropExamplesComponent } from './component-docs/modal/examples/backdrop-examples/backdrop-examples.component';
 import { PopoverPlacementExampleComponent } from './component-docs/popover/examples/popover-placement/popover-placement-example.component';
 import { HttpClientModule } from '@angular/common/http';
@@ -325,10 +322,7 @@ import { TableResponsiveExampleComponent } from './component-docs/table/examples
 import { DatePickerPositionExampleComponent } from './component-docs/date-picker/examples/date-picker-position-example.component';
 import { TimePickerOtherDelimiterExampleComponent } from './component-docs/time-picker/examples/time-picker-other-delimiter-example.component';
 import { DatetimeFormatExampleComponent } from './component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component';
-
-export function highlightJsFactory() {
-    return hljs;
-}
+import { HighlightModule } from 'ngx-highlightjs';
 
 @NgModule({
     declarations: [
@@ -596,10 +590,6 @@ export function highlightJsFactory() {
     ],
     entryComponents: [ModalContentComponent, ModalInModalComponent, ModalInModalSecondComponent, AlertContentComponent],
     imports: [
-        HighlightJsModule.forRoot({
-            provide: HIGHLIGHT_JS,
-            useFactory: highlightJsFactory
-        }),
         MarkdownModule.forChild(),
         CommonModule,
         FormsModule,
@@ -609,7 +599,8 @@ export function highlightJsFactory() {
         FundamentalNgxModule,
         HttpClientModule,
         CdkTableModule,
-        DragDropModule
+        DragDropModule,
+        HighlightModule
     ],
     providers: [
         CopyService,

diff --git a/docs/styles.scss b/docs/styles.scss
@@ -158,19 +158,30 @@ pre {
 }
 
 //highlight overrides
-.hljs-tag {
+.hljs-tag, .hljs-name {
     color: #000080;
 }
-.hljs-name {
-    color: #000080;
+
+.hljs-keyword {
+    color: #00f;
+}
+
+.hljs-comment {
+    color: #008000;
 }
+
 .hljs-attr {
     color: #008080;
 }
+
 .hljs-string {
     color: #d14;
 }
 
+.hljs-meta {
+    color: #2b91af
+}
+
 .side-nav__search {
     padding: 10px 10px 0 10px;
 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
         "@angular/platform-browser-dynamic": "^7.2.7",
         "@angular/router": "^7.2.7",
         "@types/node": "^12.0.8",
-        "angular-highlight-js": "^2.0.1",
         "core-js": "^2.6.9",
         "focus-trap": "^5.0.1",
         "fundamental-styles": "^0.1.0",