From 4044ce14ba53bbe1b7baaa715946bd6e23e4d843 Mon Sep 17 00:00:00 2001
From: Isaac Muse <faceless.shop@gmail.com>
Date: Thu, 12 Mar 2020 09:39:35 -0600
Subject: [PATCH] Fixed inline line highlight padding, wrapping, and gutter
 background (#1501)

* Fix inline line highlight padding, wrapping, and gutter background
- Line highlight pad should match the parent
- Float the gutter left to force code and numbers not to wrap
- Provide a background for the gutter

* Use opaque color for code background

* Fix for root level stretched code blocks

* Normalize code block padding

* Revert normalization
---
 src/assets/stylesheets/base/_colors.scss           |  2 +-
 src/assets/stylesheets/extensions/_codehilite.scss | 14 ++++++++++++--
 .../stylesheets/extensions/pymdown/_highlight.scss |  6 +++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/assets/stylesheets/base/_colors.scss b/src/assets/stylesheets/base/_colors.scss
index 7fbfce2ee..5d75eeff8 100644
--- a/src/assets/stylesheets/base/_colors.scss
+++ b/src/assets/stylesheets/base/_colors.scss
@@ -51,6 +51,6 @@
   --md-accent-bg-color--light:         var(--md-default-bg-color--light);
 
   // Code block color shades
-  --md-code-bg-color:                  hsla(0, 0%, 92.5%, 0.5);
+  --md-code-bg-color:                  hsla(0, 0%, 96%, 1);
   --md-code-fg-color:                  hsla(200, 18%, 26%, 1);
 }
diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss
index 7f17476b8..5e7c541a1 100644
--- a/src/assets/stylesheets/extensions/_codehilite.scss
+++ b/src/assets/stylesheets/extensions/_codehilite.scss
@@ -194,8 +194,8 @@ $codehilite-whitespace: transparent;
   // Highlighted lines
   .hll {
     display: block;
-    margin: 0 px2rem(-16px);
-    padding: 0 px2rem(16px);
+    margin: 0 px2em(-16px, 13.6px);
+    padding: 0 px2em(16px, 13.6px);
     background-color: transparentize($clr-yellow-500, 0.5);
   }
 }
@@ -280,6 +280,11 @@ $codehilite-whitespace: transparent;
     > .codehilite {
       margin: 1em px2rem(-16px);
 
+      .hll {
+        margin: 0 px2rem(-16px);
+        padding: 0 px2rem(16px);
+      }
+
       // Remove rounded borders
       code {
         border-radius: 0;
@@ -290,6 +295,11 @@ $codehilite-whitespace: transparent;
     > .codehilitetable {
       margin: 1em px2rem(-16px);
       border-radius: 0;
+
+      .hll {
+        margin: 0 px2rem(-16px);
+        padding: 0 px2rem(16px);
+      }
     }
   }
 }
diff --git a/src/assets/stylesheets/extensions/pymdown/_highlight.scss b/src/assets/stylesheets/extensions/pymdown/_highlight.scss
index f26b30284..660a90b0d 100644
--- a/src/assets/stylesheets/extensions/pymdown/_highlight.scss
+++ b/src/assets/stylesheets/extensions/pymdown/_highlight.scss
@@ -33,9 +33,13 @@
   // Inline line numbers
   [data-linenos]::before {
     position: sticky;
-    left: 0;
+    left: px2em(-16px, 13.6px);
     display: inline-block;
     margin-right: px2em(16px, 13.6px);
+    margin-left: px2em(-16px, 13.6px);
+    padding-left: px2em(16px, 13.6px);
+    float: left;
+    background-color: var(--md-code-bg-color);
     color: var(--md-default-fg-color--lighter);
     box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
     content: attr(data-linenos);