Fixed code block highlighting issues with superfences

material/base.html

@@ -56,7 +56,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.592ad16c.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.f3fac315.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.a8b3c06d.css' | url }}">
       {% endif %}
@@ -69,7 +69,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ 'assets/javascripts/modernizr.268332fc.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/modernizr.86422ebf.js' | url }}"></script>
     {% endblock %}
     {% block fonts %}
       {% if font != false %}
@@ -209,7 +209,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/application.7a53717d.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/application.38aa6250.js' | url }}"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

src/assets/javascripts/application.js

@@ -102,7 +102,7 @@ function initialize(config) { // eslint-disable-line func-style
 
     /* Clipboard integration */
     if (Clipboard.isSupported()) {
-      const blocks = document.querySelectorAll(".codehilite > pre, pre > code")
+      const blocks = document.querySelectorAll("pre > code")
       Array.prototype.forEach.call(blocks, (block, index) => {
         const id = `__code_${index}`
 

src/assets/stylesheets/base/_typeset.scss

@@ -224,12 +224,6 @@ kbd {
     line-height: 1.4;
     -webkit-overflow-scrolling: touch;
 
-    // [mobile -]: Stretch to whole width
-    @include break-to-device(mobile) {
-      margin: 1em px2rem(-16px);
-      border-radius: 0;
-    }
-
     // Actual container with code, overflowing
     > code {
       display: block;
@@ -241,11 +235,6 @@ kbd {
       box-decoration-break: slice;
       overflow: auto;
 
-      // [mobile -]: Increase padding to match text
-      @include break-to-device(mobile) {
-        padding: px2rem(10.5px) px2rem(16px);
-      }
-
       // Override native scrollbar styles
       &::-webkit-scrollbar {
         width: px2rem(4px);
@@ -264,6 +253,21 @@ kbd {
     }
   }
 
+  // [mobile -]: Stretch to whole width
+  @include break-to-device(mobile) {
+
+    // Stretch top-level containers
+    > pre {
+      margin: 1em px2rem(-16px);
+      border-radius: 0;
+
+      // Actual container with code, overflowing
+      > code {
+        padding: px2rem(10.5px) px2rem(16px);
+      }
+    }
+  }
+
   // Keystrokes
   kbd {
     $correct: 1 / 0.85;

src/assets/stylesheets/extensions/_codehilite.scss

@@ -206,13 +206,6 @@ $codehilite-whitespace: transparent;
   }
 }
 
-// When pymdownx.superfences is enabled but codehilite is disabled,
-// pymdownx.highlight will be used. When this happens, the outer
-// container and tables get this class names by default.
-.highlight {
-  @extend .codehilite;
-}
-
 // ----------------------------------------------------------------------------
 // Rules: layout
 // ----------------------------------------------------------------------------
@@ -223,9 +216,6 @@ $codehilite-whitespace: transparent;
   // Block with line numbers
   .codehilitetable {
     display: block;
-    margin: 1em 0;
-    border-radius: 0.2em;
-    font-size: ms(0);
     overflow: hidden;
 
     // Set table elements to block layout, because otherwise the whole flexbox
@@ -278,11 +268,27 @@ $codehilite-whitespace: transparent;
     }
   }
 
-  // Full-width container on top-level
+  // Block with line numbers
   > .codehilitetable {
+    margin: 1em 0;
+    border-radius: 0.2em;
+  }
 
-    // [mobile -]: Stretch to whole width
+  // [mobile -]: Stretch to whole width
-    @include break-to-device(mobile) {
+  @include break-to-device(mobile) {
+
+    // Full-width container
+    > .codehilite {
+      margin: 1em px2rem(-16px);
+
+      // Actual container with code, overflowing
+      code {
+        padding: px2rem(10.5px) px2rem(16px);
+      }
+    }
+
+    // Full-width container on top-level
+    > .codehilitetable {
       margin: 1em px2rem(-16px);
       border-radius: 0;
 
@@ -292,4 +298,16 @@ $codehilite-whitespace: transparent;
       }
     }
   }
+
+  // When pymdownx.superfences is enabled but codehilite is disabled,
+  // pymdownx.highlight will be used. When this happens, the outer
+  // container and tables get this class names by default.
+  .highlight {
+    @extend .codehilite;
+  }
+
+  // Same as above, but for code blocks with line numbers enabled
+  .highlighttable {
+    @extend .codehilitetable;
+  }
 }

src/assets/stylesheets/extensions/pymdown/_superfences.scss

@@ -35,7 +35,7 @@
     background-color: $md-color-white;
 
     // Actual content
-    > * {
+    pre {
       margin: 0;
       border-radius: 0
     }
@@ -89,11 +89,14 @@
       border: 0;
       border-top: px2rem(1px) solid $md-color-black--lightest;
       border-radius: 0;
+    }
 
-      // Actual container with code, overflowing
+    // [mobile -]: Stretch to whole width
-      pre,
+    @include break-to-device(mobile) {
-      code {
+
-        padding: px2rem(10.5px) px2rem(16px);
+      // First tab label
+      input:first-child + label {
+        margin-left: px2rem(4px);
       }
     }
   }