fix(css): wrong syntax highlight scope

sparanoid · Jan 24, 2018 · 745603b · 745603b
1 parent 6e31442
commit 745603b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less
@@ -438,7 +438,7 @@ body:hover .latest {
   }
 
   // TODO: Need refine
-  // Date: Jan 18, 2017, 8:24 PM
+  // Date: Jan 24, 2018, 5:37 PM
   //
   // Jekyll (liquid) {% highlight %} method and GFM method generates different
   // markup for code blocks, this result in different CSS styling for different
@@ -448,8 +448,9 @@ body:hover .latest {
   //
   // ```
   // div.language-js.highlighter-rouge
-  //   pre.highlight
-  //     code
+  //   div.highlight
+  //     pre.highlight
+  //       code
   // ```
   //
   // ## GFM method with `line_numbers` enabled under `syntax_highlighter_opts`
@@ -486,7 +487,7 @@ body:hover .latest {
   // ```
   pre,
   .highlight > pre,
-  .highlighter-rouge .highlight {
+  .highlighter-rouge pre.highlight {
     padding: @space-xs;
     .margin-offset(-@space-xs);
     margin-bottom: 1.8rem;

diff --git a/_app/assets/themes/curtana/_less/components/randomized.less b/_app/assets/themes/curtana/_less/components/randomized.less
@@ -17,13 +17,13 @@
 
 // Reset background
 //
-// `.highlight > pre`              - Jekyll liquid code blocks
-// `.highlighter-rouge .highlight` - Rouge GFM code blocks
+// `.highlight > pre`                 - Jekyll liquid code blocks
+// `.highlighter-rouge pre.highlight` - Rouge GFM code blocks
 //
 // Ref: https://github.com/jekyll/jekyll/pull/4053
 @highlighter-tint: @link-color;
 .highlight > pre,
-.highlighter-rouge .highlight {
+.highlighter-rouge pre.highlight {
   .calc-bg(@highlighter-tint);
   background: fade(@calc-bg, 2%);
 }