feat: editor preview tabs, abbr, sup, sub, mark and img size

client/components/editor-code.vue

@@ -113,6 +113,14 @@ import 'codemirror/addon/search/match-highlighter.js'
 import MarkdownIt from 'markdown-it'
 import mdEmoji from 'markdown-it-emoji'
 import mdTaskLists from 'markdown-it-task-lists'
+import mdExpandTabs from 'markdown-it-expand-tabs'
+import mdAbbr from 'markdown-it-abbr'
+import mdSup from 'markdown-it-sup'
+import mdSub from 'markdown-it-sub'
+import mdMark from 'markdown-it-mark'
+import mdImsize from 'markdown-it-imsize'
+
+// Prism (Syntax Highlighting)
 import Prism from '../libs/prism/prism.js'
 
 const md = new MarkdownIt({
@@ -126,6 +134,12 @@ const md = new MarkdownIt({
 })
   .use(mdEmoji)
   .use(mdTaskLists)
+  .use(mdExpandTabs)
+  .use(mdAbbr)
+  .use(mdSup)
+  .use(mdSub)
+  .use(mdMark)
+  .use(mdImsize)
 
 export default {
   components: {

client/scss/components/markdown-content.scss

@@ -39,6 +39,10 @@ .markdown-content {
     font-size: 1.025rem;
   }
 
+  p + p {
+    margin-top: 1rem;
+  }
+
   // --------------------------------------------
   // Code Blocks
   // --------------------------------------------

dev/webpack/webpack.common.js

@@ -247,5 +247,8 @@ module.exports = {
       'node_modules'
     ]
   },
+  node: {
+    fs: 'empty'
+  },
   target: 'web'
 }

package.json

@@ -85,7 +85,11 @@
     "markdown-it-expand-tabs": "1.0.12",
     "markdown-it-external-links": "0.0.6",
     "markdown-it-footnote": "3.0.1",
+    "markdown-it-imsize": "2.0.1",
+    "markdown-it-mark": "2.0.0",
     "markdown-it-mathjax": "2.0.0",
+    "markdown-it-sub": "1.0.0",
+    "markdown-it-sup": "1.0.0",
     "markdown-it-task-lists": "2.1.0",
     "mathjax-node": "2.0.1",
     "mime-types": "2.1.18",