diff --git a/.angular-cli.json b/.angular-cli.json
index 04249d9b1e..175a0e9bfa 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -31,11 +31,17 @@
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/ace-builds/src-min-noconflict/ace.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-yaml.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-json.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-dockerfile.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-text.js",
+        "../node_modules/ace-builds/src-min-noconflict/theme-idle_fingers.js",
+        "../node_modules/ace-builds/src-min-noconflict/ext-searchbox.js",
         "../node_modules/bootstrap/dist/js/bootstrap.js",
         "../node_modules/datatables.net/js/jquery.dataTables.js",
         "../node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
         "../node_modules/jquery-colorbox/jquery.colorbox.js",
-        "../node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js",
         "../node_modules/cytoscape/dist/cytoscape.js",
         "../node_modules/dagre/dist/dagre.min.js",
         "../node_modules/cytoscape-dagre/cytoscape-dagre.js",
@@ -77,7 +83,7 @@
       "config": "./karma.conf.js"
     },
     "codeCoverage": {
-      "exclude": ["src/app/shared/swagger/**", "src/app/shared/angular2-highlight-js/lib/**", "src/app/test/**"]
+      "exclude": ["src/app/shared/swagger/**", "src/app/test/**"]
     }
   },
   "defaults": {
diff --git a/.gitignore b/.gitignore
index c528a74fa7..3beda4dd5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@
 /tmp
 /out-tsc
 /src/app/**/*.js
-!/src/app/shared/angular2-highlight-js/lib/*.js
+!/src/app/shared/grammars/*.js
 src/app/shared/swagger/
 swagger-codegen-cli.jar
 
diff --git a/cypress/integration/toolDetails.js b/cypress/integration/toolDetails.js
index 69ac0f3364..fcbde66c2c 100644
--- a/cypress/integration/toolDetails.js
+++ b/cypress/integration/toolDetails.js
@@ -78,7 +78,7 @@ describe('Dockstore Tool Details of quay.io/A2/a', function() {
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -94,7 +94,7 @@ describe('Dockstore Tool Details of quay.io/A2/a', function() {
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -110,7 +110,7 @@ describe('Dockstore Tool Details of quay.io/A2/a', function() {
 
             it('Should not have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("not.be.visible")
                 cy
                     .contains('A Test Parameter File associated with this Docker container, descriptor type and version could not be found.')
@@ -148,7 +148,7 @@ describe('Dockstore Tool Details of quay.io/garyluu/dockstore-cgpmap/cgpmap-cram
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -164,7 +164,7 @@ describe('Dockstore Tool Details of quay.io/garyluu/dockstore-cgpmap/cgpmap-cram
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -180,7 +180,7 @@ describe('Dockstore Tool Details of quay.io/garyluu/dockstore-cgpmap/cgpmap-cram
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
diff --git a/cypress/integration/workflowDetails.js b/cypress/integration/workflowDetails.js
index 0e7ed4fa26..b2cb465aa0 100644
--- a/cypress/integration/workflowDetails.js
+++ b/cypress/integration/workflowDetails.js
@@ -79,7 +79,7 @@ describe('Dockstore Workflow Details', function() {
 
     it('Should have content in file viewer', function() {
       cy
-      .get(".hljs.yaml")
+      .get(".ace_content")
       .should("be.visible")
     });
 
@@ -94,7 +94,7 @@ describe('Dockstore Workflow Details', function() {
 
           it('Should not have content in file viewer', function() {
             cy
-              .get(".hljs.yaml")
+              .get(".ace_content")
                 .children()
                 .should("not.be.visible")
           });
diff --git a/karma.conf.js b/karma.conf.js
index af139fada3..067098965e 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -10,6 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
+      require('karma-spec-reporter'),
       require('@angular/cli/plugins/karma')
     ],
     client:{
@@ -22,7 +23,7 @@ module.exports = function (config) {
     angularCli: {
       environment: 'dev'
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['kjhtml', 'spec'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
diff --git a/package-lock.json b/package-lock.json
index 6f15578f61..ecb5f97656 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -544,6 +544,11 @@
         }
       }
     },
+    "ace-builds": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.3.3.tgz",
+      "integrity": "sha512-PbSdoHw42kt5vaXkEVSfUYCd3K1BCfAvyXW9TvR/2ATkk65oImjS1v0evHmzHhOYPSTUO8BprvmpfYT9Vp2akA=="
+    },
     "acorn": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
@@ -4964,11 +4969,6 @@
       "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
       "integrity": "sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw="
     },
-    "highlightjs-line-numbers.js": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/highlightjs-line-numbers.js/-/highlightjs-line-numbers.js-2.0.0.tgz",
-      "integrity": "sha1-HdDzZ2Pgw+t7NhDhkOGdmysYWeM="
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6128,6 +6128,15 @@
         "source-map-support": "0.4.18"
       }
     },
+    "karma-spec-reporter": {
+      "version": "0.0.32",
+      "resolved": "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.32.tgz",
+      "integrity": "sha1-LpxyB+pyZ3EmAln4K+y1QyCeRAo=",
+      "dev": true,
+      "requires": {
+        "colors": "1.1.2"
+      }
+    },
     "killable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",
diff --git a/package.json b/package.json
index 6b81a3f4ca..1064dd143e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@types/elastic.js": "^1.2.8",
     "@types/elasticsearch": "^5.0.14",
     "@types/node": "^6.0.60",
+    "ace-builds": "^1.3.3",
     "angular-datatables": "^5.0.0",
     "angular-tag-cloud-module": "^2.4.0",
     "angular2-markdown": "^2.2.3",
@@ -50,7 +51,6 @@
     "datatables.net-dt": "^1.10.15",
     "elasticsearch": "^13.0.0",
     "font-awesome": "^4.7.0",
-    "highlightjs-line-numbers.js": "^2.0.0",
     "jquery": "^3.2.1",
     "jquery-colorbox": "^1.6.4",
     "ng2-ui-auth": "^6.2.0",
@@ -76,6 +76,7 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-spec-reporter": "0.0.32",
     "protractor": "~5.1.2",
     "tslint": "~5.7.0"
   }
diff --git a/src/app/container/descriptors/descriptors.component.html b/src/app/container/descriptors/descriptors.component.html
index 346031c736..0685e43c5f 100644
--- a/src/app/container/descriptors/descriptors.component.html
+++ b/src/app/container/descriptors/descriptors.component.html
@@ -33,16 +33,17 @@
     </alert>
   </div>
 
-  <div *ngIf="content" class="code-copy">
-    <div class="code-copy-button btn-group">
+  <div *ngIf="content && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group">
       <a *ngIf="(published$ | async)" download [href]="descriptorPath" class="btn btn-default" type="button" title="{{filePath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" [ngClass]="{'btn-copy':toolCopyBtn === 'descriptors_file'}"
-              (cbOnSuccess)="toolCopyBtnClick('descriptors_file')" title="Copy to clipboard">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" title="Copy to clipboard">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section [innerHTML]="fileService.highlightCode(content)"></section>
+    <div [hidden]="!content || !_selectedVersion?.valid">
+      <app-code-editor [(content)]="content" [filepath]="filePath"></app-code-editor>
+    </div>
   </div>
 </div>
diff --git a/src/app/container/descriptors/descriptors.component.spec.ts b/src/app/container/descriptors/descriptors.component.spec.ts
index eeefda2b58..1581cfa114 100644
--- a/src/app/container/descriptors/descriptors.component.spec.ts
+++ b/src/app/container/descriptors/descriptors.component.spec.ts
@@ -19,7 +19,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
 
 import { ContainersStubService, ContainerStubService } from '../../../../src/app/test/service-stubs';
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ContainersService } from '../../shared/swagger';
 import { ContainerService } from './../../shared/container.service';
 import { FileService } from './../../shared/file.service';
@@ -44,7 +43,6 @@ describe('DescriptorsComponent', () => {
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         { provide: ToolDescriptorService, useClass: DescriptorsStubService },
-        { provide: HighlightJsService, useClass: HighlightJsService },
         { provide: ContainersService, useClass: ContainersStubService },
         { provide: ContainerService, useClass: ContainerStubService },
         { provide: FileService, useClass: FileStubService }]
diff --git a/src/app/container/descriptors/descriptors.component.ts b/src/app/container/descriptors/descriptors.component.ts
index fddbf94fac..d8bdd6678a 100644
--- a/src/app/container/descriptors/descriptors.component.ts
+++ b/src/app/container/descriptors/descriptors.component.ts
@@ -13,10 +13,9 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { AfterViewChecked, Component, ElementRef, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ContainerService } from '../../shared/container.service';
 import { FileService } from '../../shared/file.service';
 import { EntryFileSelector } from '../../shared/selectors/entry-file-selector';
@@ -30,7 +29,7 @@ import { ToolDescriptorService } from './tool-descriptor.service';
   providers: [ToolDescriptorService]
 })
 
-export class DescriptorsComponent extends EntryFileSelector implements AfterViewChecked {
+export class DescriptorsComponent extends EntryFileSelector {
 
   @Input() id: number;
   @Input() entrypath: string;
@@ -42,10 +41,8 @@ export class DescriptorsComponent extends EntryFileSelector implements AfterView
   public descriptorPath: string;
   public filePath: string;
   constructor(private containerService: ContainerService,
-              private highlightJsService: HighlightJsService,
               private descriptorsService: ToolDescriptorService,
-              public fileService: FileService,
-              private elementRef: ElementRef) {
+              public fileService: FileService) {
     super();
     this.published$ = this.containerService.toolIsPublished$;
   }
@@ -60,18 +57,10 @@ export class DescriptorsComponent extends EntryFileSelector implements AfterView
 
   reactToFile(): void {
     this.content = this.currentFile.content;
-    this.contentHighlighted = true;
     this.descriptorPath = this.getDescriptorPath(this.currentDescriptor);
     this.filePath = this.getFilePath(this.currentFile);
   }
 
-  ngAfterViewChecked() {
-    if (this.contentHighlighted && !this.nullDescriptors) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
-  }
-
   private getDescriptorPath(descType): string {
     return this.fileService.getDescriptorPath(this.entrypath, this._selectedVersion, this.currentFile, this.currentDescriptor, 'tool');
   }
diff --git a/src/app/container/dockerfile/dockerfile.component.html b/src/app/container/dockerfile/dockerfile.component.html
index 02ca09d99e..6f4568bf7d 100644
--- a/src/app/container/dockerfile/dockerfile.component.html
+++ b/src/app/container/dockerfile/dockerfile.component.html
@@ -21,16 +21,17 @@
       &nbsp;A Dockerfile associated with this Docker container could not be found.
     </alert>
   </div>
-  <div *ngIf="!nullContent && _selectedVersion?.valid" class="code-copy">
-    <div class="code-copy-button btn-group">
+  <div *ngIf="!nullContent && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group" role="group">
       <a *ngIf="(published$ | async)" download="{{filepath}}" [href]="containerFilePath" class="btn btn-default" type="button" title="{{filepath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" [ngClass]="{'btn-copy':toolCopyBtn === 'dockerfile'}"
-              (cbOnSuccess)="toolCopyBtnClick('dockerfile')" title="Copy to clipboard">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" title="Copy to clipboard">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section [innerHTML]="fileService.highlightCode(content)"></section>
+  </div>
+  <div [hidden]="!content || !_selectedVersion?.valid">
+    <app-code-editor [(content)]="content" [filepath]="filepath"></app-code-editor>
   </div>
 </div>
diff --git a/src/app/container/dockerfile/dockerfile.component.spec.ts b/src/app/container/dockerfile/dockerfile.component.spec.ts
index a285e9a5a8..34dbe3e7eb 100644
--- a/src/app/container/dockerfile/dockerfile.component.spec.ts
+++ b/src/app/container/dockerfile/dockerfile.component.spec.ts
@@ -21,7 +21,6 @@ import { FileService } from './../../shared/file.service';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { DockerfileComponent } from './dockerfile.component';
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 class DockerFileStubService { }
 
 describe('DockerfileComponent', () => {
@@ -32,7 +31,7 @@ describe('DockerfileComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ DockerfileComponent ],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [HighlightJsService,
+      providers: [
         { provide: FileService, useClass: FileStubService },
         { provide: ContainerService, useClass: ContainerStubService },
         { provide: ContainersService, useClass: ContainersStubService}
diff --git a/src/app/container/dockerfile/dockerfile.component.ts b/src/app/container/dockerfile/dockerfile.component.ts
index 0d4ffb32c7..b65452d7a7 100644
--- a/src/app/container/dockerfile/dockerfile.component.ts
+++ b/src/app/container/dockerfile/dockerfile.component.ts
@@ -13,10 +13,9 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { AfterViewChecked, Component, ElementRef, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ContainerService } from '../../shared/container.service';
 import { Dockstore } from '../../shared/dockstore.model';
 import { FileService } from '../../shared/file.service';
@@ -28,7 +27,7 @@ import { ga4ghPath } from './../../shared/constants';
   selector: 'app-dockerfile',
   templateUrl: './dockerfile.component.html',
 })
-export class DockerfileComponent implements AfterViewChecked {
+export class DockerfileComponent {
 
   @Input() id: number;
   @Input() entrypath: string;
@@ -40,12 +39,9 @@ export class DockerfileComponent implements AfterViewChecked {
   content: string;
   filepath: string;
   nullContent: boolean;
-  contentHighlighted: boolean;
   public published$: Observable<boolean>;
   public containerFilePath: string;
-  constructor(private highlightJsService: HighlightJsService,
-              public fileService: FileService,
-              private elementRef: ElementRef,
+  constructor(public fileService: FileService,
               private containerService: ContainerService, private containersService: ContainersService) {
     this.nullContent = false;
     this.filepath = '/Dockerfile';
@@ -58,7 +54,6 @@ export class DockerfileComponent implements AfterViewChecked {
       this.containersService.dockerfile(this.id, this._selectedVersion.name).first()
         .subscribe(file => {
             this.content = file.content;
-            this.contentHighlighted = true;
             this.filepath = file.path;
             this.containerFilePath = this.getContainerfilePath();
           }, error => {
@@ -71,12 +66,6 @@ export class DockerfileComponent implements AfterViewChecked {
       this.content = null;
     }
   }
-  ngAfterViewChecked() {
-    if (this.contentHighlighted && !this.nullContent && this.elementRef.nativeElement.querySelector('.highlight')) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
-  }
 
   private getContainerfilePath(): string {
     const basepath = Dockstore.API_URI + ga4ghPath + '/tools/';
diff --git a/src/app/container/paramfiles/paramfiles.component.html b/src/app/container/paramfiles/paramfiles.component.html
index 422da3c34f..6f2794ff6f 100644
--- a/src/app/container/paramfiles/paramfiles.component.html
+++ b/src/app/container/paramfiles/paramfiles.component.html
@@ -32,16 +32,17 @@
       &nbsp;A Test Parameter File associated with this Docker container, descriptor type and version could not be found.
     </alert>
   </div>
-  <div *ngIf="content && _selectedVersion?.valid" class="code-copy">
-    <div class="code-copy-button btn-group">
-      <a href id="downloadLinkParams" (click)="downloadFile(currentFile, 'downloadLinkParams')" class="btn btn-default" type="button" title="{{getFilePath(currentFile)}}">
+  <div *ngIf="content && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group">
+      <a href id="downloadLinkParams" (click)="downloadFile(currentFile, 'downloadLinkParams')" class="btn btn-default" type="button" title="{{filePath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" [ngClass]="{'btn-copy':toolCopyBtn === 'test_param_file'}"
-              (cbOnSuccess)="toolCopyBtnClick('test_param_file')" title="Copy to clipboard">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" title="Copy to clipboard">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section [innerHTML]="fileService.highlightCode(content)"></section>
+  </div>
+  <div [hidden]="!content || !_selectedVersion?.valid">
+    <app-code-editor [(content)]="content" [filepath]="filePath"></app-code-editor>
   </div>
 </div>
diff --git a/src/app/container/paramfiles/paramfiles.component.ts b/src/app/container/paramfiles/paramfiles.component.ts
index 48ad9d753b..0ce4279f4a 100644
--- a/src/app/container/paramfiles/paramfiles.component.ts
+++ b/src/app/container/paramfiles/paramfiles.component.ts
@@ -15,11 +15,9 @@
  */
 
 import { ContainersService } from '../../shared/swagger';
-import { Component, Input, ElementRef, OnInit, AfterViewChecked} from '@angular/core';
+import { Component, Input, OnInit} from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
-
 import { ContainerService } from '../../shared/container.service';
 import { ParamfilesService } from './paramfiles.service';
 import { EntryFileSelector } from '../../shared/selectors/entry-file-selector';
@@ -32,7 +30,7 @@ import { Tag } from '../../shared/swagger/model/tag';
   templateUrl: './paramfiles.component.html'
 })
 
-export class ParamfilesComponent extends EntryFileSelector implements AfterViewChecked {
+export class ParamfilesComponent extends EntryFileSelector {
 
   @Input() id: number;
   @Input() entrypath: string;
@@ -40,12 +38,11 @@ export class ParamfilesComponent extends EntryFileSelector implements AfterViewC
     this.clearContent();
     this.onVersionChange(value);
   }
+  public filePath: string;
 
   constructor(private containerService: ContainerService, private containersService: ContainersService,
-              private highlightJsService: HighlightJsService,
               private paramfilesService: ParamfilesService,
-              public fileService: FileService,
-              private elementRef: ElementRef) {
+              public fileService: FileService) {
     super();
   }
   getDescriptors(version): Array<any> {
@@ -58,14 +55,7 @@ export class ParamfilesComponent extends EntryFileSelector implements AfterViewC
 
   reactToFile(): void {
     this.content = this.currentFile.content;
-    this.contentHighlighted = true;
-  }
-
-  ngAfterViewChecked() {
-    if (this.contentHighlighted && this.elementRef.nativeElement.querySelector('.highlight')) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
+    this.filePath = this.getFilePath(this.currentFile);
   }
 
   // Downloads a file
diff --git a/src/app/containers/containers.module.ts b/src/app/containers/containers.module.ts
index 6c31a47910..d0d782ea36 100644
--- a/src/app/containers/containers.module.ts
+++ b/src/app/containers/containers.module.ts
@@ -18,7 +18,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DataTablesModule } from 'angular-datatables';
-import { HighlightJsModule, HighlightJsService } from '../shared/angular2-highlight-js/lib/highlight-js.module';
 import { MarkdownModule } from 'angular2-markdown';
 
 import { ContainersComponent } from './containers.component';
@@ -39,15 +38,11 @@ import { ModalModule} from 'ngx-bootstrap/modal';
     CommonModule,
     MarkdownModule.forRoot(),
     DataTablesModule.forRoot(),
-    HighlightJsModule,
     HeaderModule,
     SelectModule,
     ListContainersModule,
     ContainerModule,
     containersRouting
-  ],
-  providers: [
-    HighlightJsService
   ]
 })
 export class ContainersModule {
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.d.ts b/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.d.ts
deleted file mode 100644
index e513f5a20e..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- *    Copyright 2017 OICR
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import { ElementRef, OnInit, AfterViewChecked, NgZone } from '@angular/core';
-export declare class HighlightJsContentDirective implements OnInit, AfterViewChecked {
-    private elementRef;
-    private zone;
-    useBr: boolean;
-    highlightSelector: string;
-    constructor(elementRef: ElementRef, zone: NgZone);
-    ngOnInit(): void;
-    ngAfterViewChecked(): void;
-}
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.js b/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.js
deleted file mode 100644
index 1825c2cab4..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- *    Copyright 2017 OICR
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@angular/core");
-var HighlightJsContentDirective = (function () {
-    function HighlightJsContentDirective(elementRef, zone) {
-        this.elementRef = elementRef;
-        this.zone = zone;
-    }
-    HighlightJsContentDirective.prototype.ngOnInit = function () {
-        if (this.useBr) {
-            hljs.configure({ useBR: true });
-        }
-    };
-    HighlightJsContentDirective.prototype.ngAfterViewChecked = function () {
-        var selector = this.highlightSelector || 'code';
-        if (this.elementRef.nativeElement.innerHTML && this.elementRef.nativeElement.querySelector) {
-            var snippets_1 = this.elementRef.nativeElement.querySelectorAll(selector);
-            this.zone.runOutsideAngular(function () {
-                for (var _i = 0, snippets_2 = snippets_1; _i < snippets_2.length; _i++) {
-                    var snippet = snippets_2[_i];
-                    hljs.highlightBlock(snippet);
-                }
-            });
-        }
-    };
-    return HighlightJsContentDirective;
-}());
-HighlightJsContentDirective.decorators = [
-    { type: core_1.Directive, args: [{
-                selector: '[highlight-js-content]'
-            },] },
-];
-/** @nocollapse */
-HighlightJsContentDirective.ctorParameters = function () { return [
-    { type: core_1.ElementRef, },
-    { type: core_1.NgZone, },
-]; };
-HighlightJsContentDirective.propDecorators = {
-    'useBr': [{ type: core_1.Input },],
-    'highlightSelector': [{ type: core_1.Input, args: ['highlight-js-content',] },],
-};
-exports.HighlightJsContentDirective = HighlightJsContentDirective;
-//# sourceMappingURL=highlight-js-content.directive.js.map
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.js.map b/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.js.map
deleted file mode 100644
index 6d24d2eb07..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["highlight-js-content.directive.d.ts"],"names":[],"mappings":";;AAAA,sCAA+F;AAM/F;IAII,qCAAoB,UAAsB,EAAU,IAAY;QAA5C,eAAU,GAAV,UAAU,CAAY;QAAU,SAAI,GAAJ,IAAI,CAAQ;IAEhE,CAAC;IAED,8CAAQ,GAAR;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACpC,CAAC;IACL,CAAC;IAED,wDAAkB,GAAlB;QACI,IAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,IAAI,MAAM,CAAC;QAElD,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;YACzF,IAAM,UAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC1E,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;gBACxB,GAAG,CAAC,CAAkB,UAAQ,EAAR,uBAAQ,EAAR,sBAAQ,EAAR,IAAQ;oBAAzB,IAAM,OAAO,iBAAA;oBACd,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;iBAChC;YACL,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAeL,kCAAC;AAAD,CAxCA,AAwCC;AAdM,sCAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACtB,QAAQ,EAAE,wBAAwB;aACrC,EAAG,EAAE;CACL,CAAC;AACF,kBAAkB;AACX,0CAAc,GAAmE,cAAM,OAAA;IAC9F,EAAC,IAAI,EAAE,iBAAU,GAAG;IACpB,EAAC,IAAI,EAAE,aAAM,GAAG;CACf,EAH6F,CAG7F,CAAC;AACK,0CAAc,GAA2C;IAChE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,YAAK,EAAE,EAAE;IAC3B,mBAAmB,EAAE,CAAC,EAAE,IAAI,EAAE,YAAK,EAAE,IAAI,EAAE,CAAC,sBAAsB,EAAG,EAAE,EAAE;CACxE,CAAC;AAvCW,kEAA2B","file":"highlight-js-content.directive.js","sourceRoot":""}
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.metadata.json b/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.metadata.json
deleted file mode 100644
index 6bffe5d163..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js-content.directive.metadata.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"__symbolic":"module","version":3,"metadata":{"HighlightJsContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight-js-content]"}]}],"members":{"useBr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["highlight-js-content"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HighlightJsContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight-js-content]"}]}],"members":{"useBr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["highlight-js-content"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.d.ts b/src/app/shared/angular2-highlight-js/lib/highlight-js.module.d.ts
deleted file mode 100644
index a4763072a5..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- *    Copyright 2017 OICR
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-export declare class HighlightJsModule {
-}
-export { HighlightJsService } from './highlight-js.service';
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.js b/src/app/shared/angular2-highlight-js/lib/highlight-js.module.js
deleted file mode 100644
index 3f4d33bee7..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- *    Copyright 2017 OICR
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@angular/core");
-var highlight_js_content_directive_1 = require("./highlight-js-content.directive");
-var HighlightJsModule = (function () {
-    function HighlightJsModule() {
-    }
-    return HighlightJsModule;
-}());
-HighlightJsModule.decorators = [
-    { type: core_1.NgModule, args: [{
-                imports: [],
-                providers: [],
-                declarations: [
-                    highlight_js_content_directive_1.HighlightJsContentDirective
-                ],
-                exports: [
-                    highlight_js_content_directive_1.HighlightJsContentDirective
-                ]
-            },] },
-];
-/** @nocollapse */
-HighlightJsModule.ctorParameters = function () { return []; };
-exports.HighlightJsModule = HighlightJsModule;
-var highlight_js_service_1 = require("./highlight-js.service");
-exports.HighlightJsService = highlight_js_service_1.HighlightJsService;
-//# sourceMappingURL=highlight-js.module.js.map
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.js.map b/src/app/shared/angular2-highlight-js/lib/highlight-js.module.js.map
deleted file mode 100644
index 0f3b6167b8..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["highlight-js.module.d.ts"],"names":[],"mappings":";;AAAA,sCAAyC;AACzC,mFAA+E;AAG/E;IAAA;IAiBA,CAAC;IAAD,wBAAC;AAAD,CAjBA,AAiBC;AAjBuC,4BAAU,GAA0B;IAC5E,EAAE,IAAI,EAAE,eAAQ,EAAE,IAAI,EAAE,CAAC;gBACrB,OAAO,EAAE,EACR;gBACD,SAAS,EAAE,EACV;gBACD,YAAY,EAAE;oBACV,4DAA2B;iBAC9B;gBACD,OAAO,EAAE;oBACL,4DAA2B;iBAC9B;aACJ,EAAG,EAAE;CACL,CAAC;AACF,kBAAkB;AACX,gCAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AAhBW,8CAAiB;AAmB9B,+DAN4D;AAAnD,oDAAA,kBAAA,CAAA","file":"highlight-js.module.js","sourceRoot":""}
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.metadata.json b/src/app/shared/angular2-highlight-js/lib/highlight-js.module.metadata.json
deleted file mode 100644
index 38211d5018..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.module.metadata.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"__symbolic":"module","version":3,"metadata":{"HighlightJsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[],"providers":[],"declarations":[{"__symbolic":"reference","module":"./highlight-js-content.directive","name":"HighlightJsContentDirective"}],"exports":[{"__symbolic":"reference","module":"./highlight-js-content.directive","name":"HighlightJsContentDirective"}]}]}]}},"exports":[{"from":"./highlight-js.service","export":["HighlightJsService"]}]},{"__symbolic":"module","version":1,"metadata":{"HighlightJsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[],"providers":[],"declarations":[{"__symbolic":"reference","module":"./highlight-js-content.directive","name":"HighlightJsContentDirective"}],"exports":[{"__symbolic":"reference","module":"./highlight-js-content.directive","name":"HighlightJsContentDirective"}]}]}]}},"exports":[{"from":"./highlight-js.service","export":["HighlightJsService"]}]}]
\ No newline at end of file
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.d.ts b/src/app/shared/angular2-highlight-js/lib/highlight-js.service.d.ts
deleted file mode 100644
index f04cca5a5c..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- *    Copyright 2017 OICR
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-export declare class HighlightJsService {
-    constructor();
-    highlight(codeBlock: any, useBr?: boolean): void;
-}
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.js b/src/app/shared/angular2-highlight-js/lib/highlight-js.service.js
deleted file mode 100644
index 2fb96b91e9..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- *    Copyright 2017 OICR
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@angular/core");
-var HighlightJsService = (function () {
-    function HighlightJsService() {
-    }
-    HighlightJsService.prototype.highlight = function (codeBlock, useBr) {
-        if (useBr) {
-            hljs.configure({ useBR: true });
-        }
-        hljs.highlightBlock(codeBlock);
-        hljs.lineNumbersBlock(codeBlock);
-    };
-    return HighlightJsService;
-}());
-HighlightJsService.decorators = [
-    { type: core_1.Injectable },
-];
-/** @nocollapse */
-HighlightJsService.ctorParameters = function () { return []; };
-exports.HighlightJsService = HighlightJsService;
-//# sourceMappingURL=highlight-js.service.js.map
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.js.map b/src/app/shared/angular2-highlight-js/lib/highlight-js.service.js.map
deleted file mode 100644
index 359df5edc4..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["highlight-js.service.d.ts"],"names":[],"mappings":";;AAAA,sCAAuD;AAKvD;IAEI;IAAgB,CAAC;IAEjB,sCAAS,GAAT,UAAU,SAAc,EAAE,KAAe;QACrC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YACR,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,CAAC;IAOL,yBAAC;AAAD,CAjBA,AAiBC;AANM,6BAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,iBAAU,EAAE;CACnB,CAAC;AACF,kBAAkB;AACX,iCAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AAhBW,gDAAkB","file":"highlight-js.service.js","sourceRoot":""}
diff --git a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.metadata.json b/src/app/shared/angular2-highlight-js/lib/highlight-js.service.metadata.json
deleted file mode 100644
index 26e7b230c7..0000000000
--- a/src/app/shared/angular2-highlight-js/lib/highlight-js.service.metadata.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"__symbolic":"module","version":3,"metadata":{"HighlightJsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"highlight":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HighlightJsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"highlight":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
diff --git a/src/app/shared/angular2-highlight-js/license.md b/src/app/shared/angular2-highlight-js/license.md
deleted file mode 100644
index 608228fd95..0000000000
--- a/src/app/shared/angular2-highlight-js/license.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 Useful Software Solutions Ltd
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/src/app/shared/angular2-highlight-js/package.json b/src/app/shared/angular2-highlight-js/package.json
deleted file mode 100644
index 79cc12ce28..0000000000
--- a/src/app/shared/angular2-highlight-js/package.json
+++ /dev/null
@@ -1,144 +0,0 @@
-{
-  "_args": [
-    [
-      {
-        "raw": "angular2-highlight-js@^5.0.1",
-        "scope": null,
-        "escapedName": "angular2-highlight-js",
-        "name": "angular2-highlight-js",
-        "rawSpec": "^5.0.1",
-        "spec": ">=5.0.1 <6.0.0",
-        "type": "range"
-      },
-      "/home/j2wu/dockstore-ui2"
-    ]
-  ],
-  "_from": "angular2-highlight-js@>=5.0.1 <6.0.0",
-  "_id": "angular2-highlight-js@5.0.1",
-  "_inCache": true,
-  "_location": "/angular2-highlight-js",
-  "_nodeVersion": "6.10.3",
-  "_npmOperationalInternal": {
-    "host": "s3://npm-registry-packages",
-    "tmp": "tmp/angular2-highlight-js-5.0.1.tgz_1496898816539_0.9529801176395267"
-  },
-  "_npmUser": {
-    "name": "jaychase",
-    "email": "jonathanchase@outlook.com"
-  },
-  "_npmVersion": "5.0.0",
-  "_phantomChildren": {},
-  "_requested": {
-    "raw": "angular2-highlight-js@^5.0.1",
-    "scope": null,
-    "escapedName": "angular2-highlight-js",
-    "name": "angular2-highlight-js",
-    "rawSpec": "^5.0.1",
-    "spec": ">=5.0.1 <6.0.0",
-    "type": "range"
-  },
-  "_requiredBy": [
-    "/"
-  ],
-  "_resolved": "https://registry.npmjs.org/angular2-highlight-js/-/angular2-highlight-js-5.0.1.tgz",
-  "_shasum": "98942629de99b54c98d217f8a3fd1d6633c97441",
-  "_shrinkwrap": null,
-  "_spec": "angular2-highlight-js@^5.0.1",
-  "_where": "/home/j2wu/dockstore-ui2",
-  "author": {
-    "name": "Jay Chase",
-    "email": "JonathanChase@outlook.com",
-    "url": "https://www.usefuldev.com/home"
-  },
-  "bugs": {
-    "url": "https://github.com/Useful-Software-Solutions-Ltd/angular2-highlight-js/issues"
-  },
-  "dependencies": {},
-  "description": "highlight.js integration with Angular 2",
-  "devDependencies": {
-    "@angular/animations": "^4.0.1",
-    "@angular/common": "^4.0.1",
-    "@angular/compiler": "^4.0.1",
-    "@angular/compiler-cli": "^4.0.1",
-    "@angular/core": "^4.0.1",
-    "@angular/forms": "^4.0.1",
-    "@angular/http": "^4.0.1",
-    "@angular/material": "^2.0.0-beta.2",
-    "@angular/platform-browser": "^4.0.1",
-    "@angular/platform-browser-dynamic": "^4.0.1",
-    "@angular/router": "^4.0.1",
-    "@types/core-js": "^0.9.41",
-    "@types/jasmine": "^2.5.47",
-    "@types/node": "^7.0.12",
-    "canonical-path": "0.0.2",
-    "codelyzer": "^2.1.1",
-    "concurrently": "^2.0.0",
-    "core-js": "^2.4.1",
-    "jasmine-core": "2.4.1",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "^0.1.2",
-    "karma-htmlfile-reporter": "^0.2.2",
-    "karma-jasmine": "^0.3.8",
-    "karma-verbose-reporter": "0.0.3",
-    "lite-server": "^2.2.0",
-    "lodash": "^4.11.1",
-    "protractor": "^3.3.0",
-    "reflect-metadata": "^0.1.3",
-    "rimraf": "^2.5.2",
-    "rxjs": "^5.1.0",
-    "systemjs": "^0.19.27",
-    "tslint": "~4.5.0",
-    "typescript": "~2.2.0",
-    "zone.js": "^0.8.4"
-  },
-  "directories": {},
-  "dist": {
-    "integrity": "sha512-+MuQahP8Cltf8erZhsmnWiASPq021aYVnVmBOB4Rw23DjZGFaDWjmLbGfk6MI+YJgsWka35v0hi7DZL2xU/X6A==",
-    "shasum": "98942629de99b54c98d217f8a3fd1d6633c97441",
-    "tarball": "https://registry.npmjs.org/angular2-highlight-js/-/angular2-highlight-js-5.0.1.tgz"
-  },
-  "files": [
-    "lib"
-  ],
-  "gitHead": "0d77afb56ced47bbd3c16a656934d8df4bf80f22",
-  "homepage": "https://github.com/Useful-Software-Solutions-Ltd/angular2-highlight-js#readme",
-  "keywords": [
-    "Angular2",
-    "highlight.js",
-    "code snippet",
-    "code formatting"
-  ],
-  "license": "MIT",
-  "main": "./lib/highlight-js.module.js",
-  "maintainers": [
-    {
-      "name": "jaychase",
-      "email": "jonathanchase@outlook.com"
-    }
-  ],
-  "name": "angular2-highlight-js",
-  "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Useful-Software-Solutions-Ltd/angular2-highlight-js.git"
-  },
-  "scripts": {
-    "a2-build": "ngc -p ./tsconfig-ngc.json",
-    "a2-clear-build": "rimraf lib",
-    "code": "tsc && concurrently \"tsc -w\" \"lite-server -c bs-config.js\" \"karma start karma.conf.js\"",
-    "lint": "tslint ./app/**/*.ts -t verbose",
-    "lite": "lite-server -c bs-config.js",
-    "pack": "del lib /Q && xcopy src\\*.d.ts lib\\* /S /Y && xcopy src\\*.js lib\\* /S /Y && xcopy src\\*.css lib\\* /S /Y && xcopy src\\*.html lib\\* /S /Y && xcopy src\\*.map lib\\* /S /Y",
-    "prepublish": "npm run a2-clear-build && npm run a2-build",
-    "setup": "typings install && npm install",
-    "start": "tsc && concurrently \"tsc -w\" \"lite-server -c bs-config.js\"",
-    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "typings": "typings"
-  },
-  "typings": "./lib/highlight-js.module.d.ts",
-  "version": "5.0.1"
-}
diff --git a/src/app/shared/angular2-highlight-js/readme.md b/src/app/shared/angular2-highlight-js/readme.md
deleted file mode 100644
index 3790564bc3..0000000000
--- a/src/app/shared/angular2-highlight-js/readme.md
+++ /dev/null
@@ -1,24 +0,0 @@
-Note:
-In order to use the line number feature plug-in (highlightjs-line-numbers.js), 
-we needed to embed angular2-highlight-js into our local repo. Please note that the file "highlight-js.service.js" has been modified.
-More specifically, lineNumbersBlock was added after highlightBlock.
-#### Original:
-```javascript
-hljs.highlightBlock(codeBlock);
-```
-
-#### Current, which use line number:
-```javascript
-hljs.highlightBlock(codeBlock);
-hljs.lineNumbersBlock(codeBlock);
-```
-We also modified the path in "highlight-js.module.js.map", "highlight-js.service.js.map", and "highlight-js-content.directive.js.map"
-in-order pointing to the correct ts files after moving the library to the local repo.
-
-Importing this Module/Service should be like:
-```javascript
-import { HighlightJsService } from 'PATH/shared/angular2-highlight-js/lib/highlight-js.module';
-```
-
-The current version of this library is 5.0.1.
-
diff --git a/src/app/shared/code-editor/code-editor.component.html b/src/app/shared/code-editor/code-editor.component.html
new file mode 100644
index 0000000000..e72a33d5ba
--- /dev/null
+++ b/src/app/shared/code-editor/code-editor.component.html
@@ -0,0 +1,4 @@
+<div>
+  <div [id]="'aceEditor_' + aceId">
+  </div>
+</div>
diff --git a/src/app/shared/code-editor/code-editor.component.scss b/src/app/shared/code-editor/code-editor.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/code-editor/code-editor.component.spec.ts b/src/app/shared/code-editor/code-editor.component.spec.ts
new file mode 100644
index 0000000000..6d752e3282
--- /dev/null
+++ b/src/app/shared/code-editor/code-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeEditorComponent } from './code-editor.component';
+
+describe('CodeEditorComponent', () => {
+  let component: CodeEditorComponent;
+  let fixture: ComponentFixture<CodeEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CodeEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/code-editor/code-editor.component.ts b/src/app/shared/code-editor/code-editor.component.ts
new file mode 100644
index 0000000000..85d40da390
--- /dev/null
+++ b/src/app/shared/code-editor/code-editor.component.ts
@@ -0,0 +1,80 @@
+import { Component, AfterViewInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { ace } from './../grammars/custom-grammars.js';
+
+@Component({
+  selector: 'app-code-editor',
+  templateUrl: './code-editor.component.html',
+  styleUrls: ['./code-editor.component.scss']
+})
+export class CodeEditorComponent implements AfterViewInit {
+  editorContent: string;
+  editor: any;
+  mode = 'yaml';
+  editorFilepath: string;
+  aceId: string;
+  @Input() set filepath(filepath: string) {
+    if (filepath !== undefined) {
+      this.setMode(filepath);
+      this.editorFilepath = filepath;
+    }
+  }
+
+  @Input() set content(content: string) {
+    this.editorContent = content;
+    if (this.editor !== undefined && content) {
+      this.editor.setValue(this.editorContent, -1);
+    }
+  }
+
+  @ViewChild('aceEditor') aceEditor: ElementRef;
+
+  constructor(private elementRef: ElementRef) {
+    // The purpose of the aceId is to deal with cases where multiple editors exist on a page
+    this.aceId = Math.floor(Math.random() * 100000).toString();
+  }
+
+  ngAfterViewInit() {
+    const aceMode = 'ace/mode/' + this.mode;
+    this.editor = ace.edit('aceEditor_' + this.aceId,
+      {
+        mode: aceMode,
+        readOnly: true,
+        showLineNumbers: true,
+        maxLines: 60,
+        theme: 'ace/theme/idle_fingers',
+        fontSize: '14pt'
+      }
+    );
+
+    // Set content if possible
+    if (this.editorContent) {
+      this.editor.setValue(this.editorContent, -1);
+    }
+  }
+
+  /**
+   * Changes the mode of the editor based on the filepath, fallback is text mode
+   * @param filepath Filepath of file
+   */
+  setMode(filepath: string): void {
+    if (filepath !== undefined && filepath !== null) {
+      if (filepath.endsWith('cwl')) {
+        this.mode = 'cwl';
+      } else if (filepath.endsWith('wdl')) {
+        this.mode = 'wdl';
+      } else if (filepath.includes('Dockerfile')) {
+        this.mode = 'dockerfile';
+      } else if (filepath.endsWith('json')) {
+        this.mode = 'json';
+      } else if (filepath.endsWith('yml') || filepath.endsWith('yaml')) {
+        this.mode = 'yaml';
+      } else {
+        this.mode = 'text';
+      }
+      if (this.editor !== undefined) {
+        this.editor.session.setMode('ace/mode/' + this.mode);
+      }
+    }
+  }
+
+}
diff --git a/src/app/shared/dockstore.service.spec.ts b/src/app/shared/dockstore.service.spec.ts
index 5cb0e1ad12..abe9369a71 100644
--- a/src/app/shared/dockstore.service.spec.ts
+++ b/src/app/shared/dockstore.service.spec.ts
@@ -119,10 +119,6 @@ describe('DockstoreService', () => {
         };
         expect(service.getLabelStrings([label3, label2, label1])).toEqual(['a', 'b', 'c']);
     }));
-    it('should get highlight code', inject([DockstoreService], (service: DockstoreService) => {
-        const code = 'FROM ubuntu:16.04';
-        expect(service.highlightCode(code)).toEqual('<pre><code class="YAML highlight">FROM ubuntu:16.04</pre></code>');
-    }));
     it('should strip mail to', inject([DockstoreService], (service: DockstoreService) => {
         const email = 'mailto:gary.luu@oicr.on.ca';
         expect(service.stripMailTo(email)).toEqual('gary.luu@oicr.on.ca');
diff --git a/src/app/shared/dockstore.service.ts b/src/app/shared/dockstore.service.ts
index 489bbe1940..82b8696773 100644
--- a/src/app/shared/dockstore.service.ts
+++ b/src/app/shared/dockstore.service.ts
@@ -93,11 +93,6 @@ export class DockstoreService {
     return labelValues.sort();
   }
 
-  /* Highlight Code */
-  highlightCode(code): string {
-    return '<pre><code class="YAML highlight">' + code + '</pre></code>';
-  }
-
   /* Strip mailto from email field */
   stripMailTo(email: string) {
     if (email) {
diff --git a/src/app/shared/entry/entry.module.ts b/src/app/shared/entry/entry.module.ts
index 001c1e1af4..b3257a2cbc 100644
--- a/src/app/shared/entry/entry.module.ts
+++ b/src/app/shared/entry/entry.module.ts
@@ -24,6 +24,7 @@ import {
 } from './info-tab-checker-workflow-path/info-tab-checker-workflow-path.component';
 import { LaunchCheckerWorkflowComponent } from './launch-checker-workflow/launch-checker-workflow.component';
 import { RegisterCheckerWorkflowComponent } from './register-checker-workflow/register-checker-workflow.component';
+import { CodeEditorComponent } from './../code-editor/code-editor.component';
 
 @NgModule({
   imports: [
@@ -32,9 +33,16 @@ import { RegisterCheckerWorkflowComponent } from './register-checker-workflow/re
     FormsModule,
     ModalModule
   ],
-  declarations: [InfoTabCheckerWorkflowPathComponent, RegisterCheckerWorkflowComponent,
-    LaunchCheckerWorkflowComponent
+  declarations: [
+    InfoTabCheckerWorkflowPathComponent,
+    RegisterCheckerWorkflowComponent,
+    LaunchCheckerWorkflowComponent,
+    CodeEditorComponent
   ],
-  exports: [InfoTabCheckerWorkflowPathComponent, LaunchCheckerWorkflowComponent]
+  exports: [
+    InfoTabCheckerWorkflowPathComponent,
+    LaunchCheckerWorkflowComponent,
+    CodeEditorComponent
+  ]
 })
 export class EntryModule { }
diff --git a/src/app/shared/file.service.ts b/src/app/shared/file.service.ts
index 8441342d7b..a19db6c7cc 100644
--- a/src/app/shared/file.service.ts
+++ b/src/app/shared/file.service.ts
@@ -17,12 +17,6 @@ import { ga4ghPath } from './constants';
 import { Dockstore } from './dockstore.model';
 
 export class FileService {
-
-    /* Highlight Code */
-    highlightCode(code: string): string {
-      return '<pre><code class="yaml highlight">' + this.escapeEntities(code) + '</code></pre>';
-    }
-
     escapeEntities(code: string): string {
       return code && code
           .replace(/&/g, '&amp;')
diff --git a/src/app/shared/grammars/custom-grammars.js b/src/app/shared/grammars/custom-grammars.js
new file mode 100644
index 0000000000..3c23e24664
--- /dev/null
+++ b/src/app/shared/grammars/custom-grammars.js
@@ -0,0 +1,319 @@
+import * as ace from '../../../../node_modules/ace-builds/src-min-noconflict/ace.js'
+'use strict';
+
+// CWL Grammar
+ace.define("ace/mode/cwl_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/yaml_highlight_rules"], function(require, exports, module) {
+"use strict";
+
+var oop = require("../lib/oop");
+var YamlHighlightRules = require("./yaml_highlight_rules").YamlHighlightRules;
+
+var CWLHighlightRules = function() {
+    // NOTE: To update CWL highlighting, replace this.$rules = ... with the new highlighting rules
+    this.$rules = {
+        start: [{
+            token: "string.quoted.single.cwl",
+            regex: /'/,
+            push: [{
+                token: "string.quoted.single.cwl",
+                regex: /'/,
+                next: "pop"
+            }, {
+                token: "constant.character.escape.cwl",
+                regex: /\./
+            }, {
+                defaultToken: "string.quoted.single.cwl"
+            }]
+        }, {
+            token: "string.quoted.double.cwl",
+            regex: /"/,
+            push: [{
+                token: "string.quoted.double.cwl",
+                regex: /"/,
+                next: "pop"
+            }, {
+                token: "constant.character.escape.cwl",
+                regex: /\./
+            }, {
+                defaultToken: "string.quoted.double.cwl"
+            }]
+        }, {
+            token: "keyword.control.cwl",
+            regex: /\b(?:inputs|outputs|steps|id|requirements|hints|label|doc|secondaryFiles|streamable|outputBinding|format|outputSource|linkMerge|type|glob|loadContents|outputEval|merge_nested|merge_flattened|location|path|basename|dirname|nameroot|nameext|checksum|size|format|contents|listing|fields|symbols|items|in|out|run|scatter|scatterMethod|source|default|valueFrom|expressionLib|types|linkMerge|inputBinding|position|prefix|separate|itemSeparator|valueFrom|shellQuote|packages|package|version|specs|entry|entryname|writable|baseCommand|arguments|stdin|stderr|stdout|successCodes|temporaryFailCodes|permanentFailCodes|dockerLoad|dockerFile|dockerImport|dockerImageId|dockerOutputDirectory|envDef|envName|envValue|coresMin|coresMax|ramMin|ramMax|tmpdirMin|tmpdirMax|outdirMin|outdirMax)(?=:)/
+        }, {
+            token: "cwlVersion.keyword.control.cwl",
+            regex: /cwlVersion:/,
+            push: [{
+                token: "cwlVersion.definition.string.end.cwl",
+                regex: /$/,
+                next: "pop"
+            }, {
+                token: "storage.constant.cwl",
+                regex: /\b(?:draft-2|draft-3.dev1|draft3-dev2|draft3-dev3|draft3-dev4|draft3-dev5|draft3|draft4.dev1|draft4.dev2|draft4.dev3|v1.0.dev4|v1.0)\b/
+            }, {
+                defaultToken: "cwlVersion.cwl"
+            }]
+        }, {
+            token: "dockerPull.keyword.control.cwl",
+            regex: /dockerPull:/,
+            push: [{
+                token: "dockerPull.definition.string.end.cwl",
+                regex: /$/,
+                next: "pop"
+            }, {
+                token: "storage.variable.cwl",
+                regex: /\b.*$/
+            }, {
+                defaultToken: "dockerPull.cwl"
+            }]
+        }, {
+            token: "class.keyword.control.cwl",
+            regex: /class:/,
+            push: [{
+                token: "class.definition.string.end.cwl",
+                regex: /$/,
+                next: "pop"
+            }, {
+                token: "support.type.cwl",
+                regex: /\b(?:CommandLineTool|ExpressionTool|Workflow|InlineJavascriptRequirement|SchemaDefRequirement|DockerRequirement|SoftwareRequirement|InitialWorkDirRequirement|EnvVarRequirement|ShellCommandRequirement|ResourceRequirement)\b/
+            }, {
+                defaultToken: "class.cwl"
+            }]
+        }, {
+            token: "storage.type.cwl",
+            regex: /:\s+(?:null|boolean|int|long|float|double|string|File|Directory)\b/
+        }, {
+            token: "comment.line.number-sign.cwl",
+            regex: /#.*$/
+        }]
+    }
+
+    this.normalizeRules();
+};
+
+CWLHighlightRules.metaData = {
+    fileTypes: ["cwl"],
+    name: "CWL",
+    scopeName: "source.cwl"
+}
+
+oop.inherits(CWLHighlightRules, YamlHighlightRules);
+
+exports.CWLHighlightRules = CWLHighlightRules;
+});
+
+ace.define('ace/mode/cwl',["require","exports","module","ace/lib/oop","ace/mode/yaml_highlight_rules"], function(require, exports, module) {
+
+  var oop = require("../lib/oop");
+  var YamlHighlightRules = require("./yaml_highlight_rules").YamlHighlightRules;
+  var TextMode = require("./text").Mode;
+
+var CWLHighlightRules = require("ace/mode/cwl_highlight_rules").CWLHighlightRules;
+
+var Mode = function() {
+    this.HighlightRules = CWLHighlightRules;
+};
+oop.inherits(Mode, TextMode);
+
+(function() {
+    // Extra logic goes here. (see below)
+}).call(Mode.prototype);
+
+exports.Mode = Mode;
+});
+
+// WDL Grammar
+ace.define("ace/mode/wdl_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/yaml_highlight_rules"], function(require, exports, module) {
+"use strict";
+
+var oop = require("../lib/oop");
+var YamlHighlightRules = require("./yaml_highlight_rules").YamlHighlightRules;
+
+var WDLHighlightRules = function() {
+    // NOTE: To update WDL highlighting, replace this.$rules = ... with the new highlighting rules
+    this.$rules = {
+        start: [{
+            token: "keyword.operator.assignment.wdl",
+            regex: /\=/
+        }, {
+            token: "keyword.operator.comparison.wdl",
+            regex: /<\=|>\=|\=\=|<|>|\!\=/
+        }, {
+            token: "keyword.operator.assignment.augmented.wdl",
+            regex: /\+\=|-\=|\*\=|\/\=|\/\/\=|%\=|&\=|\|\=|\^\=|>>\=|<<\=|\*\*\=/
+        }, {
+            token: "keyword.operator.arithmetic.wdl",
+            regex: /\+|\-|\*|\*\*|\/|\/\/|%|<<|>>|&|\||\^|~/
+        }, {
+            token: "constant.language.wdl",
+            regex: /\b(?:true|false)\b/
+        }, {
+            include: "#builtin_types"
+        }, {
+            include: "#comments"
+        }, {
+            include: "#input_output"
+        }, {
+            include: "#keywords"
+        }, {
+            include: "#string_quoted_single"
+        }, {
+            include: "#string_quoted_double"
+        }, {
+            include: "#command_block"
+        }],
+        "#builtin_types": [{
+            token: "support.type.wdl",
+            regex: "(?:[^A-Za-z0-9_\.])(?:Array|Boolean|File|Float|Int|Map|Object|String|Pair)\\b",
+        }],
+        "#command_block": [{
+            token: [
+                "keyword.other.wdl",
+                "command.block.wdl",
+                "command.block.wdl"
+            ],
+            regex: /(command)(\s*\{)((?:$|\s)*)/,
+            push: [{
+                token: "command.block.wdl",
+                regex: /(?:^|\s+)\}/,
+                next: "pop"
+            }, {
+                defaultToken: "command.block.wdl"
+            }],
+            comment: "command {}"
+        }, {
+            token: [
+                "keyword.other.wdl",
+                "command.block.wdl",
+                "command.block.wdl"
+            ],
+            regex: /(command)(\s*<{3})((?:$|\s)*)/,
+            push: [{
+                token: "command.block.wdl",
+                regex: /(?:^|\s+)>{3}/,
+                next: "pop"
+            }, {
+                defaultToken: "command.block.wdl"
+            }],
+            comment: "command <<< >>>"
+        }],
+        "#comments": [{
+            token: [
+                "punctuation.definition.comment.wdl",
+                "comment.line.number-sign.wdl"
+            ],
+            regex: /(#)(.*$)/
+        }],
+        "#constant_placeholder": [{
+            token: "constant.other.placeholder.wdl",
+            regex: /%(?:\([a-z_]+\))?#?0?\-?[ ]?\+?(?:[0-9]*|\*)(?:\.(?:[0-9]*|\*))?[hL]?[a-z%]/,
+            caseInsensitive: true
+        }],
+        "#escaped_char": [{
+            token: [
+                "constant.character.escape.hex.wdl",
+                "constant.character.escape.octal.wdl",
+                "constant.character.escape.newline.wdl",
+                "constant.character.escape.backlash.wdl",
+                "constant.character.escape.double-quote.wdl",
+                "constant.character.escape.single-quote.wdl",
+                "constant.character.escape.bell.wdl",
+                "constant.character.escape.backspace.wdl",
+                "constant.character.escape.formfeed.wdl",
+                "constant.character.escape.linefeed.wdl",
+                "constant.character.escape.return.wdl",
+                "constant.character.escape.tab.wdl",
+                "constant.character.escape.vertical-tab.wdl"
+            ],
+            regex: /(\\x[0-9a-fA-F]{2})|(\\[0-7]{3})|(\\$)|(\\\\)|(\\\")|(\\')|(\\a)|(\\b)|(\\f)|(\\n)|(\\r)|(\\t)|(\\v)/
+        }],
+        "#escaped_unicode_char": [{
+            token: [
+                "constant.character.escape.unicode.16-bit-hex.wdl",
+                "constant.character.escape.unicode.32-bit-hex.wdl",
+                "constant.character.escape.unicode.name.wdl"
+            ],
+            regex: /(\\U[0-9A-Fa-f]{8})|(\\u[0-9A-Fa-f]{4})|(\\N\{[a-zA-Z0-9\, ]+\})/
+        }],
+        "#keywords": [{
+            token: "keyword.other.wdl",
+            regex: /(?:^|\s)(?:call|runtime|task|workflow|if|then|else|import|as|input|output|meta|parameter_meta|scatter)[^A-Za-z_]/
+        }],
+        "#string_quoted_double": [{
+            token: "punctuation.definition.string.begin.wdl",
+            regex: /"/,
+            push: [{
+                token: "punctuation.definition.string.end.wdl",
+                regex: /"/,
+                next: "pop"
+            }, {
+                include: "#constant_placeholder"
+            }, {
+                include: "#escaped_char"
+            }, {
+                defaultToken: "string.quoted.double.single-line.wdl"
+            }],
+            comment: "double quoted string"
+        }],
+        "#string_quoted_single": [{
+            token: "punctuation.definition.string.begin.wdl",
+            regex: /'/,
+            push: [{
+                token: "punctuation.definition.string.end.wdl",
+                regex: /'/,
+                next: "pop"
+            }, {
+                include: "#constant_placeholder"
+            }, {
+                include: "#escaped_char"
+            }, {
+                defaultToken: "string.quoted.single.single-line.wdl"
+            }],
+            comment: "single quoted string"
+        }]
+    }
+
+    this.normalizeRules();
+};
+
+WDLHighlightRules.metaData = {
+    author: "Andrew Teixeira <teixeira@broadinstitute.org>",
+    fileTypes: ["wdl"],
+    name: "WDL",
+    scopeName: "source.wdl"
+}
+
+oop.inherits(WDLHighlightRules, YamlHighlightRules);
+
+exports.WDLHighlightRules = WDLHighlightRules;
+});
+ace.define('ace/mode/wdl',["require","exports","module","ace/lib/oop","ace/mode/yaml_highlight_rules"], function(require, exports, module) {
+
+  var oop = require("../lib/oop");
+  var YamlHighlightRules = require("./yaml_highlight_rules").YamlHighlightRules;
+  var TextMode = require("./text").Mode;
+
+var WDLHighlightRules = require("ace/mode/wdl_highlight_rules").WDLHighlightRules;
+
+var Mode = function() {
+    this.HighlightRules = WDLHighlightRules;
+};
+oop.inherits(Mode, TextMode);
+
+(function() {
+    // Extra logic goes here. (see below)
+}).call(Mode.prototype);
+
+exports.Mode = Mode;
+});
+
+(function() {
+    ace.require(["ace/mode/wdl","ace/mode/cwl"], function(m) {
+        if (typeof module == "object" && typeof exports == "object" && module) {
+            module.exports = m;
+        }
+    });
+})();
+
+// Exported ace now has custom modes for CWL and WDL
+export { ace };
diff --git a/src/app/shared/modules/container.module.ts b/src/app/shared/modules/container.module.ts
index e11a38f508..c48f728e00 100644
--- a/src/app/shared/modules/container.module.ts
+++ b/src/app/shared/modules/container.module.ts
@@ -43,7 +43,6 @@ import { OrderByModule } from '../../shared/modules/orderby.module';
 import { StargazersModule } from '../../stargazers/stargazers.module';
 import { StarringModule } from '../../starring/starring.module';
 import { StarringService } from '../../starring/starring.service';
-import { HighlightJsModule, HighlightJsService } from '../angular2-highlight-js/lib/highlight-js.module';
 import { DateService } from '../date.service';
 import { FileService } from '../file.service';
 import { AddTagComponent } from './../../container/add-tag/add-tag.component';
@@ -83,7 +82,6 @@ import { SelectModule } from './select.module';
     ClipboardModule,
     MarkdownModule.forRoot(),
     DataTablesModule.forRoot(),
-    HighlightJsModule,
     HeaderModule,
     SelectModule,
     ListContainersModule,
@@ -102,7 +100,6 @@ import { SelectModule } from './select.module';
   ],
   providers: [
     {provide: TooltipConfig, useFactory: getTooltipConfig},
-    HighlightJsService,
     EmailService,
     DateService,
     FileService,
diff --git a/src/app/shared/modules/workflow.module.ts b/src/app/shared/modules/workflow.module.ts
index c6bac64f11..88d05845f2 100644
--- a/src/app/shared/modules/workflow.module.ts
+++ b/src/app/shared/modules/workflow.module.ts
@@ -28,7 +28,6 @@ import { ClipboardModule } from 'ngx-clipboard';
 import { ShareButtonsModule } from 'ngx-sharebuttons';
 
 import { ParamfilesService } from '../../container/paramfiles/paramfiles.service';
-import { HighlightJsModule, HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { OrderByModule } from '../../shared/modules/orderby.module';
 import { StargazersModule } from '../../stargazers/stargazers.module';
 import { StarringModule } from '../../starring/starring.module';
@@ -80,7 +79,6 @@ import { LaunchThirdPartyComponent } from '../../workflow/launch-third-party/lau
     MarkdownModule.forRoot(),
     DataTablesModule,
     HeaderModule,
-    HighlightJsModule,
     ListWorkflowsModule,
     ModalModule.forRoot(),
     SelectModule,
@@ -99,7 +97,6 @@ import { LaunchThirdPartyComponent } from '../../workflow/launch-third-party/lau
   providers: [
     ExtendedWorkflowService,
     { provide: TooltipConfig, useFactory: getTooltipConfig },
-    HighlightJsService,
     DateService,
     FileService,
     WorkflowLaunchService,
diff --git a/src/app/shared/selectors/entry-file-selector.ts b/src/app/shared/selectors/entry-file-selector.ts
index d6881de836..fb5a75a0a1 100644
--- a/src/app/shared/selectors/entry-file-selector.ts
+++ b/src/app/shared/selectors/entry-file-selector.ts
@@ -26,12 +26,11 @@ export abstract class EntryFileSelector {
   protected descriptors: Array<any>;
   public nullDescriptors: boolean;
 
-  protected currentFile;
+  public currentFile;
   protected files: Array<any>;
   protected published$: Observable<boolean>;
 
   content: string = null;
-  contentHighlighted: boolean;
 
   abstract getDescriptors(version): Array<any>;
   abstract getFiles(descriptor): Observable<any>;
@@ -76,7 +75,6 @@ export abstract class EntryFileSelector {
 
   clearContent() {
     this.content = null;
-    this.contentHighlighted = false;
   }
 
 }
diff --git a/src/app/test/service-stubs.ts b/src/app/test/service-stubs.ts
index c49c1edc36..5f6bf8e6e2 100644
--- a/src/app/test/service-stubs.ts
+++ b/src/app/test/service-stubs.ts
@@ -65,7 +65,11 @@ export class ProviderStubService {
         return tool;
     }
 }
-export class FileStubService { }
+export class FileStubService {
+  getFilePath(file): string {
+    return '';
+  }
+}
 
 export class QueryBuilderStubService {
     getTagCloudQuery(type: string): string {
@@ -493,10 +497,10 @@ export class DescriptorsStubService {
 }
 
 export class ParamFilesStubService {
-    getVersions() {
+    getVersions(version) {
         return Observable.of([]);
     }
-    getDescriptors() {
+    getDescriptors(id, type, versionName, descriptor) {
         return Observable.of({});
     }
 }
diff --git a/src/app/workflow/descriptors/descriptors.component.css b/src/app/workflow/descriptors/descriptors.component.css
index 9153727ab3..f9b3ebf702 100644
--- a/src/app/workflow/descriptors/descriptors.component.css
+++ b/src/app/workflow/descriptors/descriptors.component.css
@@ -13,4 +13,3 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-
diff --git a/src/app/workflow/descriptors/descriptors.component.html b/src/app/workflow/descriptors/descriptors.component.html
index 893db55f16..5c7c7f3ba8 100644
--- a/src/app/workflow/descriptors/descriptors.component.html
+++ b/src/app/workflow/descriptors/descriptors.component.html
@@ -27,17 +27,17 @@
       &nbsp;A Descriptor File associated with this Docker container could not be found.
     </alert>
   </div>
-  <div *ngIf="!this.nullDescriptors && _selectedVersion?.valid" class="code-copy">
-    <div class="code-copy-button btn-group">
+  <div *ngIf="!this.nullDescriptors && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group" role="group">
       <a *ngIf="(published$ | async)" download [href]="descriptorPath" class="btn btn-default" type="button" title="{{filePath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content"
-        [ngClass]="{'btn-copy':workflowCopyBtn === 'workflow_descriptors_file'}"
-        (cbOnSuccess)="workflowCopyBtnClick('workflow_descriptors_file')">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section *ngIf="content && _selectedVersion?.valid" [innerHTML]="fileService.highlightCode(content)"></section>
+  </div>
+  <div [hidden]="!content || !_selectedVersion?.valid">
+    <app-code-editor [(content)]="content" [filepath]="filePath"></app-code-editor>
   </div>
 </div>
diff --git a/src/app/workflow/descriptors/descriptors.component.spec.ts b/src/app/workflow/descriptors/descriptors.component.spec.ts
index a8ef7a85be..a6260acf87 100644
--- a/src/app/workflow/descriptors/descriptors.component.spec.ts
+++ b/src/app/workflow/descriptors/descriptors.component.spec.ts
@@ -18,7 +18,6 @@ import { WorkflowDescriptorService } from './workflow-descriptor.service';
 import { WorkflowService } from './../../shared/workflow.service';
 import { FileService } from './../../shared/file.service';
 import { DescriptorsStubService, FileStubService, WorkflowStubService } from './../../test/service-stubs';
-import { HighlightJsModule, HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { DescriptorsWorkflowComponent } from './descriptors.component';
@@ -30,12 +29,11 @@ describe('DescriptorsWorkflowComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ DescriptorsWorkflowComponent ],
-      imports: [ HighlightJsModule],
-      providers: [ HighlightJsService, {
-        provide: WorkflowDescriptorService, useClass: DescriptorsStubService
-      }, {provide: FileService, useClass: FileStubService}, {
-        provide: WorkflowService, useClass: WorkflowStubService
-      }],
+      providers: [
+        { provide: WorkflowDescriptorService, useClass: DescriptorsStubService },
+        { provide: FileService, useClass: FileStubService },
+        { provide: WorkflowService, useClass: WorkflowStubService }
+      ],
       schemas: [ NO_ERRORS_SCHEMA ]
     })
     .compileComponents();
diff --git a/src/app/workflow/descriptors/descriptors.component.ts b/src/app/workflow/descriptors/descriptors.component.ts
index e142329009..ae209ceab2 100644
--- a/src/app/workflow/descriptors/descriptors.component.ts
+++ b/src/app/workflow/descriptors/descriptors.component.ts
@@ -13,10 +13,9 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { AfterViewChecked, Component, ElementRef, Input } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { FileService } from '../../shared/file.service';
 import { EntryFileSelector } from '../../shared/selectors/entry-file-selector';
 import { Workflow } from '../../shared/swagger';
@@ -29,22 +28,18 @@ import { WorkflowDescriptorService } from './workflow-descriptor.service';
   templateUrl: './descriptors.component.html',
   styleUrls: ['./descriptors.component.css']
 })
-export class DescriptorsWorkflowComponent extends EntryFileSelector implements AfterViewChecked {
+export class DescriptorsWorkflowComponent extends EntryFileSelector {
   @Input() id: number;
   @Input() entrypath: string;
   @Input() set selectedVersion(value: WorkflowVersion) {
     this.onVersionChange(value);
   }
 
-  content: string;
-  contentHighlighted: boolean;
   public descriptorPath: string;
   public filePath: string;
-  constructor(private highlightJsService: HighlightJsService,
-              private workflowDescriptorService: WorkflowDescriptorService,
+  constructor(private workflowDescriptorService: WorkflowDescriptorService,
               public fileService: FileService,
-              private workflowService: WorkflowService,
-              private elementRef: ElementRef) {
+              private workflowService: WorkflowService) {
     super();
     this.published$ = this.workflowService.workflowIsPublished$;
   }
@@ -58,16 +53,9 @@ export class DescriptorsWorkflowComponent extends EntryFileSelector implements A
 
   reactToFile(): void {
     this.content = this.currentFile.content;
-    this.contentHighlighted = true;
     this.descriptorPath = this.getDescriptorPath(this.currentDescriptor);
     this.filePath = this.getFilePath(this.currentFile);
   }
-  ngAfterViewChecked() {
-    if (this.contentHighlighted) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
-  }
 
   private getDescriptorPath(entrytype): string {
     return this.fileService.getDescriptorPath(this.entrypath, this._selectedVersion, this.currentFile, this.currentDescriptor, 'workflow');
diff --git a/src/app/workflow/info-tab/info-tab.component.html b/src/app/workflow/info-tab/info-tab.component.html
index d4a523a2d1..4129af12b5 100644
--- a/src/app/workflow/info-tab/info-tab.component.html
+++ b/src/app/workflow/info-tab/info-tab.component.html
@@ -85,11 +85,11 @@
         <option *ngFor="let descriptorLanguage of descriptorLanguages()" value="{{descriptorLanguage | lowercase}}">{{descriptorLanguage | lowercase}}</option>
       </select>
     </div>
-    <div *ngIf="workflow?.mode === WorkflowType.ModeEnum.FULL">
+    <div *ngIf="workflow?.mode !== WorkflowType.ModeEnum.STUB">
       <Strong uib-tooltip="Type of descriptor language used">Descriptor Type: </Strong>{{ workflow?.descriptorType }}</div>
   </li>
 </ul>
-<div *ngIf="workflow && workflow?.mode === WorkflowType.ModeEnum.FULL">
+<div *ngIf="workflow && workflow?.mode !== WorkflowType.ModeEnum.STUB">
   <div *ngIf="workflow?.description || !isPublic">
     <label tooltip="Description of workflow obtained from workflow descriptor">
       Description
diff --git a/src/app/workflow/paramfiles/paramfiles.component.html b/src/app/workflow/paramfiles/paramfiles.component.html
index 311077cc86..1446f046e1 100644
--- a/src/app/workflow/paramfiles/paramfiles.component.html
+++ b/src/app/workflow/paramfiles/paramfiles.component.html
@@ -23,18 +23,18 @@
   </span>
   <span *ngIf="content" class="input-group-btn code-copy">
   </span>
-  <div *ngIf="content && _selectedVersion?.valid" class="code-copy">
-    <div class="code-copy-button btn-group">
-      <a href id="downloadLinkParams" (click)="downloadFile(currentFile, 'downloadLinkParams')" class="btn btn-default" type="button" title="{{getFilePath(currentFile)}}">
+  <div *ngIf="content && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group">
+      <a href id="downloadLinkParams" (click)="downloadFile(currentFile, 'downloadLinkParams')" class="btn btn-default" type="button" title="{{filePath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content"
-              [ngClass]="{'btn-copy':workflowCopyBtn === 'workflow_param_file'}"
-              (cbOnSuccess)="workflowCopyBtnClick('workflow_param_file')">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section [innerHTML]="fileService.highlightCode(content)"></section>
+  </div>
+  <div [hidden]="!content || !_selectedVersion?.valid">
+    <app-code-editor [(content)]="content" [filepath]="filePath"></app-code-editor>
   </div>
   <alert type="warning" *ngIf="!content || !_selectedVersion?.valid">
     <span class="glyphicon glyphicon-warning-sign"></span>
diff --git a/src/app/workflow/paramfiles/paramfiles.component.spec.ts b/src/app/workflow/paramfiles/paramfiles.component.spec.ts
index 21b36579e9..b77ac8645d 100644
--- a/src/app/workflow/paramfiles/paramfiles.component.spec.ts
+++ b/src/app/workflow/paramfiles/paramfiles.component.spec.ts
@@ -16,8 +16,6 @@
 
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ParamfilesService } from './../../container/paramfiles/paramfiles.service';
 import { FileService } from './../../shared/file.service';
 import { WorkflowService } from './../../shared/workflow.service';
@@ -30,13 +28,15 @@ describe('ParamfilesWorkflowComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ParamfilesWorkflowComponent],
-      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [
+        ParamfilesWorkflowComponent
+      ],
       providers: [
         { provide: ParamfilesService, useClass: ParamFilesStubService },
-        HighlightJsService,
         { provide: FileService, useClass: FileStubService},
-        { provide: WorkflowService, useClass: WorkflowStubService}]
+        { provide: WorkflowService, useClass: WorkflowStubService}
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();
   }));
diff --git a/src/app/workflow/paramfiles/paramfiles.component.ts b/src/app/workflow/paramfiles/paramfiles.component.ts
index 7e3ee5db4a..4a4365c6a1 100644
--- a/src/app/workflow/paramfiles/paramfiles.component.ts
+++ b/src/app/workflow/paramfiles/paramfiles.component.ts
@@ -14,10 +14,9 @@
  *    limitations under the License.
  */
 
-import {Component, Input, OnInit, ElementRef, AfterViewChecked} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { ParamfilesService } from '../../container/paramfiles/paramfiles.service';
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { EntryFileSelector } from '../../shared/selectors/entry-file-selector';
 
 import { FileService } from '../../shared/file.service';
@@ -29,18 +28,17 @@ import { WorkflowVersion } from './../../shared/swagger/model/workflowVersion';
   templateUrl: './paramfiles.component.html',
   styleUrls: ['./paramfiles.component.css']
 })
-export class ParamfilesWorkflowComponent extends EntryFileSelector implements AfterViewChecked {
+export class ParamfilesWorkflowComponent extends EntryFileSelector {
   @Input() id: number;
   @Input() entrypath: string;
   @Input() set selectedVersion(value: WorkflowVersion) {
     this.clearContent();
     this.onVersionChange(value);
   }
+  public filePath: string;
 
   constructor(private paramfilesService: ParamfilesService,
-              private highlightJsService: HighlightJsService,
               public fileService: FileService,
-              private elementRef: ElementRef,
               private workflowService: WorkflowService) {
     super();
   }
@@ -54,14 +52,7 @@ export class ParamfilesWorkflowComponent extends EntryFileSelector implements Af
 
   reactToFile(): void {
     this.content = this.currentFile.content;
-    this.contentHighlighted = true;
-  }
-
-  ngAfterViewChecked() {
-    if (this.contentHighlighted && this.elementRef.nativeElement.querySelector('.highlight')) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
+    this.filePath = this.getFilePath(this.currentFile);
   }
 
   // Downloads a file
diff --git a/src/app/workflows/workflows.module.ts b/src/app/workflows/workflows.module.ts
index fa02a68952..7a1e15fac7 100644
--- a/src/app/workflows/workflows.module.ts
+++ b/src/app/workflows/workflows.module.ts
@@ -22,7 +22,6 @@ import { AlertModule } from 'ngx-bootstrap/alert';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TooltipConfig, TooltipModule } from 'ngx-bootstrap/tooltip';
 
-import { HighlightJsModule, HighlightJsService } from '../shared/angular2-highlight-js/lib/highlight-js.module';
 import { HeaderModule } from '../shared/modules/header.module';
 import { ListWorkflowsModule } from '../shared/modules/list-workflows.module';
 import { SelectModule } from '../shared/modules/select.module';
@@ -42,7 +41,6 @@ import { workflowsRouting } from './workflows.routing';
     AccordionModule.forRoot(),
     AlertModule.forRoot(),
     DataTablesModule.forRoot(),
-    HighlightJsModule,
     HeaderModule,
     ListWorkflowsModule,
     MarkdownModule.forRoot(),
@@ -53,8 +51,7 @@ import { workflowsRouting } from './workflows.routing';
     workflowsRouting
   ],
   providers: [
-    {provide: TooltipConfig, useFactory: getTooltipConfig},
-    HighlightJsService
+    {provide: TooltipConfig, useFactory: getTooltipConfig}
   ]
 })
 export class WorkflowsModule {
diff --git a/src/index.html b/src/index.html
index a13823355b..5179815d03 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,9 +7,6 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/typescript.min.js"></script>
   <script>
   (function(w, d, s, l, i) {
     w[l] = w[l] || [];
diff --git a/src/styles.scss b/src/styles.scss
index fe13511e55..5bc3434d63 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -480,9 +480,6 @@ div.button a {
 .button:hover {
   text-decoration: underline;
 }
-.code-copy {
-  position:relative
-}
 
 .refresh-all-button {
   background-color: #487980 !important;
@@ -911,17 +908,6 @@ div.tabs>div:target>div,
   width: 100%;
 }
 
-.btn-copy {
-  color: white !important;
-  background-color: #487980 !important;
-  border-color: #487980 !important;
-  &:hover{
-    color: white !important;
-    background-color: #487980 !important;
-    border-color: #487980 !important;
-  }
-}
-
 .btn-sad {
   background-color: white;
   box-shadow: none;
@@ -1064,21 +1050,6 @@ div.tabs>div:target>div,
   margin-bottom: 5px;
 }
 
-.code-holder {
-  position: relative;
-  overflow: visible;
-}
-
-.code-copy-button {
-  top: 20px;
-  right: 20px;
-  position: absolute;
-}
-
-.code-copy-button > a {
-  border: 1px solid transparent !important;
-}
-
 .ellipsis-lines {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1192,37 +1163,6 @@ tabset.homeComponent {
   }
 }
 
-.hljs-ln-n {
-  word-break: normal;
-  padding-right: 10px;
-}
-
-.hljs-ln,.hljs-ln td, .hljs-ln th {
-  border: 0;
-}
-
-td.hljs-ln-numbers {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  text-align: center;
-  color: #979797;
-  border-right: 1px solid #9a9a9a;
-  vertical-align: top;
-  padding-right: 5px;
-
-  /* your custom style here */
-}
-
-/* for block of code */
-td.hljs-ln-code {
-  padding-left: 10px;
-}
-
 /* This is for dropdown anchor to have a mouse pointer without redirecting to a different page */
 .dropdown-menu li a{
     cursor: pointer;