Use modelist to automagically select correct code highlight

src/app/webide/webide.component.ts

@@ -1,11 +1,15 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 
+import * as brace from 'brace';
+import 'brace/ext/modelist';
 import 'brace/mode/python';
 import 'brace/mode/javascript';
 import 'brace/theme/monokai';
 import { SourceCode } from './source-code';
 import { WebSocketService } from '../websocket.service';
 
+const modelist = brace.acequire('ace/ext/modelist');
+
 const defaultSourceCode = `alert( 'Hello, world!' );`;
 
 @Component({
@@ -29,7 +33,7 @@ export class WebideComponent implements OnInit {
     this.webSocketService.observeAnchor<SourceCode>(this.anchor_id).subscribe((event) => {
       this.filename = event.data.filename;
       this.code = event.data.content;
-      this.language = event.data.language;
+      this.language = modelist.getModeForPath(this.filename).name;
       this.files = event.data.files;
 
       if (event.data.command === 'write') { this.saveButtonState = 'SAVED'; }