feat: highlight theme

_config.yml

@@ -17,6 +17,7 @@
 ## => Site Settings
 ##############################
 text_skin: default # "default" (default), "dark", "forest", "ocean", "chocolate", "orange"
+highlight_theme: default # "default" (default), "tomorrow", "tomorrow-night", "tomorrow-night-eighties", "tomorrow-night-blue", "tomorrow-night-bright"
 url     : # the base hostname & protocol for your site e.g. https://www.someone.com
 baseurl : # does not include hostname
 title   : Your Site Title

_data/variables.yml

@@ -1,5 +1,6 @@
 default:
   text_skin: default
+  highlight_theme: default
   lang: en
   paths:
     root: /

_layouts/page.html

@@ -101,7 +101,8 @@
                     {%- if site.repository and site.repository_tree -%}
                       {%- assign __locale = site.data.locale.POST_ON_GITHUB -%}
                       {%- include snippets/locale-to-string.html -%}
-                      &nbsp<a class="edit-on-github"
+                      <span class="split-space">&nbsp</span>
+                      <a class="edit-on-github"
                         title="{{ __return }}"
                         href="https://github.com/{{ site.repository }}/tree/{{ site.repository_tree }}/{{ page.path }}">
                         <i class="far fa-edit"></i></a>

_sass/common/components/_toc.scss

@@ -3,7 +3,7 @@ ul.toc {
   margin: 0;
   list-style-type: none;
   & > li {
-    margin: .1rem 0;
+    margin: .2rem 0;
     &.active {
       a {
         background-color: $main-color-3;
@@ -64,13 +64,13 @@ ul.toc {
   .toc-h1 {
     &, a {
       font-size: map-get($base, font-size);
-      line-height: map-get($base, line-height-lg);
+      line-height: map-get($base, line-height);
     }
   }
   .toc-h2 {
     &, a {
       font-size: map-get($base, font-size-sm);
-      line-height: map-get($base, line-height);
+      line-height: map-get($base, line-height-sm);
     }
   }
   .toc-h3,

_sass/components/_article.content.scss

@@ -159,17 +159,15 @@
       margin-bottom: 0;
     }
     li {
-      margin: 0;
       p {
-        margin: 0;
+        margin: map-get($base, vertical-space);
       }
     }
   }
   dl {
     dt, dd {
-      margin: 0;
       p {
-        margin: 0;
+        margin: map-get($base, vertical-space);
       }
     }
     dt {

_sass/layout/_archive.scss

@@ -20,6 +20,7 @@
       margin: 0;
       border: 2px solid $border-color;
       border-radius: map-get($button, pill-radius);
+      background-color: transparent;
       @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
       @include focus {
         box-shadow: 0 0 0 2px rgba($border-color, .4);

_sass/layout/_page.scss

@@ -40,6 +40,9 @@
     header, h1 {
       display: inline;
     }
+    .split-space {
+      @include user-select(none);
+    }
     .edit-on-github {
       text-decoration: none !important;
     }

_sass/skins/_chocolate.scss

@@ -39,10 +39,10 @@ $mask-color:       rgba(#000, .8);
 $select-color:     rgba($main-color-3, .5);
 
 // function colors
-$green:           #57c22d;
-$blue:            #2593fc;
-$yellow:          #f8ac30;
-$red:             #f22635;
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
 $text-color-function: #fff;
 
 // logo colors

_sass/skins/_dark.scss

@@ -39,10 +39,10 @@ $mask-color:       rgba(#000, .8);
 $select-color:     rgba($main-color-1, .5);
 
 // function colors
-$green:           #5c7829;
-$blue:            #087099;
-$yellow:          #b7b327;
-$red:             #cc3333;
+$green:           #74a851;
+$blue:            #3b8e98;
+$yellow:          #d8a348;
+$red:             #d23442;
 $text-color-function: rgba(#fff, .9);
 
 // logo colors

_sass/skins/_default.scss

@@ -39,10 +39,10 @@ $mask-color:       rgba(#000, .8);
 $select-color:     rgba($main-color-1, .5);
 
 // function colors
-$green:           #57c22d;
-$blue:            #2593fc;
-$yellow:          #f8ac30;
-$red:             #f22635;
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
 $text-color-function: #fff;
 
 // logo colors

_sass/skins/_forest.scss

@@ -39,10 +39,10 @@ $mask-color:       rgba(#000, .8);
 $select-color:     rgba($main-color-1, .5);
 
 // function colors
-$green:           #57c22d;
-$blue:            #2593fc;
-$yellow:          #f8ac30;
-$red:             #f22635;
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
 $text-color-function: #fff;
 
 // logo colors

_sass/skins/_ocean.scss

@@ -39,10 +39,10 @@ $mask-color:       rgba(#000, .8);
 $select-color:     rgba($main-color-1, .5);
 
 // function colors
-$green:           #57c22d;
-$blue:            #2593fc;
-$yellow:          #f8ac30;
-$red:             #f22635;
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
 $text-color-function: #fff;
 
 // logo colors
@@ -55,4 +55,4 @@ $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
 
-@import './highlight/tomorrow';
+@import './highlight/tomorrow-night-blue';

_sass/skins/_orange.scss

@@ -39,10 +39,10 @@ $mask-color:       rgba(#000, .8);
 $select-color:     rgba($main-color-3, .5);
 
 // function colors
-$green:           #57c22d;
-$blue:            #2593fc;
-$yellow:          #f8ac30;
-$red:             #f22635;
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
 $text-color-function: #fff;
 
 // logo colors

_sass/skins/highlight/_tomorrow-night-blue.scss

@@ -0,0 +1,2 @@
+@import "./tomorrow/night-blue";
+@import "./tomorrow/highlight";

_sass/skins/highlight/_tomorrow-night-bright.scss

@@ -0,0 +1,2 @@
+@import "./tomorrow/night-bright";
+@import "./tomorrow/highlight";

_sass/skins/highlight/_tomorrow-night-eighties.scss

@@ -0,0 +1,2 @@
+@import "./tomorrow/night-eighties";
+@import "./tomorrow/highlight";

_sass/skins/highlight/_tomorrow-night.scss

@@ -1,65 +1,2 @@
-.highlight {
-  .c { color: #969896 } /* Comment */
-  .err { color: #cc6666 } /* Error */
-  .k { color: #b294bb } /* Keyword */
-  .l { color: #de935f } /* Literal */
-  .n { color: #c5c8c6 } /* Name */
-  .o { color: #8abeb7 } /* Operator */
-  .p { color: #c5c8c6 } /* Punctuation */
-  .cm { color: #969896 } /* Comment.Multiline */
-  .cp { color: #969896 } /* Comment.Preproc */
-  .c1 { color: #969896 } /* Comment.Single */
-  .cs { color: #969896 } /* Comment.Special */
-  .gd { color: #cc6666 } /* Generic.Deleted */
-  .ge { font-style: italic } /* Generic.Emph */
-  .gh { color: #c5c8c6; font-weight: bold } /* Generic.Heading */
-  .gi { color: #b5bd68 } /* Generic.Inserted */
-  .gp { color: #969896; font-weight: bold } /* Generic.Prompt */
-  .gs { font-weight: bold } /* Generic.Strong */
-  .gu { color: #8abeb7; font-weight: bold } /* Generic.Subheading */
-  .kc { color: #b294bb } /* Keyword.Constant */
-  .kd { color: #b294bb } /* Keyword.Declaration */
-  .kn { color: #8abeb7 } /* Keyword.Namespace */
-  .kp { color: #b294bb } /* Keyword.Pseudo */
-  .kr { color: #b294bb } /* Keyword.Reserved */
-  .kt { color: #f0c674 } /* Keyword.Type */
-  .ld { color: #b5bd68 } /* Literal.Date */
-  .m { color: #de935f } /* Literal.Number */
-  .s { color: #b5bd68 } /* Literal.String */
-  .na { color: #81a2be } /* Name.Attribute */
-  .nb { color: #c5c8c6 } /* Name.Builtin */
-  .nc { color: #f0c674 } /* Name.Class */
-  .no { color: #cc6666 } /* Name.Constant */
-  .nd { color: #8abeb7 } /* Name.Decorator */
-  .ni { color: #c5c8c6 } /* Name.Entity */
-  .ne { color: #cc6666 } /* Name.Exception */
-  .nf { color: #81a2be } /* Name.Function */
-  .nl { color: #c5c8c6 } /* Name.Label */
-  .nn { color: #f0c674 } /* Name.Namespace */
-  .nx { color: #81a2be } /* Name.Other */
-  .py { color: #c5c8c6 } /* Name.Property */
-  .nt { color: #8abeb7 } /* Name.Tag */
-  .nv { color: #cc6666 } /* Name.Variable */
-  .ow { color: #8abeb7 } /* Operator.Word */
-  .w { color: #c5c8c6 } /* Text.Whitespace */
-  .mf { color: #de935f } /* Literal.Number.Float */
-  .mh { color: #de935f } /* Literal.Number.Hex */
-  .mi { color: #de935f } /* Literal.Number.Integer */
-  .mo { color: #de935f } /* Literal.Number.Oct */
-  .sb { color: #b5bd68 } /* Literal.String.Backtick */
-  .sc { color: #c5c8c6 } /* Literal.String.Char */
-  .sd { color: #969896 } /* Literal.String.Doc */
-  .s2 { color: #b5bd68 } /* Literal.String.Double */
-  .se { color: #de935f } /* Literal.String.Escape */
-  .sh { color: #b5bd68 } /* Literal.String.Heredoc */
-  .si { color: #de935f } /* Literal.String.Interpol */
-  .sx { color: #b5bd68 } /* Literal.String.Other */
-  .sr { color: #b5bd68 } /* Literal.String.Regex */
-  .s1 { color: #b5bd68 } /* Literal.String.Single */
-  .ss { color: #b5bd68 } /* Literal.String.Symbol */
-  .bp { color: #c5c8c6 } /* Name.Builtin.Pseudo */
-  .vc { color: #cc6666 } /* Name.Variable.Class */
-  .vg { color: #cc6666 } /* Name.Variable.Global */
-  .vi { color: #cc6666 } /* Name.Variable.Instance */
-  .il { color: #de935f } /* Literal.Number.Integer.Long */
-}
+@import "./tomorrow/night";
+@import "./tomorrow/highlight";

_sass/skins/highlight/_tomorrow.scss

@@ -1,69 +1,2 @@
-/**
- * Syntax highlighting styles
- */
-
- .highlight {
-  .c { color: #8e908c } /* Comment */
-  .err { color: #c82829 } /* Error */
-  .k { color: #8959a8 } /* Keyword */
-  .l { color: #f5871f } /* Literal */
-  .n { color: #4d4d4c } /* Name */
-  .o { color: #3e999f } /* Operator */
-  .p { color: #4d4d4c } /* Punctuation */
-  .cm { color: #8e908c } /* Comment.Multiline */
-  .cp { color: #8e908c } /* Comment.Preproc */
-  .c1 { color: #8e908c } /* Comment.Single */
-  .cs { color: #8e908c } /* Comment.Special */
-  .gd { color: #c82829 } /* Generic.Deleted */
-  .ge { font-style: italic } /* Generic.Emph */
-  .gh { color: #4d4d4c; font-weight: bold } /* Generic.Heading */
-  .gi { color: #718c00 } /* Generic.Inserted */
-  .gp { color: #8e908c; font-weight: bold } /* Generic.Prompt */
-  .gs { font-weight: bold } /* Generic.Strong */
-  .gu { color: #3e999f; font-weight: bold } /* Generic.Subheading */
-  .kc { color: #8959a8 } /* Keyword.Constant */
-  .kd { color: #8959a8 } /* Keyword.Declaration */
-  .kn { color: #3e999f } /* Keyword.Namespace */
-  .kp { color: #8959a8 } /* Keyword.Pseudo */
-  .kr { color: #8959a8 } /* Keyword.Reserved */
-  .kt { color: #eab700 } /* Keyword.Type */
-  .ld { color: #718c00 } /* Literal.Date */
-  .m { color: #f5871f } /* Literal.Number */
-  .s { color: #718c00 } /* Literal.String */
-  .na { color: #4271ae } /* Name.Attribute */
-  .nb { color: #4d4d4c } /* Name.Builtin */
-  .nc { color: #eab700 } /* Name.Class */
-  .no { color: #c82829 } /* Name.Constant */
-  .nd { color: #3e999f } /* Name.Decorator */
-  .ni { color: #4d4d4c } /* Name.Entity */
-  .ne { color: #c82829 } /* Name.Exception */
-  .nf { color: #4271ae } /* Name.Function */
-  .nl { color: #4d4d4c } /* Name.Label */
-  .nn { color: #eab700 } /* Name.Namespace */
-  .nx { color: #4271ae } /* Name.Other */
-  .py { color: #4d4d4c } /* Name.Property */
-  .nt { color: #3e999f } /* Name.Tag */
-  .nv { color: #c82829 } /* Name.Variable */
-  .ow { color: #3e999f } /* Operator.Word */
-  .w { color: #4d4d4c } /* Text.Whitespace */
-  .mf { color: #f5871f } /* Literal.Number.Float */
-  .mh { color: #f5871f } /* Literal.Number.Hex */
-  .mi { color: #f5871f } /* Literal.Number.Integer */
-  .mo { color: #f5871f } /* Literal.Number.Oct */
-  .sb { color: #718c00 } /* Literal.String.Backtick */
-  .sc { color: #4d4d4c } /* Literal.String.Char */
-  .sd { color: #8e908c } /* Literal.String.Doc */
-  .s2 { color: #718c00 } /* Literal.String.Double */
-  .se { color: #f5871f } /* Literal.String.Escape */
-  .sh { color: #718c00 } /* Literal.String.Heredoc */
-  .si { color: #f5871f } /* Literal.String.Interpol */
-  .sx { color: #718c00 } /* Literal.String.Other */
-  .sr { color: #718c00 } /* Literal.String.Regex */
-  .s1 { color: #718c00 } /* Literal.String.Single */
-  .ss { color: #718c00 } /* Literal.String.Symbol */
-  .bp { color: #4d4d4c } /* Name.Builtin.Pseudo */
-  .vc { color: #c82829 } /* Name.Variable.Class */
-  .vg { color: #c82829 } /* Name.Variable.Global */
-  .vi { color: #c82829 } /* Name.Variable.Instance */
-  .il { color: #f5871f } /* Literal.Number.Integer.Long */
-}
+@import "./tomorrow/default";
+@import "./tomorrow/highlight";

_sass/skins/highlight/tomorrow/_default.scss

@@ -0,0 +1,10 @@
+$highlight-background   : #f7f7f7;
+$highlight-foreground   : #4d4d4c;
+$highlight-comment      : #8e908c;
+$highlight-red          : #c82829;
+$highlight-orange       : #f5871f;
+$highlight-yellow       : #eab700;
+$highlight-green        : #718c00;
+$highlight-aqua         : #3e999f;
+$highlight-blue         : #4271ae;
+$highlight-purple       : #8959a8;