🎨 Style: add github dark dimmed highlight style for gist and inline code (#43)

CHANGELOG.md

@@ -17,7 +17,11 @@ All notable changes to this project will be documented in this file.
 - :sparkles: Feat: add details shortcode ([#68](https://github.com/Lruihao/FixIt/issues/68))
 - :sparkles: Feat: add markdown support for **title** parameter of the admonition shortcode
 - :sparkles: Feat: add 9 newly supported social links ([#17](https://github.com/Lruihao/FixIt/issues/17))
-- :zap: Perf: enhance highlight feature and fix some css bugs ([#43](https://github.com/Lruihao/FixIt/issues/43))
+- :zap: Perf: enhance highlight feature (GitHub syntax supported) and fix some css bugs ([#43](https://github.com/Lruihao/FixIt/issues/43))
+  - Inline Code
+  - Indented Code
+  - Block Fenced Code
+  - gist shortcode
 - :mag: Feat: add 360 and sougou seo support
 - :bug: Fix: remove source map of local libraries to avoid 404 error ([#67](https://github.com/Lruihao/FixIt/issues/67))
 - :fire: Feat: remove shortcode cardlink ([#42](https://github.com/Lruihao/FixIt/issues/42))

assets/css/_partial/_single/_code.scss

@@ -6,13 +6,14 @@ code {
   font-size: $code-font-size;
   font-family: $code-font-family;
   color: $code-color;
-  background-color: #afb8c133;
+  background-color: rgba(175, 184, 193, 0.2);
   border-radius: $global-border-radius;
   @include overflow-wrap(break-word);
   @include line-break(anywhere);
 
   [theme='dark'] & {
     color: $code-color-dark;
+    background-color: rgba(99, 110, 123, 0.4);
   }
 }
 
@@ -27,10 +28,10 @@ pre {
   border-radius: $global-border-radius;
   @include tab-size(4);
 
-  background: $code-background-color;
+  background-color: $code-background-color;
 
   [theme='dark'] & {
-    background: $code-background-color-dark;
+    background-color: $code-background-color-dark;
   }
 
   code {
@@ -38,6 +39,10 @@ pre {
     border-radius: 0;
     background-color: transparent;
     @include max-content(min-width);
+
+    [theme='dark'] & {
+      background-color: transparent;
+    }
   }
 
   img {
@@ -83,12 +88,12 @@ pre {
       line-height: 1.4em;
       border-radius: $global-border-radius;
       color: $code-info-color;
-      background: darken($code-background-color, 3%);
+      background-color: darken($code-background-color, 3%);
       @include transition(border-radius 0.2s ease);
 
       [theme='dark'] & {
         color: $code-info-color-dark;
-        background: darken($code-background-color-dark, 6%);
+        background-color: darken($code-background-color-dark, 6%);
       }
 
       &:hover {
@@ -134,7 +139,7 @@ pre {
         }
       }
     }
-    
+
     // delayed loading table-wrapper
     .table-wrapper {
       max-height: 0;
@@ -148,10 +153,10 @@ pre {
       width: auto;
       overflow: auto;
       display: block;
-      background: $code-background-color;
+      background-color: $code-background-color;
 
       [theme='dark'] & {
-        background: $code-background-color-dark;
+        background-color: $code-background-color-dark;
       }
 
       td {
@@ -196,11 +201,11 @@ pre {
 
     &.open {
       .code-header {
-        background: darken($code-background-color, 6%);
+        background-color: darken($code-background-color, 6%);
         border-radius: $global-border-radius $global-border-radius 0 0;
 
         [theme='dark'] & {
-          background: darken($code-background-color-dark, 3%);
+          background-color: darken($code-background-color-dark, 3%);
         }
       }
 
@@ -268,7 +273,6 @@ pre {
   /* Error */
   .err {
     font-style: italic;
-    background-color: #efd2d2;
     border-bottom: 1px dotted $code-error-color;
   }
   /* GenericDeleted */
@@ -312,172 +316,33 @@ pre {
     border: none;
   }
 
+  .gist-data {
+    background-color: transparent;
+  }
+
   .gist-meta {
     padding: 0.4rem 0.8rem;
-    background-color: darken($code-background-color, 5%);
-
     @include link(false, false);
+    background-color: darken($code-background-color, 5%);
 
     [theme='dark'] & {
       background-color: darken($code-background-color-dark, 5%);
     }
   }
 
-  [theme='dark'] & {
-    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
-    .highlight {
-      background: #141414;
-    }
-    .blob-num,
-    .blob-code-inner,
+  .table-wrapper {
     .highlight,
-    .pl-enm,
-    .pl-ko,
-    .pl-mo,
-    .pl-mp1 .pl-sf,
-    .pl-ms,
-    .pl-pdc1,
-    .pl-scp,
-    .pl-smc,
-    .pl-som,
-    .pl-va,
-    .pl-vpf,
-    .pl-vpu,
-    .pl-mdr {
-      color: #aab1bf;
-    }
-    .pl-mb,
-    .pl-pdb {
-      font-weight: 700;
-    }
-    .pl-c,
-    .pl-c span,
-    .pl-pdc {
-      color: #5b6270;
-      font-style: italic;
-    }
-    .pl-sr .pl-cce {
-      color: #56b5c2;
-      font-weight: 400;
-    }
-    .pl-ef,
-    .pl-en,
-    .pl-enf,
-    .pl-eoai,
-    .pl-kos,
-    .pl-mh .pl-pdh,
-    .pl-mr {
-      color: #61afef;
-    }
-    .pl-ens,
-    .pl-vi {
-      color: #be5046;
-    }
-    .pl-enti,
-    .pl-mai .pl-sf,
-    .pl-ml,
-    .pl-sf,
-    .pl-sr,
-    .pl-sr .pl-sra,
-    .pl-src,
-    .pl-st,
-    .pl-vo {
-      color: #56b5c2;
-    }
-    .pl-eoi,
-    .pl-mri,
-    .pl-pds,
-    .pl-pse .pl-s1,
-    .pl-s,
-    .pl-s1 {
-      color: #97c279;
-    }
-    .pl-k,
-    .pl-kolp,
-    .pl-mc,
-    .pl-pde {
-      color: #c578dd;
-    }
-    .pl-mi,
-    .pl-pdi {
-      color: #c578dd;
-      font-style: italic;
-    }
-    .pl-mp,
-    .pl-stp {
-      color: #818896;
-    }
-    .pl-mdh,
-    .pl-mdi,
-    .pl-mdr {
-      font-weight: 400;
-    }
-    .pl-mdht,
-    .pl-mi1 {
-      color: #97c279;
-      background: #020;
-    }
-    .pl-md,
-    .pl-mdhf {
-      color: #df6b75;
-      background: #200;
-    }
-    .pl-corl {
-      color: #df6b75;
-      text-decoration: underline;
-    }
-    .pl-ib {
-      background: #df6b75;
-    }
-    .pl-ii {
-      background: #e0c184;
-      color: #fff;
-    }
-    .pl-iu {
-      background: #e05151;
-    }
-    .pl-ms1 {
-      color: #aab1bf;
-      background: #373b41;
-    }
-    .pl-c1,
-    .pl-cn,
-    .pl-e,
-    .pl-eoa,
-    .pl-eoac,
-    .pl-eoac .pl-pde,
-    .pl-kou,
-    .pl-mm,
-    .pl-mp .pl-s3,
-    .pl-mq,
-    .pl-s3,
-    .pl-sok,
-    .pl-sv,
-    .pl-mb {
-      color: #d19965;
-    }
-    .pl-enc,
-    .pl-entc,
-    .pl-pse .pl-s2,
-    .pl-s2,
-    .pl-sc,
-    .pl-smp,
-    .pl-sr .pl-sre,
-    .pl-stj,
-    .pl-v,
-    .pl-pdb {
-      color: #e4bf7a;
-    }
-    .pl-ent,
-    .pl-entl,
-    .pl-entm,
-    .pl-mh,
-    .pl-pdv,
-    .pl-smi,
-    .pl-sol,
-    .pl-mdh,
-    .pl-mdi {
-      color: #df6b75;
+    &::-webkit-scrollbar {
+      background-color: #f6f8fa;
+
+      [theme='dark'] & {
+        background-color: #2d333b;
+      }
     }
   }
+
+  [theme='dark'] & {
+    @import './github-dark-dimmed';
+  }
+
 }

assets/css/_partial/_single/_github-dark-dimmed.scss

@@ -0,0 +1,169 @@
+/**
+ * Theme: GitHub Dark Dimmed
+ * Description: Dark Dimmed theme as seen on github.com
+ * Author: github.com
+ * Maintainer: https://github.com/Lruihao/FixIt
+ * Updated: 2022-03-01
+ */
+ & {
+  --color-fg-default: #adbac7;
+  --color-prettylights-syntax-comment: #768390;
+  --color-prettylights-syntax-constant: #6cb6ff;
+  --color-prettylights-syntax-entity: #dcbdfb;
+  --color-prettylights-syntax-storage-modifier-import: #adbac7;
+  --color-prettylights-syntax-entity-tag: #8ddb8c;
+  --color-prettylights-syntax-keyword: #f47067;
+  --color-prettylights-syntax-string: #96d0ff;
+  --color-prettylights-syntax-variable: #f69d50;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  --color-prettylights-syntax-invalid-illegal-bg: #922323;
+  --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  --color-prettylights-syntax-string-regexp: #8ddb8c;
+  --color-prettylights-syntax-markup-list: #eac55f;
+  --color-prettylights-syntax-markup-heading: #316dca;
+  --color-prettylights-syntax-markup-italic: #adbac7;
+  --color-prettylights-syntax-markup-bold: #adbac7;
+  --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  --color-prettylights-syntax-markup-deleted-bg: #78191b;
+  --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  --color-prettylights-syntax-markup-changed-text: #ffddb0;
+  --color-prettylights-syntax-markup-changed-bg: #682d0f;
+  --color-prettylights-syntax-markup-ignored-text: #adbac7;
+  --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  --color-prettylights-syntax-brackethighlighter-angle: #768390;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+  --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+
+  .blob-num,
+  .blob-code-inner {
+    color: val(--color-fg-default);
+  }
+
+  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: var(--color-prettylights-syntax-comment);
+  }
+
+  .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
+  .pl-s .pl-v /* string variable */ {
+    color: var(--color-prettylights-syntax-constant);
+  }
+
+  .pl-e /* entity */,
+  .pl-en /* entity.name */ {
+    color: var(--color-prettylights-syntax-entity);
+  }
+
+  .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+  .pl-s .pl-s1 /* string source */ {
+    color: var(--color-prettylights-syntax-storage-modifier-import);
+  }
+
+  .pl-ent /* entity.name.tag, markup.quote */ {
+    color: var(--color-prettylights-syntax-entity-tag);
+  }
+
+  .pl-k /* keyword, storage, storage.type */ {
+    color: var(--color-prettylights-syntax-keyword);
+  }
+
+  .pl-s /* string */,
+  .pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+  .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+  .pl-sr /* string.regexp */,
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */,
+  .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+  .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+    color: var(--color-prettylights-syntax-string);
+  }
+
+  .pl-v /* variable */,
+  .pl-smw /* sublimelinter.mark.warning */ {
+    color: var(--color-prettylights-syntax-variable);
+  }
+
+  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+  }
+
+  .pl-ii /* invalid.illegal */ {
+    color: var(--color-prettylights-syntax-invalid-illegal-text);
+    background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+  }
+
+  .pl-c2 /* carriage-return */ {
+    color: var(--color-prettylights-syntax-carriage-return-text);
+    background-color: var(--color-prettylights-syntax-carriage-return-bg);
+  }
+
+  .pl-c2::before /* carriage-return */ {
+    content: '^M';
+  }
+
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-string-regexp);
+  }
+
+  .pl-ml /* markup.list */ {
+    color: var(--color-prettylights-syntax-markup-list);
+  }
+
+  .pl-mh /* markup.heading */,
+  .pl-mh .pl-en /* markup.heading entity.name */,
+  .pl-ms /* meta.separator */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-markup-heading);
+  }
+
+  .pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: var(--color-prettylights-syntax-markup-italic);
+  }
+
+  .pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-markup-bold);
+  }
+
+  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: var(--color-prettylights-syntax-markup-deleted-text);
+    background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: var(--color-prettylights-syntax-markup-inserted-text);
+    background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+  }
+
+  .pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: var(--color-prettylights-syntax-markup-changed-text);
+    background-color: var(--color-prettylights-syntax-markup-changed-bg);
+  }
+
+  .pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: var(--color-prettylights-syntax-markup-ignored-text);
+    background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+  }
+
+  .pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: var(--color-prettylights-syntax-meta-diff-range);
+  }
+
+  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: var(--color-prettylights-syntax-brackethighlighter-angle);
+  }
+
+  .pl-sg /* sublimelinter.gutter-mark */ {
+    color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+  }
+
+  .pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: var(--color-prettylights-syntax-constant-other-reference-link);
+  }
+}