Stricter markdown rendering.

frontend/app/framework/angular/pipes/markdown.pipe.ts

@@ -6,9 +6,9 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import Marked from 'marked';
+import marked from 'marked';
 
-const renderer = new Marked.Renderer();
+const renderer = new marked.Renderer();
 
 renderer.link = (href, _, text) => {
     return `<a href="${href}" target="_blank", rel="noopener">${text} <i class="icon-external-link"></i></a>`;
@@ -21,7 +21,7 @@ renderer.link = (href, _, text) => {
 export class MarkdownPipe implements PipeTransform {
     public transform(text: string | null | undefined): string {
         if (text) {
-            return Marked(text, { renderer });
+            return marked(text, { renderer });
         } else {
             return '';
         }

frontend/app/shared/components/help-markdown.pipe.ts

@@ -6,9 +6,9 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import * as Marked from 'marked';
+import marked from 'marked';
 
-const renderer = new Marked.Renderer();
+const renderer = new marked.Renderer();
 
 renderer.link = (href, _, text) => {
     if (!href.startsWith('http')) {
@@ -25,7 +25,7 @@ renderer.link = (href, _, text) => {
 export class HelpMarkdownPipe implements PipeTransform {
     public transform(text: string | null | undefined): string {
         if (text) {
-            return Marked(text, { renderer });
+            return marked(text, { renderer });
         } else {
             return '';
         }

frontend/app/shared/components/markdown-editor.component.html

@@ -1,6 +1,6 @@
 <div #container class="drop-container" (sqxDropFile)="insertFiles($event)" [onlyImages]="true">
     <div #inner [class.fullscreen]="snapshot.isFullscreen">
-        <textarea class="form-control" #editor></textarea>
+        <textarea class="form-control editor" #editor></textarea>
     </div>
 </div>
 

frontend/app/shared/components/markdown-editor.component.scss

@@ -3,13 +3,14 @@
 
 $background: #fff;
 
-.editor {
+:host ::ng-deep {
-    height: 30rem;
+    // sass-lint:disable class-name-format
+    .CodeMirror {
+        height: 300px;
+    }
 }
 
 .fullscreen {
     @include fixed(0, 0, 0, 0);
-    background: $background;
-    border: 0;
     z-index: 1040;
 }

frontend/app/shared/components/markdown-editor.component.ts

@@ -7,6 +7,7 @@
 
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Renderer2, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import marked from 'marked';
 
 import {
     ApiUrlConfig,
@@ -91,6 +92,9 @@ export class MarkdownEditorComponent extends StatefulControlComponent<State, str
         this.resourceLoader.loadStyle('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css');
         this.resourceLoader.loadScript('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js').then(() => {
             this.simplemde = new SimpleMDE({
+                previewRender: (text: string) => {
+                    return marked(text, { pedantic: true });
+                },
                 toolbar: [
                     {
                         name: 'bold',