feat: editor preview emoji + task lists

client/components/editor-code.vue

@@ -111,6 +111,8 @@ import 'codemirror/addon/search/match-highlighter.js'
 
 // Markdown-it
 import MarkdownIt from 'markdown-it'
+import mdEmoji from 'markdown-it-emoji'
+import mdTaskLists from 'markdown-it-task-lists'
 import Prism from '../libs/prism/prism.js'
 
 const md = new MarkdownIt({
@@ -122,6 +124,8 @@ const md = new MarkdownIt({
     return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
   }
 })
+  .use(mdEmoji)
+  .use(mdTaskLists)
 
 export default {
   components: {
@@ -131,7 +135,7 @@ export default {
     return {
       fabMainMenu: false,
       fabInsertMenu: false,
-      code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```',
+      code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
       cmOptions: {
         tabSize: 2,
         mode: 'text/markdown',

client/scss/app.scss

@@ -12,7 +12,7 @@
 @import 'components/toggle';
 @import 'components/typography';
 
-@import '../libs/twemoji/twemoji-awesome';
+// @import '../libs/twemoji/twemoji-awesome';
 @import '../libs/prism/prism.css';
 @import 'node_modules/diff2html/dist/diff2html.min';
 

client/scss/base/print.scss

@@ -35,6 +35,4 @@
       }
     }
   }
-
-  @import 'node_modules/highlight.js/styles/atom-one-light';
 }

client/scss/components/markdown-content.scss

@@ -1,13 +1,14 @@
 .markdown-content {
   font-size: 1rem;
-  color: mc('blue-grey', '900');
+  color: mc('blue-grey', '800');
 
   // --------------------------------------------
   // Headers
   // --------------------------------------------
 
   h1, h2, h3, h4, h5, h6 {
-    color: mc('blue-grey', '800');
+    color: mc('blue-grey', '700');
+    font-weight: 600;
   }
 
   > * + h1, > * + h2, > * + h3, > * + h4 {
@@ -15,16 +16,17 @@
   }
   h1 {
     font-size: 1.5rem;
-    border-bottom: 1px solid mc('blue-grey', '100');
+    border-bottom: 2px solid mc('blue-grey', '100');
     margin-bottom: 1rem;
   }
   h2 {
     font-size: 1.25rem;
-    border-bottom: 1px dotted mc('blue-grey', '100');
+    border-bottom: 1px solid mc('blue-grey', '100');
     margin-bottom: .75rem;
   }
   h3 {
     font-size: 1.15rem;
+    border-bottom: 1px dotted mc('blue-grey', '100');
     margin-bottom: .5rem;
   }
   h4 {
@@ -58,4 +60,13 @@
       }
     }
   }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &-checkbox {
+      margin-right: .5rem;
+    }
+  }
 }