From 20f536e8a2ddee1cf940d2c81de29fb545922b99 Mon Sep 17 00:00:00 2001
From: Ameer J <52414509+ameerj@users.noreply.github.com>
Date: Thu, 7 Jan 2021 15:11:07 -0500
Subject: [PATCH] Update style of multiline code blocks (#240)

---
 src/scss/yuzu/yuzu.scss | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/scss/yuzu/yuzu.scss b/src/scss/yuzu/yuzu.scss
index 630f844e..51c961f8 100644
--- a/src/scss/yuzu/yuzu.scss
+++ b/src/scss/yuzu/yuzu.scss
@@ -4,6 +4,7 @@ $switch-yellow: #e6ff00;
 $switch-deeppink: #ff3278;
 $switch-lime: #1edc00;
 $switch-gray: #828282;
+$code-bg: #101010;  // code tag background color
 
 @each $name, $color in ("orangered", $switch-orangered), ("deepskyblue", $switch-deepskyblue),
         ("yellow", $switch-yellow), ("deeppink", $switch-deeppink), ("lime", $switch-lime), ("gray", $switch-gray) {
@@ -103,12 +104,27 @@ a:hover {
   line-height: 1.45;
 }
 
-// Fix background color of monospaced text
+// Fix background color for single line monospaced text
 .content :not(pre) > code {
-  background: #101010;
+  background: $code-bg;
 }
 
-code {
+// Multiline code block container
+.content pre {
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    background-color: $code-bg;
+    border-radius: 6px;
+}
+
+// Text color of multilne code block
+pre > code {
+  color: #FFFFFF;
+}
+
+// Style of single line code block
+:not(pre) > code {
   color: #FFFFFF;
   font-size: 0.875em;
   font-weight: 400;