kramdown highlighed code block, line numbers shows too much whitespac…

…e, fix by adding css mmistakes/minimal-mistakes#1437
gaurav1780 · Sep 7, 2018 · 5f6f23a · 5f6f23a
1 parent a82ed73
commit 5f6f23a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 20 deletions.
diff --git a/_config.yml b/_config.yml
@@ -136,23 +136,23 @@ highlighter: rouge
 markdown: kramdown
 # !github-pages! mandatory › https://help.github.com/articles/using-jekyll-with-pages/#configuration-settings-you-cannot-change
 # Since Jekyll 3 the default highlighter is Rouge (replaced Pygments.rb in v44)
-# highlighter: rouge
-#
-# # More › http://kramdown.gettalong.org/quickref.html
-# # Options › http://kramdown.gettalong.org/options.html
-# kramdown:
-#   input:          GFM
-#   # https://github.com/jekyll/jekyll/pull/4090
-#   syntax_highlighter: rouge
-#
-#   # Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
-#   # span, block element options fall back to global
-#   syntax_highlighter_opts:
-#     # Rouge Options › https://github.com/jneen/rouge#full-options
-#     css_class: 'highlight'
-#     #line_numbers: true # bad idea, spans don't need linenos and would inherit this option
-#     span:
-#       line_numbers: false
-#     block:
-#       line_numbers: true
-#       start_line: 1
+highlighter: rouge
+
+# More › http://kramdown.gettalong.org/quickref.html
+# Options › http://kramdown.gettalong.org/options.html
+kramdown:
+  input:          GFM
+  # https://github.com/jekyll/jekyll/pull/4090
+  syntax_highlighter: rouge
+
+  # Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
+  # span, block element options fall back to global
+  syntax_highlighter_opts:
+    # Rouge Options › https://github.com/jneen/rouge#full-options
+    css_class: 'highlight'
+    #line_numbers: true # bad idea, spans don't need linenos and would inherit this option
+    span:
+      line_numbers: false
+    block:
+      line_numbers: true
+      start_line: 1
diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
@@ -144,6 +144,43 @@ img {
   max-width: 100%;
 }
 
+.highlight table {
+  margin-bottom: 0;
+  font-size: 1em;
+  border: 0;
+
+  td {
+    padding: 0;
+    width: calc(100% - 1em);
+    border: 0;
+
+    /* line numbers*/
+    &.gutter,
+    &.rouge-gutter {
+      padding-left: 0em;
+      padding-right: 0em;
+      width: 1em;
+      text-align: right;
+    }
+
+    /* code */
+    &.code,
+    &.rouge-code {
+      padding-left: 1em;
+    }
+  }
+
+  pre {
+    margin: 0;
+
+  }
+}
+
+.highlight pre {
+  width: 100%;
+  margin-bottom: 5px;
+}
+
 //----------------------------------------
 // Miscellaneous.
 //----------------------------------------