feat: add color to inline code (#1592)

* feat: add color to inline code * set color such as css vars * add border radius
expressjs · Sep 8, 2024 · 896e9da · 896e9da
1 parent a55eccd
commit 896e9da
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/css/dark-theme.css b/css/dark-theme.css
@@ -6,6 +6,7 @@
   --notice-accent: rgb(249, 232, 195);
   --warn-bg: rgb(78, 34, 50);
   --warn-accent: rgb(249, 195, 214);
+  --code-bg: #0d1117;
 }
 
 :root {
@@ -270,4 +271,8 @@ html.dark-mode #blog-side-menu-container h3 a{
 }
 html.dark-mode #blog-side-menu > li > a{
   color: var(--dark_inner_text);
-}
+}
+
+html.dark-mode pre code {
+  background-color: inherit;
+} 
diff --git a/css/style.css b/css/style.css
@@ -13,6 +13,7 @@
   --notice-accent: rgb(115, 82, 13);
   --warn-bg: rgb(250, 209, 223);
   --warn-accent: rgb(138, 15, 58);
+  --code-bg: #f0f1f3;
 }
 
 * {
@@ -353,6 +354,16 @@ pre {
 pre code {
   overflow: scroll;
   word-break: break-all;
+  background-color: inherit;
+}
+
+code {
+  background-color: var(--code-bg);
+  margin-block: -.125rem;
+  font-size: 13px;
+  padding: .125rem .375rem;
+  line-height: 28px;
+  border-radius: 6px;
 }
 
 /* top button */