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

@@ -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);
 }

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);
+      }
     }
   }
 }

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);