markdown messages

angular.json

@@ -33,9 +33,14 @@
             ],
             "styles": [
               "node_modules/ngx-toastr/toastr.css",
+              "node_modules/prismjs/themes/prism-okaidia.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/prismjs/prism.js",
+              "node_modules/prismjs/components/prism-csharp.min.js",
+              "node_modules/prismjs/components/prism-css.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -133,4 +138,4 @@
       "typeSeparator": "."
     }
   }
-}
+}

package.json

@@ -20,7 +20,9 @@
     "@angular/platform-browser": "^20.0.2",
     "@angular/platform-browser-dynamic": "^20.0.2",
     "@angular/router": "^20.0.2",
+    "ngx-markdown": "^20.0.0",
     "ngx-toastr": "^19.0.0",
+    "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -38,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.8.3"
   }
-}
+}

src/app/app.config.ts

@@ -5,6 +5,7 @@ import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 import { provideToastr } from 'ngx-toastr';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideMarkdown } from 'ngx-markdown';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -17,5 +18,6 @@ export const appConfig: ApplicationConfig = {
       positionClass: 'toast-top-right',
       closeButton: true
     }),
+    provideMarkdown()
   ]
 };

src/app/chat/chat.module.ts

@@ -18,6 +18,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MarkdownModule } from 'ngx-markdown'
 
 @NgModule({
   declarations: [
@@ -41,7 +42,8 @@ import { MatSidenavModule } from '@angular/material/sidenav';
     MatInputModule,
     ReactiveFormsModule,
     MatSidenavModule,
-    DatePipe
+    DatePipe,
+    MarkdownModule
   ]
 })
 export class ChatModule { }

src/app/chat/chat/feed/message/message.component.html

@@ -9,7 +9,7 @@
       <span class="time">{{ this.message.time | date: GetMessageDateFormat() }}</span>
     </div>
 
-    <div class="message-content">{{this.message.content}}</div>
+    <markdown class="message-content" [data]="this.message.content"></markdown>
 
   </div>
 

src/app/chat/chat/feed/message/message.component.scss

@@ -30,6 +30,7 @@ app-profile-picture {
 
     .message-content {
       height: fit-content;
+      margin-right: 15px;
     }
   }
 }