feat(style): update syntax highlighter styles

BREAKING CHANGE: I've remove Redcarpet config to enforce using Rouge as default highlighter, it's also recommended to switch to Rouge over Redcarpet as your default highlighter. More work still need to be done to simplify the stylesheets, ref jekyll/jekyll#4053
sparanoid · Jan 18, 2017 · f0807db · f0807db
1 parent d79f2a2
commit f0807db
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 35 deletions.
diff --git a/_app/_posts/note/2014-06-06-syntax-highlighting.md b/_app/_posts/note/2014-06-06-syntax-highlighting.md
@@ -17,6 +17,10 @@ def show
 end
 ```
 
+```php?start_inline=1
+echo "Hello, world!";
+```
+
 {% highlight ruby %}
 def print_hi(name)
   puts "Hi, #{name}"

diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less
@@ -357,13 +357,65 @@ body:hover .latest {
   }
 
   pre {
+    background: fade(#08f, 4%);
+  }
+
+  // TODO: Need refine
+  // Date: Jan 18, 2017, 8:24 PM
+  //
+  // Jekyll (liquid) {% highlight %} method and GFM method generates different
+  // markup for code blocks, this result in different CSS styling for different
+  // highlight methods you use.
+  //
+  // ## GFM method
+  //
+  // ```
+  // div.language-js.highlighter-rouge
+  //   pre.highlight
+  //     code
+  // ```
+  //
+  // ## GFM method with `line_numbers` enabled under `syntax_highlighter_opts`
+  //
+  // ```
+  // div.language-js.highlighter-rouge
+  //   div.highlight
+  //     table
+  //       tbody
+  //         tr
+  //           td.gutter.gl
+  //             pre
+  //               code
+  //           td.code
+  //             pre
+  //               code
+  // ```
+  //
+  // ## Jekyll {% highlight %} method:
+  //
+  // ```
+  // figure.highlight
+  //   pre
+  //     code.language-html
+  //       table
+  //         tbody
+  //           tr
+  //             td.gutter.gl
+  //               pre
+  //                 code
+  //             td.code
+  //               pre
+  //                 code
+  // ```
+  pre,
+  .highlight > pre,
+  .highlighter-rouge .highlight {
     padding: @space-xs;
     .margin-offset(-@space-xs, -@space-xs);
     margin-bottom: 1.8rem;
     overflow-x: auto;
     font-size: 80%;
     line-height: (@line-height * 1.2);
-    background: fade(#08f, 4%);
     // Bouncing scroll fix for iOS
     -webkit-overflow-scrolling: touch;
 

diff --git a/_app/assets/themes/curtana/_less/components/randomized.less b/_app/assets/themes/curtana/_less/components/randomized.less
@@ -15,18 +15,25 @@
   @calc-bg: mix(#000, @v, 70%);
 }
 
-.highlight {
-
-  // Reset background
-  // .highlight > pre for common liquid method
-  // .highlighter-rouge .highlight for GFM method
-  // Ref: https://github.com/jekyll/jekyll/pull/4053
-  @highlighter-tint: @link-color;
-  > pre,
-  .highlighter-rouge & {
-    .calc-bg(@highlighter-tint);
-    background: fade(@calc-bg, 2%);
-  }
+// Reset background
+//
+// `.highlight > pre`              - Jekyll liquid code blocks
+// `.highlighter-rouge .highlight` - Rouge GFM code blocks
+//
+// Ref: https://github.com/jekyll/jekyll/pull/4053
+@highlighter-tint: @link-color;
+.highlight > pre,
+.highlighter-rouge .highlight {
+  .calc-bg(@highlighter-tint);
+  background: fade(@calc-bg, 2%);
+}
+
+// General highlights
+//
+// `.highlight code`         - Rouge GFM and Jekyll liquid code blocks
+// `.highlighter-rouge code` - Rouge inline code
+.highlight,
+.highlighter-rouge {
 
   // Reset default `code`
   code { color: desaturate(@link-color, 95%); } // Normal code

diff --git a/_config.init.yml b/_config.init.yml
@@ -29,7 +29,7 @@ port:           4321
 future:         false
 
 #
-# Additional Markdown settings
+# Markdown settings
 #
 
 kramdown:
@@ -42,19 +42,11 @@ kramdown:
   enable_coderay:            false
   hard_wrap:                 false
   syntax_highlighter:        rouge
+  syntax_highlighter_opts:
+    css_class:               "highlight"
   transliterated_header_ids: true
   footnote_backlink:         "&#8617;&#xfe0e;"
 
-redcarpet:
-  extensions:
-    - footnotes
-    - no_intra_emphasis
-    - smart
-    - space_after_headers
-    - strikethrough
-    - superscript
-    - tables
-
 #
 # Jekyll plugins
 #

diff --git a/_config.yml b/_config.yml
@@ -29,7 +29,7 @@ port:           4321
 future:         false
 
 #
-# Additional Markdown settings
+# Markdown settings
 #
 
 kramdown:
@@ -42,19 +42,11 @@ kramdown:
   enable_coderay:            false
   hard_wrap:                 false
   syntax_highlighter:        rouge
+  syntax_highlighter_opts:
+    css_class:               "highlight"
   transliterated_header_ids: true
   footnote_backlink:         "&#8617;&#xfe0e;"
 
-redcarpet:
-  extensions:
-    - footnotes
-    - no_intra_emphasis
-    - smart
-    - space_after_headers
-    - strikethrough
-    - superscript
-    - tables
-
 #
 # Jekyll plugins
 #