15.0.0 (#425)

Author: jfcere

README.md

@@ -15,7 +15,7 @@
     <img alt="License" src="https://img.shields.io/npm/l/ngx-markdown.svg">
   </a>
   <br>
-  <img alt="Dependency Status" src="https://img.shields.io/librariesio/release/npm/ngx-markdown/14.0.1">
+  <img alt="Dependency Status" src="https://img.shields.io/librariesio/release/npm/ngx-markdown/15.0.0">
   <a href="https://www.npmjs.com/package/ngx-markdown">
     <img alt="Monthly Downloads" src="https://img.shields.io/npm/dm/ngx-markdown.svg">
   </a>
@@ -51,10 +51,11 @@ StackBlitz available @ [https://stackblitz.com/edit/ngx-markdown](https://stackb
 
 ### ngx-markdown
 
-To add ngx-markdown library to your `package.json` use the following command.
+To add ngx-markdown library to your `package.json` use the following commands.
 
 ```bash
-npm install ngx-markdown --save
+npm install ngx-markdown marked --save
+npm install @types/marked --save-dev
 ```
 
 As the library is using [Marked](https://github.com/chjj/marked) parser you will need to add `node_modules/marked/marked.min.js` to your application.
@@ -71,6 +72,12 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 
 > :bell: Syntax highlight is **optional**, skip this step if you are not planning to use it
 
+To add [Prism.js](http://prismjs.com/) library to your `package.json` use the following command.
+
+```bash
+npm install prismjs --save
+```
+
 To activate [Prism.js](http://prismjs.com/) syntax highlight you will need to include...
 - prism.js core library - `node_modules/prismjs/prism.js` file
 - a highlight css theme - from `node_modules/prismjs/themes` directory
@@ -231,6 +238,12 @@ Optionally, to automatically present some lines as output without providing the
 
 > :bell: Emoji support is **optional**, skip this step if you are not planning to use it
 
+To add [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) library to your `package.json` use the following command.
+
+```bash
+npm install emoji-toolkit --save
+```
+
 To activate [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) for emoji suppport you will need to include...
 - Emoji-Toolkit library - `node_modules/emoji-toolkit/lib/js/joypixels.min.js`
 
@@ -259,6 +272,12 @@ Using `markdown` component and/or directive, you will be able to use the `emoji`
 
 > :bell: Math rendering is **optional**, skip this step if you are not planning to use it
 
+To add [KaTeX](https://katex.org/) library to your `package.json` use the following command.
+
+```bash
+npm install katex --save
+```
+
 To activate [KaTeX](https://katex.org/) math rendering you will need to include...
 - KaTex JavaScript library - `node_modules/katex/dist/katex.min.js` file
 - KaTex Auto-Render extension - `node_modules/katex/dist/contrib/auto-render.min.js,` file
@@ -317,6 +336,12 @@ public options: KatexOptions = {
 
 > :bell: Diagram support is **optional**, skip this step if you are not planning to use it
 
+To add [Mermaid](https://mermaid-js.github.io/) library to your `package.json` use the following command.
+
+```bash
+npm install mermaid --save
+```
+
 To activate [Mermaid](https://mermaid-js.github.io/) diagramming and charting tool you will need to include...
 - Mermaid JavaScript library - `node_modules/mermaid/dist/mermaid.min.js` file
 
@@ -367,6 +392,12 @@ public options: MermaidAPI.Config = {
 
 > :bell: Copy-to-clipboard support is **optional**, skip this step if you are not planning to use it
 
+To add [Clipboard](https://clipboardjs.com/) library to your `package.json` use the following command.
+
+```bash
+npm install clipboard --save
+```
+
 To activate [Clipboard](https://clipboardjs.com/) allowing copy-to-clipboard you will need to include...
 - Clipboard JavaScript library - `node_modules/clipboard/dist/clipboard.min.js` file
 

angular.json

@@ -20,7 +20,9 @@
             "outputPath": "dist/demo",
             "index": "demo/src/index.html",
             "main": "demo/src/main.ts",
-            "polyfills": "demo/src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "demo/tsconfig.app.json",
             "assets": [
               "demo/src/favicon.ico",
@@ -83,12 +85,6 @@
                   "maximumError": "10kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "demo/src/environments/environment.ts",
-                  "with": "demo/src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
@@ -150,9 +146,12 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "lib/test.ts",
             "tsConfig": "lib/tsconfig.spec.json",
-            "karmaConfig": "lib/karma.conf.js"
+            "karmaConfig": "lib/karma.conf.js",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
           }
         },
         "lint": {

demo/browserslist

@@ -1,4 +1,4 @@
-@import "~@angular/material/theming";
+@use '@angular/material' as mat;
 
 // variables
 
@@ -24,7 +24,7 @@ $viewport-offset-x: 16px;
 }
 
 .mat-tab-nav-bar--sticky {
-  @include mat-elevation(6);
+  @include mat.elevation(6);
   transition: box-shadow .3s ease-out;
 }
 
@@ -39,6 +39,8 @@ $viewport-offset-x: 16px;
   }
 
   .mat-tab-link {
+    font-size: 14px;
+    font-weight: 500;
     margin: 0 $viewport-offset-x;
     min-width: 0;
     padding: 0;

demo/src/app/app.component.scss

@@ -1,13 +1,29 @@
-@import '~@angular/material/theming';
+@use 'sass:map';
+@use '@angular/material' as mat;
 
-@mixin app-component-theme($theme) {
-  $primary: map-get($theme, primary);
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+
+  $primary-palette: map.get($color-config, 'primary');
+  $primary-color: mat.get-color-from-palette($primary-palette, 'default');
+  $primary-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast');
+
+  a.mat-tab-link,
+  a.mat-tab-link:active,
+  a.mat-tab-link:focus,
+  a.mat-tab-link:visited {
+    color: $primary-contrast;
+  }
+
+  .mat-ink-bar {
+    background-color: $primary-contrast;
+  }
 
   .mat-toolbar.mat-primary {
-    background: linear-gradient(90deg, mat-color($primary) 15%, darken(mat-color($primary), 4%) 100%);
+    background: linear-gradient(90deg, $primary-color 15%, darken($primary-color, 4%) 100%);
   }
 
   .mat-tab-nav-bar.mat-background-primary {
-    background: mat-color($primary);
+    background: $primary-color;
   }
 }

demo/src/app/app.component.theme.scss

@@ -1,8 +1,8 @@
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule, SecurityContext } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ClipboardOptions, MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';

demo/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';

demo/src/app/bindings/bindings.module.ts

@@ -1,6 +1,11 @@
 <app-scrollspy-nav-layout [headings]="headings">
   <h1>Plugins</h1>
 
+  <markdown>
+    <!-- Before to use any plugin, make sure you've installed the required libraries by following the [installation](https://jfcere.github.io/ngx-markdown/get-started#installation) section of the __Get Started__ page. -->
+    Before to use any plugin, make sure you've installed the required libraries by following the [installation](/get-started#installation) section of the __Get Started__ page.
+  </markdown>
+
   <!-- PLUGINS - Emoji -->
   <section>
     <h2 id="emoji">Emoji plugin</h2>

demo/src/app/plugins/plugins.component.html

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ClipboardOptions, MermaidAPI } from 'ngx-markdown';
 
 import { ClipboardButtonComponent } from '@shared/clipboard-button';

demo/src/app/plugins/plugins.component.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ClipboardButtonModule } from '@shared/clipboard-button';

demo/src/app/plugins/plugins.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ScrollspyNavLayoutModule } from '@shared/scrollspy-nav-layout/scrollspy-nav-layout.module';

demo/src/app/rerender/rerender.module.ts

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 .btn-clipboard {
   height: 30px;
   width: 30px;

demo/src/app/shared/clipboard-button/clipboard-button.component.scss

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 
 @Component({
   selector: 'app-clipboard-button',

demo/src/app/shared/clipboard-button/clipboard-button.component.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import { MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 
 import { ClipboardButtonComponent } from './clipboard-button.component';
 

demo/src/app/shared/clipboard-button/clipboard-button.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ScrollspyNavModule } from '@shared/scrollspy-nav/scrollspy-nav.module';

demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.module.ts

@@ -1,20 +1,24 @@
-@import '~@angular/material/theming';
+@use 'sass:map';
+@use '@angular/material' as mat;
 
-@mixin scrollspy-nav-component-theme($theme) {
-  $accent: map-get($theme, accent);
-  $foreground: map-get($theme, foreground);
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+
+  $accent-palette: map.get($color-config, 'accent');
+  $accent-color: mat.get-color-from-palette($accent-palette, 'default');
+  $accent-contrast: mat.get-color-from-palette($accent-palette, 'default-contrast');
 
   ul.scrollspy-nav {
 
     li {
-      border-left: 2px solid mat-color($accent);
-      box-shadow: inset 1px 0 0 mat-color($accent);
+      border-left: 2px solid $accent-color;
+      box-shadow: inset 1px 0 0 $accent-color;
 
       &:not(.active) {
-        box-shadow: inset 1px 0 0 mat-color($foreground, text, .21);
+        box-shadow: inset 1px 0 0 rgba($accent-contrast, .21);
 
         a:not(:hover) {
-          color: mat-color($foreground, text);
+          color: $accent-contrast;
         }
       }
     }

demo/src/app/shared/scrollspy-nav/scrollspy-nav.component.theme.scss

@@ -1,14 +1,8 @@
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import 'hammerjs';
 
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
 import './prism';
 
-if (environment.production) {
-  enableProdMode();
-}
-
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));