From 42e0617bde41fb6100b5c93daf7910bde73e701b Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 22 Jun 2020 21:08:36 +0800
Subject: [PATCH] Prettified the inline-code code style.

---
 assets/css/_addon/syntax.scss        | 9 +++++++--
 assets/css/_colors/dark-syntax.scss  | 2 ++
 assets/css/_colors/light-syntax.scss | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/css/_addon/syntax.scss b/assets/css/_addon/syntax.scss
index f3d4832..2248443 100644
--- a/assets/css/_addon/syntax.scss
+++ b/assets/css/_addon/syntax.scss
@@ -39,7 +39,7 @@ html[mode=dark] {
 }
 
 .highlighter-rouge {
-  background: var(--highlight-bg-color);
+  background-color: var(--highlight-bg-color);
   @extend %code-snippet-radius;
   color: var(--highlighter-rouge-color);
   margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -94,16 +94,21 @@ code {
   -moz-hyphens: none;
   hyphens: none;
   &.highlighter-rouge {
-    padding: 2px 4px;
+    padding: 3px 5px;
     margin: 0 .15rem;
     border-radius: 4px;
+    background-color: var(--inline-code-bg);
   }
   @at-root a>&.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
+    color: inherit;
   }
   @at-root a:hover>&.highlighter-rouge {
     border-bottom: none;
   }
+  blockquote &.highlighter-rouge {
+    color: inherit;
+  }
 }
 
 td.rouge-code {
diff --git a/assets/css/_colors/dark-syntax.scss b/assets/css/_colors/dark-syntax.scss
index dfc8c1f..912acbb 100644
--- a/assets/css/_colors/dark-syntax.scss
+++ b/assets/css/_colors/dark-syntax.scss
@@ -83,6 +83,8 @@
   --highlight-lineno-color: #6c6c6d;
   --highlight-lineno-border-color: #3c4042;
 
+  --inline-code-bg: var(--highlight-bg-color);
+
   .highlight {
     .gp { color: #818c96; }
   }
diff --git a/assets/css/_colors/light-syntax.scss b/assets/css/_colors/light-syntax.scss
index 2c65e70..367d9cd 100644
--- a/assets/css/_colors/light-syntax.scss
+++ b/assets/css/_colors/light-syntax.scss
@@ -76,4 +76,5 @@
   --highlight-lineno-color: #c2c6cc;
   --highlight-lineno-border-color: #e9ecef;
 
+  --inline-code-bg: #f3f3f3;
 } // light-syntax