feat: Add three styles of code block to choose from

liuyib · Jan 14, 2020 · ac44aee · ac44aee
1 parent fc39088
commit ac44aee
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 71 deletions.
diff --git a/_config.yml b/_config.yml
@@ -293,6 +293,36 @@ reading_progress:
   # Support for all types of CSS size units.
   height: 1px
 
+# ---------------------------------------------------------------
+# Page config
+# ---------------------------------------------------------------
+
+codeblock:
+  # The style of code block.
+  # values:
+  #   - default
+  #   - simple
+  #   - carbon
+  style: default
+  # The theme of code highlight.
+  # values:
+  #   - light
+  #   - dark
+  #   - ocean
+  highlight: light
+  # Whether the code to newline.
+  word_wrap: false
+
+# Add a line below h1, h2.
+heading_line: true
+
+# Reward
+reward:
+  enable: true
+  # Fill in your QR Code for collecting money.
+  alipay:
+  wechat:
+
 # ---------------------------------------------------------------
 # Post config
 # ---------------------------------------------------------------
@@ -373,26 +403,6 @@ stick_top:
   # Please use the quote to wrap value (All CSS size units are supported).
   color: "#999"
 
-# Code highlight.
-# values:
-#   - light
-#   - dark
-#   - ocean
-highlight_theme: light
-
-# Code wrap.
-code_word_wrap: false
-
-# Add a line below h1, h2.
-heading_line: true
-
-# Reward
-reward:
-  enable: false
-  # Fill in your QR Code for collecting money.
-  alipay:
-  wechat:
-
 # ---------------------------------------------------------------
 # Comment config
 # ---------------------------------------------------------------

diff --git a/layout/_partials/config.pug b/layout/_partials/config.pug
@@ -37,6 +37,15 @@
     });
   }
 
+  var codeStyle = (theme.codeblock && theme.codeblock.style) || 'default';
+  var highlight = (theme.codeblock && theme.codeblock.highlight) || 'light';
+  var wordWrap = (theme.codeblock && theme.codeblock.word_wrap) || false;
+  var codeblock = JSON.stringify({
+    style: codeStyle,
+    highlight: highlight,
+    word_wrap: wordWrap
+  });
+
   var header = "undefined";
   if (theme.header) {
     var isScrollDownIcon =
@@ -139,6 +148,7 @@ script.
     post_widget: !{ post_widget },
     night_mode: !{ night_mode },
     back2top: !{ back2top },
+    codeblock: !{ codeblock },
     reward: !{ theme.reward.enable },
     fancybox: !{ theme.fancybox },
     zoom_image: !{ zoom_image },

diff --git a/source/css/_common/components/highlight/diff.styl b/source/css/_common/components/highlight/diff.styl
@@ -1,18 +1,18 @@
-highlight_theme = hexo-config('highlight_theme');
+highlight_theme = hexo-config('codeblock.highlight') || 'light';
 
 if (highlight_theme == 'light') {
-  $highlight-addition-color    = #25a225;
+  $highlight-addition-color    = #229922;
   $highlight-addition-bg-color = #f0fff4;
-  $highlight-deletion-color    = #dc4545;
+  $highlight-deletion-color    = #dd4444;
   $highlight-deletion-bg-color = #ffeef0;
 } else if (highlight_theme == 'dark') {
-  $highlight-addition-color    = #25a225;
+  $highlight-addition-color    = #229922;
   $highlight-addition-bg-color = transparent;
-  $highlight-deletion-color    = #dc4545;
+  $highlight-deletion-color    = #dd4444;
   $highlight-deletion-bg-color = transparent;
 } else if (highlight_theme == 'ocean') {
-  $highlight-addition-color    = #25a225;
+  $highlight-addition-color    = #229922;
   $highlight-addition-bg-color = transparent;
-  $highlight-deletion-color    = #dc4545;
+  $highlight-deletion-color    = #dd4444;
   $highlight-deletion-bg-color = transparent;
 }
diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl
@@ -2,7 +2,8 @@
 @require './diff.styl';
 
 languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'coffeescript' 'java' 'bash' 'markdown' 'kotlin' 'c' 'c\+\+' 'c#' 'go' 'golang' 'less' 'sass' 'scss' 'stylus' 'styl' 'typescript' 'ts' 'yml' 'yaml' 'matlab' 'objectivec' 'makefile' 'scala' 'gradle' 'swift' 'rust' 'lua' 'lisp' 'fortran' 'dart' 'perl';
-wordWrap = hexo-config('code_word_wrap');
+codeStyle = hexo-config('codeblock.style') || 'default';
+wordWrap = hexo-config('codeblock.word_wrap') || false;
 
 for lang in languages {
   .highlight{'.' + lang} {
@@ -25,6 +26,10 @@ for lang in languages {
   color: $highlight-color;
   background-color: $highlight-background;
 
+  if (codeStyle == 'simple' || (codeStyle == 'carbon')) {
+    border-radius: .25rem;
+  }
+
   pre,
   code {
     font-family: $font-family-code;
@@ -45,12 +50,20 @@ for lang in languages {
 
   figcaption {
     position: relative;
-    padding: .1rem 0;
     width: 100%;
     color: $highlight-header-color;
     background-color: $highlight-header-bg-color;
     clearfix();
 
+    if (codeStyle == 'carbon') {
+      border-top-left-radius: .25rem;
+      border-top-right-radius: .25rem;
+    }
+
+    if (codeStyle == 'default') {
+      padding: .1rem 0;
+    }
+
     span {
       &:first-child {
         float: left;
@@ -66,21 +79,45 @@ for lang in languages {
   }
 
   figcaption.custom {
-    padding: .1rem 0;
     min-height: 1.5rem;
 
+    if (codeStyle == 'carbon') {
+      display: flex;
+    }
+
     .custom-lang {
       float: left;
       margin: 0 .6rem;
       color: $highlight-code-lang-color;
     }
-  }
 
-  .code {
-    if (wordWrap) {
-      padding: 0;
-    } else {
-      padding: 0 0 0 .4rem;
+    if (codeStyle == 'carbon') {
+      .custom-carbon {
+        display: flex;
+        margin: .2rem 0 0 .5rem;
+        font-size: 0;
+        align-items: center;
+
+        &-dot {
+          display: inline-block;
+          margin: 0 4px;
+          border-radius: 50%;
+          width: 10px;
+          height: 10px;
+
+          &--red {
+            background-color: #ff5f56;
+          }
+
+          &--yellow {
+            background-color: #ffbd2e;
+          }
+
+          &--green {
+            background-color: #27c93f;
+          }
+        }
+      }
     }
   }
 
@@ -89,7 +126,7 @@ for lang in languages {
     width: 1rem;
     background-color: $highlight-side-bg-color;
 
-    if (wordWrap) {
+    if (wordWrap || (codeStyle == 'simple' || (codeStyle == 'carbon'))) {
       display: none;
     }
 
@@ -100,12 +137,24 @@ for lang in languages {
     }
   }
 
-  if (wordWrap) {
+  .code {
+    if (codeStyle == 'simple' || (codeStyle == 'carbon')) {
+      padding: .5rem .75rem;
+    } else if (codeStyle == 'default') {
+      if (wordWrap) {
+        padding: 0;
+      } else {
+        padding: .5rem .6rem;
+      }
+    }
+  }
+
+  if (wordWrap && (codeStyle == 'default')) {
     .line {
       &::before {
         content: counter(line);
         display: inline-block;
-        margin: 0 .4rem 0 0;
+        margin-right: .5rem;
         box-sizing: content-box;
         padding: 0 .8rem 0 .4rem;
         min-width: 1rem;
@@ -220,7 +269,7 @@ for lang in languages {
 
 if (hexo-config('night_mode.enable')) {
   .nightmode {
-    if (hexo-config('highlight_theme') == 'light') {
+    if (hexo-config('codeblock.highlight') == 'light') {
       .diff {
         .addition {
           background-color: transparent;

diff --git a/source/css/_common/components/highlight/theme.styl b/source/css/_common/components/highlight/theme.styl
@@ -1,8 +1,9 @@
-highlight_theme = hexo-config('highlight_theme');
+codeStyle = hexo-config('codeblock.style') || 'default';
+highlight_theme = hexo-config('codeblock.highlight') || 'light';
 
 if (highlight_theme == 'light') {
   $highlight-color             = #757575;
-  $highlight-background        = #f6f8fa;
+  $highlight-background        = #f8f8f8;
   $highlight-side-color        = lighten($highlight-color, 60%);
   $highlight-side-bg-color     = darken($highlight-background, 2%);
   $highlight-header-color      = $highlight-color;
@@ -71,3 +72,7 @@ if (highlight_theme == 'ocean') {
   $highlight-blue            = #6699cc;
   $highlight-purple          = #c594c5;
 }
+
+if (codeStyle == 'carbon') {
+  $highlight-header-bg-color = $highlight-background;
+}
diff --git a/source/css/_common/components/post/post-timeline.styl b/source/css/_common/components/post/post-timeline.styl
@@ -73,7 +73,7 @@
     }
 
     &-title__a {
-      color: var(--color-gray-700);
+      color: var(--color-gray-900);
       transition: color .2s ease;
     }
 

diff --git a/source/css/_common/components/sidebar/index.styl b/source/css/_common/components/sidebar/index.styl
@@ -11,11 +11,10 @@ if (hexo-config('sidebar.enable')) {
     }
 
     &-inner {
-      border-radius: 5px;
+      layout-card();
       padding: 1rem;
       width: convert(hexo-config('sidebar.width') || '$sidebar-width');
       font-size: $font-size-sidebar;
-      background-color: var(--color-gray-150);
 
       &.sticky {
         position: fixed;

diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
@@ -2,7 +2,7 @@
   --color-gray-100: #ffffff;
   --color-gray-150: #f9f9f9;
   --color-gray-200: #f5f6f7;
-  --color-gray-250: #eaecef;
+  --color-gray-250: #efefef;
   --color-gray-300: #dadde1;
   --color-gray-400: #ccd0d5;
   --color-gray-500: #bec3c9;
@@ -14,6 +14,7 @@
   --color-gray-900: #2c323c;
   --color-gray-950: #1c1e21;
   --color-font: var(--color-gray-900);
+  --color-card: var(--color-gray-100);
   --color-blue-200: #e7f7ff;
 }
 
@@ -33,6 +34,7 @@ html.nightmode {
   --color-gray-900: #f9f9f9;
   --color-gray-950: #ffffff;
   --color-font: var(--color-gray-600);
+  --color-card: var(--color-gray-150);
   --color-blue-200: #444950;
 }
 
@@ -59,7 +61,7 @@ body {
   font-size: $font-size-base;
   line-height: $line-height-base;
   color: var(--color-font);
-  background-color: var(--color-gray-300);
+  background-color: var(--color-gray-250);
 }
 
 h1,
@@ -134,7 +136,7 @@ code {
   font-size: .95em;
   word-wrap: break-word;
   color: var(--color-gray-700);
-  background-color: var(--color-gray-250);
+  background-color: var(--color-gray-200);
 }
 
 dt {

diff --git a/source/css/_mixins/index.styl b/source/css/_mixins/index.styl
@@ -18,7 +18,7 @@ word-wrap() {
 layout-card() {
   border-radius: 5px;
   padding: 1rem 2rem;
-  background-color: var(--color-gray-150);
+  background-color: var(--color-card);
 }
 
 fontawesome-base() {

diff --git a/source/js/stun-boot.js b/source/js/stun-boot.js
@@ -11,19 +11,30 @@ $(document).ready(function () {
   }
 
   Stun.utils.pjaxReloadBoot = function () {
-    this.addCopyButton();
-    this.registerCopyEvent();
-
-    CONFIG.reward && this.registerShowReward();
-    CONFIG.lazyload && this.lazyLoadImage();
-    CONFIG.gallery_waterfall && this.showImageToWaterfall();
-
+    if (CONFIG.codeblock) {
+      var codeStyle = CONFIG.codeblock.style;
+
+      if (codeStyle === 'default') {
+        this.addCodeHeader();
+        this.addCopyButton();
+        this.registerCopyEvent();
+      } else if (codeStyle === 'carbon') {
+        this.addCodeHeader('carbon');
+      }
+    }
+    if (CONFIG.reward) {
+      this.registerShowReward();
+    }
+    if (CONFIG.lazyload) {
+      this.lazyLoadImage();
+    }
+    if (CONFIG.gallery_waterfall) {
+      this.showImageToWaterfall();
+    }
     if (CONFIG.external_link) {
       var CONTAINER = '.archive, .post-header-title';
-
       this.addIconToExternalLink(CONTAINER);
     }
-
     if (CONFIG.fancybox) {
       this.wrapImageWithFancyBox();
     } else if (CONFIG.zoom_image) {