Implement all ngx-markdown plugins and use them for comment formatting

angular.json

@@ -26,7 +26,11 @@
               "./node_modules/material-design-icons/iconfont/material-icons.css"
             ],
             "scripts": [
-              "node_modules/marked/lib/marked.js"
+              "node_modules/marked/lib/marked.js",
+              "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
+              "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js",
+              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
+              "node_modules/katex/dist/katex.min.js"
             ]
           },
           "configurations": {

package.json

@@ -34,9 +34,11 @@
     "badwords-list": "^1.0.0",
     "chart.js": "^2.9.4",
     "core-js": "^2.5.7",
+    "emoji-toolkit": "^6.5.1",
     "get-stream": "^6.0.1",
     "is-docker": "^1.1.0",
     "is-promise": "^4.0.0",
+    "katex": "^0.13.0",
     "mat-color-picker": "^1.4.3",
     "material-design-icons": "^3.0.1",
     "naughty-words": "^1.2.0",
@@ -44,6 +46,7 @@
     "ngx-markdown": "^11.1.3",
     "ngx-matomo": "^0.1.4",
     "ngx-matomo-v9": "^0.3.0",
+    "prismjs": "^1.23.0",
     "rxjs": "^6.5.4",
     "tslib": "^2.0.0",
     "typescript-map": "0.0.7",

src/app/app.module.ts

@@ -64,6 +64,11 @@ import { MatDialogModule } from '@angular/material/dialog';
 import {TagCloudModule} from 'angular-tag-cloud-module';
 import {SpacyService} from './services/http/spacy.service';
 
+import 'prismjs';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
+import 'prismjs/plugins/line-highlight/prism-line-highlight.js';
+import 'katex/dist/katex.min.js';
+import 'emoji-toolkit/lib/js/joypixels.min.js';
 
 export function dialogClose(dialogResult: any) {
 }

src/app/components/shared/comment/comment.component.html

@@ -236,7 +236,7 @@
            tabindex="0">
         <ars-row #commentBody>
           <ars-row #commentBodyInner>
-            <markdown class="images"
+            <markdown class="images" katex emoji lineNumbers lineHighlight
                       [data]="comment.body"></markdown>
           </ars-row>
         </ars-row>
@@ -327,7 +327,7 @@
           &nbsp;{{ 'comment-page.keywords' | translate }}
         </span>
         <mat-menu #keywordsMenu>
-        
+
           <mat-list dense class="keywords-list">
             <mat-list-item  *ngFor="let keyword of comment.keywords; let odd = odd; let even = even"
                             [class.keywords-alternate]="odd"

src/styles.scss

@@ -2,6 +2,11 @@
 @import 'theme/dark-theme/dark-theme';
 @import 'theme/blue-theme/blue-theme';
 @import 'theme/purple-theme/purple-theme';
+
+@import '~katex/dist/katex.min.css';
+@import '~prismjs/plugins/line-numbers/prism-line-numbers.css';
+@import '~prismjs/plugins/line-highlight/prism-line-highlight.css';
+
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only