Add styles to be in sync with Jekyll's mark_lines feature (#892)

ashmaroli · web-flow · commit 0f28ee20ad97 · 2025-04-25T03:05:57.000-07:00
Merge pull request 892
diff --git a/_posts/2016-05-19-codeblocks-ahoy.md b/_posts/2016-05-19-codeblocks-ahoy.md
@@ -86,6 +86,30 @@ author:
   id: 75636474
 ```
 
+{% highlight html %}
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello World</title>
+  </head>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>
+{% endhighlight %}
+
+{% highlight html mark_lines="1 4 7" %}
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello World</title>
+  </head>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>
+{% endhighlight %}
+
 {% highlight html linenos %}
 <html>
   <head>
@@ -97,3 +121,15 @@ author:
   </body>
 </html>
 {% endhighlight %}
+
+{% highlight html linenos mark_lines="1 4 7" %}
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello World</title>
+  </head>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>
+{% endhighlight %}
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
@@ -193,10 +193,11 @@ div.highlight, figure.highlight {
     padding: 0;
     border: 0
   }
+  .lineno, .gl { text-align: right }
 }
 
 figure.highlight {
-  & > pre { padding: 5px 0 0 }
+  table { margin: -8px -12px -14px }
   td.gutter { border-right: 1px solid $border-color-01 }
   td.code { width: 100% }
 }
diff --git a/_sass/minima/skins/auto.scss b/_sass/minima/skins/auto.scss
@@ -112,6 +112,7 @@ $lm-table-border-color:    $lm-border-color-01 !default;
     .w     { color: #bbbbbb } // Text.Whitespace
 
     .lineno, .gl { color: #9c9996 } // Line Number
+    .hll   { background-color: #ffffcc } // Marked-lines
   }
 }
 
@@ -225,6 +226,7 @@ $dm-table-border-color:    $dm-border-color-01 !default;
     .w     { color: #eeffff } // Text.Whitespace
 
     .lineno, .gl { color: #8a8a8a } // Line Number
+    .hll   { background-color: #373730 } // Marked-lines
   }
 }
 
diff --git a/_sass/minima/skins/solarized.scss b/_sass/minima/skins/solarized.scss
@@ -74,6 +74,8 @@ $sol-mono1-dimmed: darken($sol-base1, 20%);
 $sol-link-color:   $sol-dark-blue;
 $sol-link-visited: $sol-dark-blue2;
 
+$sol-mark-line-bgcolor: #ffffcc;
+
 @if $sol-is-dark {
   $sol-mono3:  $sol-base03;
   $sol-mono2:  $sol-base02;
@@ -88,6 +90,8 @@ $sol-link-visited: $sol-dark-blue2;
   $sol-mono1-dimmed: lighten($sol-base01, 16%);
   $sol-link-color:   $sol-light-blue;
   $sol-link-visited: $sol-light-blue2;
+
+  $sol-mark-line-bgcolor: #164145;
 }
 
 @if $sol-is-auto {
@@ -105,6 +109,8 @@ $sol-link-visited: $sol-dark-blue2;
     --solarized-mono1-dimmed: #{darken($sol-base1, 20%)};
     --solarized-link-color:   #{$sol-dark-blue};
     --solarized-link-visited: #{$sol-dark-blue2};
+
+    --solarized-mark-line-bg-color: #ffffcc;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -122,6 +128,8 @@ $sol-link-visited: $sol-dark-blue2;
       --solarized-mono1-dimmed: #{lighten($sol-base01, 16%)};
       --solarized-link-color:   #{$sol-light-blue};
       --solarized-link-visited: #{$sol-light-blue2};
+
+      --solarized-mark-line-bg-color: #164145;
     }
   }
 
@@ -138,6 +146,8 @@ $sol-link-visited: $sol-dark-blue2;
   $sol-mono1-dimmed: var(--solarized-mono1-dimmed);
   $sol-link-color:   var(--solarized-link-color);
   $sol-link-visited: var(--solarized-link-visited);
+
+  $sol-mark-line-bgcolor: var(--solarized-mark-line-bg-color);
 }
 
 
@@ -244,4 +254,5 @@ $table-border-color:    $sol-mix1 !default;
   .w     { color: $sol-mono1 } // Text.Whitespace
 
   .lineno, .gl { color: $sol-mono1 } // Line Number
+  .hll   { background-color: $sol-mark-line-bgcolor } // Marked-lines
 }

Original file line number	Diff line number	Diff line change
`@@ -193,10 +193,11 @@ div.highlight, figure.highlight {`
`193`	`193`	`padding: 0;`
`194`	`194`	`border: 0`
`195`	`195`	`}`
	`196`	`+ .lineno, .gl { text-align: right }`
`196`	`197`	`}`
`197`	`198`
`198`	`199`	`figure.highlight {`
`199`		`- & > pre { padding: 5px 0 0 }`
	`200`	`+ table { margin: -8px -12px -14px }`
`200`	`201`	`td.gutter { border-right: 1px solid $border-color-01 }`
`201`	`202`	`td.code { width: 100% }`
`202`	`203`	`}`
Original file line number	Diff line number	Diff line change
`@@ -112,6 +112,7 @@ $lm-table-border-color: $lm-border-color-01 !default;`
`112`	`112`	`.w { color: #bbbbbb } // Text.Whitespace`
`113`	`113`
`114`	`114`	`.lineno, .gl { color: #9c9996 } // Line Number`
	`115`	`+ .hll { background-color: #ffffcc } // Marked-lines`
`115`	`116`	`}`
`116`	`117`	`}`
`117`	`118`
`@@ -225,6 +226,7 @@ $dm-table-border-color: $dm-border-color-01 !default;`
`225`	`226`	`.w { color: #eeffff } // Text.Whitespace`
`226`	`227`
`227`	`228`	`.lineno, .gl { color: #8a8a8a } // Line Number`
	`229`	`+ .hll { background-color: #373730 } // Marked-lines`
`228`	`230`	`}`
`229`	`231`	`}`
`230`	`232`