add color in result

package-lock.json

@@ -21,6 +21,7 @@
         "@emailjs/browser": "^3.11.0",
         "@ngx-translate/core": "^15.0.0",
         "@ngx-translate/http-loader": "^8.0.0",
+        "ansi-to-html": "^0.7.2",
         "codemirror": "^5.65.16",
         "rxjs": "~7.8.1",
         "sse.js": "^2.2.0",
@@ -3799,6 +3800,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "dependencies": {
+        "entities": "^2.2.0"
+      },
+      "bin": {
+        "ansi-to-html": "bin/ansi-to-html"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/ansi-to-html/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -6343,9 +6366,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
+      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true,
       "funding": [
         {

package.json

@@ -23,6 +23,7 @@
     "@emailjs/browser": "^3.11.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
+    "ansi-to-html": "^0.7.2",
     "codemirror": "^5.65.16",
     "rxjs": "~7.8.1",
     "sse.js": "^2.2.0",

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { TranslationService } from './services/translation.service';
+import { SafeHTMLPipe } from './safe-html.pipe';
 
 @NgModule({
   declarations: [
@@ -37,8 +38,8 @@ import { TranslationService } from './services/translation.service';
     FormComponent,
     PrivacyPolicyComponent,
     TermsOfServiceComponent,
-    OurStoryComponent
+    OurStoryComponent,
-
+    SafeHTMLPipe
   ],
   imports: [
     BrowserModule,
@@ -59,7 +60,8 @@ import { TranslationService } from './services/translation.service';
         deps: [HttpClient]
       },
       defaultLanguage: 'fr'
-    })
+    }),
+    //SafeHTMLPipe
   ],
   providers: [TranslationService],
   bootstrap: [AppComponent]

src/app/components/editor/editor.component.html

@@ -14,20 +14,7 @@
     </ngx-codemirror>
   </div>
 
-  <div>
+  <pre [innerHTML]="resultContent | safeHTML"></pre>
-    <ngx-codemirror
-      [options]="{
-        theme: 'material',
-        lineNumbers: false,
-        lineWrapping: false,
-        mode: mode,
-        autofocus: true,
-        readOnly: true
-      }"
-      [(ngModel)]="resultContent"  
-    >
-    </ngx-codemirror>
-  </div>
 
   <div>
     <label for="language">Langage de programmation</label>

src/app/components/editor/editor.component.ts

@@ -3,6 +3,8 @@ import { Router } from "@angular/router";
 import { CodeExecutionService } from "src/app/services/codeExecution.service";
 import "codemirror/mode/shell/shell.js";
 import "codemirror/mode/clike/clike.js";
+import Convert from 'ansi-to-html';
+
 
 // Exemple de code pour chaque langage autorisé
 const codeDefaults = {
@@ -30,7 +32,7 @@ int main() {
    return 0;
 }`,
   "text/x-sh": `#!/bin/bash
-echo "Bonjour ceci est un test de code en shell"`,
+echo "Bonjour ceci est un test de code en shell"style`,
 };
 
 // Langages autorisés
@@ -68,10 +70,11 @@ export class EditorComponent implements OnInit {
   ngOnInit(): void {
     // Appel à changeMode pour mettre à jour le contenu de l'éditeur et le mode
     this.changeMode();
+    const convert = new Convert();
 
     this.codeExecutionService.getResult().subscribe((result) => {
       if (result.type !== 'exit') {
-        this.resultContent += result.text;
+        this.resultContent += convert.toHtml(result.text);
       }
     });
   }

src/app/safe-html.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SafeHTMLPipe } from './safe-html.pipe';
+
+describe('SafeHTMLPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafeHTMLPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/safe-html.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHTML',
+})
+export class SafeHTMLPipe implements PipeTransform {
+
+  constructor(protected sanitizer: DomSanitizer) {}
+
+  transform(value: unknown, ...args: unknown[]): unknown {
+    return this.sanitizer.bypassSecurityTrustHtml(value as string);
+  }
+
+}

tsconfig.json

@@ -19,6 +19,7 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
+    "allowSyntheticDefaultImports": true,
     "lib": [
       "ES2022",
       "dom"