Fix code rendering

Author: lin-toto

package-lock.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
+    "escape-html": "^1.0.3",
     "font-awesome": "^4.7.0",
     "highlight.js": "^9.12.0",
     "katex": "^0.9.0-alpha2",

package.json

@@ -32,6 +32,11 @@
         border: 1px solid #ddd;
         padding: 6px 13px;
     }
+
+    code.mp-code {
+        font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+        font-size: 15px;
+    }
 </style>
 
 <script>

src/components/PreviewArea.vue

@@ -1,5 +1,6 @@
-import 'highlight.js/styles/atom-one-light.css'
+import 'highlight.js/styles/tomorrow.css'
 import Highlight from './Highlight'
+import escapeHtml from 'escape-html'
 
 export function MarkdownParser (code, stringMap) {
     let marked = require('marked')
@@ -14,28 +15,27 @@ export function MarkdownParser (code, stringMap) {
         return Highlight.highlightAuto(code).value
     }
 
-    renderer.code = function (code, lang, escaped) {
+    renderer.code = function (code, lang) {
         stringMap.forEach(function (mapItem) {
             code = code.replace(mapItem.hash, mapItem.segment)
         })
 
         let out = highlight(code, lang)
-        if (out != null && out !== code) {
-            escaped = true
+        if (out !== null) {
             code = out
         }
 
         if (!lang) {
-            return '<pre><code>' +
-                (escaped ? code : escape(code, true)) +
+            return '<pre><code class="mp-code ">' +
+                code +
                 '\n</code></pre>'
         }
 
-        return '<pre><code class="' +
+        return '<pre><code class="mp-code ' +
             'lang-' +
-            escape(lang, true) +
+            escapeHtml(lang) +
             '">' +
-            (escaped ? code : escape(code, true)) +
+            code +
             '\n</code></pre>\n'
     }