update css

src/components/Toc.vue

@@ -99,6 +99,10 @@ export default {
   -ms-user-select: none;
   user-select: none;
 
+  .app--dark & {
+    color: rgba(255, 255, 255, 0.67);
+  }
+
   * {
     font-weight: inherit;
     pointer-events: none;
@@ -150,5 +154,9 @@ export default {
   height: 35px;
   background-color: rgba(255, 255, 255, 0.2);
   pointer-events: none;
+
+  .app--dark & {
+    color: rgba(0, 0, 0, 0.2);
+  }
 }
 </style>

src/services/markdownGrammarSvc.js

@@ -83,31 +83,31 @@ export default {
     const insideFences = options.insideFences || {};
     insideFences['cl cl-pre'] = /```|~~~/;
     if (options.fence) {
-      grammars.main['pre gfm'] = {
+      grammars.main['pre gfm cn-code'] = {
         pattern: /^(```|~~~)[\s\S]*?\n\1 *$/gm,
         inside: insideFences,
       };
-      grammars.list['pre gfm'] = {
+      grammars.list['pre gfm cn-code'] = {
         pattern: /^(?: {4}|\t)(```|~~~)[\s\S]*?\n(?: {4}|\t)\1\s*$/gm,
         inside: insideFences,
       };
-      grammars.deflist.deflist.inside['pre gfm'] = grammars.list['pre gfm'];
+      grammars.deflist.deflist.inside['pre gfm cn-code'] = grammars.list['pre gfm cn-code'];
     }
 
-    grammars.main['h1 alt'] = {
-      pattern: /^.+\n=+[ \t]*$/gm,
+    grammars.main['h1 alt cn-head'] = {
+      pattern: /^.+\n[=]{2,}[ \t]*$/gm,
       inside: {
         'cl cl-hash': /=+[ \t]*$/,
       },
     };
-    grammars.main['h2 alt'] = {
-      pattern: /^.+\n-+[ \t]*$/gm,
+    grammars.main['h2 alt cn-head'] = {
+      pattern: /^.+\n[-]{2,}[ \t]*$/gm,
       inside: {
         'cl cl-hash': /-+[ \t]*$/,
       },
     };
     for (let i = 6; i >= 1; i -= 1) {
-      grammars.main[`h${i}`] = {
+      grammars.main[`h${i} cn-head`] = {
         pattern: new RegExp(`^#{${i}}[ \t].+$`, 'gm'),
         inside: {
           'cl cl-hash': new RegExp(`^#{${i}}`),
@@ -213,7 +213,7 @@ export default {
     };
 
     const rest = {};
-    rest.code = {
+    rest['code cn-code'] = {
       pattern: /(`+)[\s\S]*?\1/g,
       inside: {
         'cl cl-code': /`/,
@@ -306,7 +306,7 @@ export default {
     rest.tag = markup.tag;
     rest.url = urlPattern;
     rest.email = emailPattern;
-    rest.strong = {
+    rest['strong cn-strong'] = {
       pattern: /(^|[^\w*])(__|\*\*)(?![_*])[\s\S]*?\2(?=([^\w*]|$))/gm,
       lookbehind: true,
       inside: {
@@ -377,10 +377,10 @@ export default {
     rest.entity = markup.entity;
 
     for (let c = 6; c >= 1; c -= 1) {
-      grammars.main[`h${c}`].inside.rest = rest;
+      grammars.main[`h${c} cn-head`].inside.rest = rest;
     }
-    grammars.main['h1 alt'].inside.rest = rest;
-    grammars.main['h2 alt'].inside.rest = rest;
+    grammars.main['h1 alt cn-head'].inside.rest = rest;
+    grammars.main['h2 alt cn-head'].inside.rest = rest;
     grammars.table.table.inside.rest = rest;
     grammars.main.rest = rest;
     grammars.list.rest = rest;
@@ -391,13 +391,13 @@ export default {
     }
 
     const restLight = {
-      code: rest.code,
+      code: rest['code cn-code'],
       inlinefn: rest.inlinefn,
       fn: rest.fn,
       link: rest.link,
       linkref: rest.linkref,
     };
-    rest.strong.inside.rest = restLight;
+    rest['strong cn-strong'].inside.rest = restLight;
     rest.em.inside.rest = restLight;
     if (options.del) {
       rest.del.inside.rest = restLight;
@@ -407,10 +407,11 @@ export default {
     }
 
     const inside = {
-      code: rest.code,
+      code: rest['code cn-code'],
       comment: rest.comment,
       tag: rest.tag,
-      strong: rest.strong,
+      // strong: rest.strong,
+      strong: rest['strong cn-strong'],
       em: rest.em,
       del: rest.del,
       sub: rest.sub,

src/styles/base.scss

@@ -29,7 +29,7 @@ pre,
 ul,
 ol,
 dl {
-  margin: 1.2em 0;
+  margin: 0 0 1.1em;
 }
 
 h1,
@@ -38,7 +38,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 1.8em 0;
+  margin: 1.8em 0 0.9em;
   line-height: $line-height-title;
 }
 
@@ -88,13 +88,20 @@ samp {
 
 blockquote {
   color: rgba(0, 0, 0, 0.5);
-  padding-left: 1.5em;
-  border-left: 5px solid rgba(0, 0, 0, 0.1);
+  padding: 0.5em 1em;
+  border-left: 8px solid rgba(0, 0, 0, 0.1);
+  background: #e2e4e9;
+  word-break: break-word !important;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
 
   .app--dark .layout__panel--editor &,
   .app--dark .layout__panel--preview & {
     color: rgba(255, 255, 255, 0.4);
     border-left-color: rgba(255, 255, 255, 0.1);
+    background: #3a3a3c;
   }
 }
 
@@ -136,20 +143,25 @@ table {
   background-color: transparent;
   border-collapse: collapse;
   border-spacing: 0;
+  margin-bottom: 1em;
 }
 
 td,
 th {
-  border-right: 1px solid #dcdcdc;
+  border: 1px solid #c9c9c9;
   padding: 8px 12px;
 
-  &:last-child {
-    border-right: 0;
+  .app--dark & {
+    border: 1px solid #5f5f5f;
   }
 }
 
 td {
-  border-top: 1px solid #dcdcdc;
+  border: 1px solid #c9c9c9;
+
+  .app--dark & {
+    border: 1px solid #5f5f5f;
+  }
 }
 
 mark {

src/styles/markdownHighlighting.scss

@@ -255,6 +255,7 @@
   .email,
   .cl-underlined-text {
     text-decoration: underline;
+    color: #d7a55b;
   }
 
   .linkdef .url {
@@ -290,11 +291,7 @@
     }
 
     .cl-underlined-text {
-      color: $editor-color-light-low;
-
-      .app--dark & {
-        color: $editor-color-dark-low;
-      }
+      color: #d7a55b;
     }
   }
 
@@ -305,6 +302,30 @@
       color: $editor-color-dark;
     }
   }
+
+  .cn-head {
+    color: #dea731;
+
+    .app--dark & {
+      color: #f8bb39;
+    }
+  }
+
+  .cn-strong {
+    color: #db784d;
+
+    .app--dark & {
+      color: #db784d;
+    }
+  }
+
+  .cn-code {
+    color: #59b003;
+
+    .app--dark & {
+      color: #95cc5e;
+    }
+  }
 }
 
 .markdown-highlighting--inline {

src/styles/variables.scss

@@ -3,7 +3,7 @@ $font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console
 $body-color-light: rgba(0, 0, 0, 0.75);
 $body-color-dark: rgba(255, 255, 255, 0.75);
 $code-bg: rgba(0, 0, 0, 0.05);
-$code-dark-bg: rgba(0, 0, 0, 0.2);
+$code-dark-bg: rgba(255, 255, 255, 0.1);
 $line-height-base: 1.67;
 $line-height-title: 1.33;
 $font-size-monospace: 0.85em;
@@ -21,15 +21,15 @@ $navbar-hover-color: #fff;
 $navbar-hover-background: rgba(255, 255, 255, 0.1);
 
 $editor-background-light: #fff;
-$editor-background-dark: #1e1e1e;
+$editor-background-dark: #36312c;
 
 $editor-color-light: rgba(0, 0, 0, 0.8);
-$editor-color-light-low: #000;
+$editor-color-light-low: rgba(0, 0, 0, 0.75);
 $editor-color-light-high: rgba(0, 0, 0, 0.28);
 $editor-color-light-blockquote: rgba(0, 0, 0, 0.48);
 
 $editor-color-dark: rgba(255, 255, 255, 0.8);
-$editor-color-dark-low: #fff;
+$editor-color-dark-low: rgba(255, 255, 255, 0.75);
 $editor-color-dark-high: rgba(255, 255, 255, 0.28);
 $editor-color-dark-blockquote: rgba(255, 255, 255, 0.48);