From 7dc7a7efc88e57e3ad71868e2d7e391c58ef0de1 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 9 Sep 2021 21:07:07 +0800
Subject: [PATCH] Add code block header

---
 _includes/refactor-content.html |  9 ++++--
 _sass/addon/syntax.scss         | 50 +++++++++++++++++++--------------
 _sass/colors/dark-syntax.scss   | 30 +++++++++++---------
 _sass/colors/light-syntax.scss  |  4 ++-
 _sass/layout/post.scss          | 10 -------
 5 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 80844b9..cd04c11 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -113,8 +113,13 @@
       {% assign _new_content = _snippet %}
     {% else %}
       {% assign _lang = _snippet | split: ' ' | first %}
-      {% capture _tag_head %}<div lang="{{_lang}}" class="language-{% endcapture %}
-      {% assign _new_content = _new_content | append: _tag_head | append: _snippet %}
+      {% capture _tag_head %}<div class="language-{% endcapture %}
+      {% assign _replacement = '-rouge"><div class="code-header" data-lang="'
+          | append: _lang
+          | append: '"></div><div class="highlight">'
+      %}
+      {% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
+      {% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}
     {% endif %}
   {% endfor %}
 
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 246c1a7..6cc8d08 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -27,16 +27,18 @@ html[mode=dark] {
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 6px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 1.5rem;
+  padding: 1.2rem;
 }
 
 div > pre {
@@ -86,12 +88,10 @@ div > pre {
   }
 
   .lineno {
-    margin-left: 0.2rem;
     padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -135,7 +135,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.5rem 1.5rem 1.5rem 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -162,25 +162,33 @@ div {
   }
 }
 
-div[class^='language-']::before {
-  content: attr(lang);
-  position: absolute;
-  right: 2rem;
-  margin-top: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--highlight-lineno-color);
-  text-transform: uppercase;
-}
+.code-header {
+  background: var(--code-header-bg);
+  border-top-left-radius: $code-radius;
+  border-top-right-radius: $code-radius;
 
-@media (min-width: 768px) {
-  div[class^='language-']::before {
-    right: 3.1rem;
+  // language badge
+  &::before {
+    content: attr(data-lang);
+    color: var(--lang-badge-color);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding-left: 1em;
   }
 }
 
-@media (min-width: 1650px) {
-  div[class^='language-']::before {
-    right: 3.5rem;
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
+
+      border-radius: 0;
+
+      .code-header {
+        border-radius: 0;
+        padding: 0 0.4rem;
+      }
+    }
   }
 }
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index 6457e7c..c07dc1c 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -3,20 +3,6 @@
  */
 
 @mixin dark-syntax {
-  /* -----  My styles ------ */
-  --highlight-bg-color: #252525;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #303435;
-  --inline-code-bg: #272822;
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  pre { color: #bfbfbf; } /* override Bootstrap */
-  kbd { background-color: black; }
-
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   .highlight pre { background-color: var(--highlight-bg-color); }
   .highlight .hll { background-color: var(--highlight-bg-color); }
@@ -81,4 +67,20 @@
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
   .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
+
+  /* -----  custom styles ------ */
+
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --code-header-bg: #353535;
+  --lang-badge-color: #6c6c6d;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
 }
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index d2df4fd..cb8d49a 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -70,6 +70,8 @@
   --highlight-bg-color: #f7f7f7;
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
   --inline-code-bg: #f3f3f3;
+  --code-header-bg: #eaeaea;
+  --lang-badge-color: #a4a7ab;
+
 } // light-syntax
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index b7cefca..6d111ac 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -299,16 +299,6 @@
       margin-top: 1rem;
     }
   }
-
-  .post-content > div[class^='language-'] {
-    @include ml-mr(-1.25rem);
-
-    border-radius: 0;
-    &::before { // the lang badge
-      right: 1rem;
-    }
-  }
-
 }
 
 @media all and (max-width: 768px) {