Added support for code tabs

docs/extensions/codehilite.md

@@ -108,7 +108,7 @@ Line numbers can be added by enabling the `linenums` flag in your `mkdocs.yml`:
 ``` yaml
 markdown_extensions:
   - codehilite:
-      linenums:true
+      linenums: true
 ```
 
 Example:
@@ -134,6 +134,87 @@ Result:
                 if items[j] > items[j + 1]:
                     items[j], items[j + 1] = items[j + 1], items[j]
 
+### Grouping code blocks
+
+The [SuperFences][5] extension which is part of the [PyMdown Extensions][6]
+package adds support for grouping code blocks with tabs. This is especially
+useful for documenting projects with multiple language bindings.
+
+Example:
+
+````
+``` bash tab="Bash"
+#!/bin/bash
+
+echo "Hello world!"
+```
+
+``` c tab="C"
+#include <stdio.h>
+
+int main(void) {
+  printf("Hello world!\n");
+}
+```
+
+``` c++ tab="C++"
+#include <iostream>
+
+int main() {
+  std::cout << "Hello world!" << std::endl;
+  return 0;
+}
+```
+
+``` c# tab="C#"
+using System;
+
+class Program {
+  static void Main(string[] args) {
+    Console.WriteLine("Hello world!");
+  }
+}
+```
+````
+
+Result:
+
+``` bash tab="Bash"
+#!/bin/bash
+
+echo "Hello world!"
+```
+
+``` c tab="C"
+#include <stdio.h>
+
+int main(void) {
+  printf("Hello world!\n");
+}
+```
+
+``` c++ tab="C++"
+#include <iostream>
+
+int main() {
+  std::cout << "Hello world!" << std::endl;
+  return 0;
+}
+```
+
+``` c# tab="C#"
+using System;
+
+class Program {
+  static void Main(string[] args) {
+    Console.WriteLine("Hello world!");
+  }
+}
+```
+
+  [5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
+  [6]: https://facelessuser.github.io/pymdown-extensions
+
 ### Highlighting specific lines
 
 Specific lines can be highlighted by passing the line numbers to the `hl_lines`
@@ -162,7 +243,6 @@ Result:
                 if items[j] > items[j + 1]:
                     items[j], items[j + 1] = items[j + 1], items[j]
 
-
 ## Supported languages <small>excerpt</small>
 
 CodeHilite uses [Pygments][2], a generic syntax highlighter with support for

material/base.html

@@ -48,7 +48,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.fc30eec9.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.e8ff00e1.css">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.6079476c.css">
       {% endif %}

src/assets/stylesheets/application.scss

@@ -63,6 +63,7 @@
 @import "extensions/pymdown/details";
 @import "extensions/pymdown/emoji";
 @import "extensions/pymdown/inlinehilite";
+@import "extensions/pymdown/superfences";
 @import "extensions/pymdown/tasklist";
 
 @import "shame";

src/assets/stylesheets/extensions/_codehilite.scss

@@ -253,7 +253,7 @@ $codehilite-whitespace: transparent;
     }
   }
 
-  // If not using Pygments, code will be under pre>code
+  // If not using Pygments, code will be under pre > code
   pre.codehilite {
     overflow: visible;
 
@@ -341,7 +341,7 @@ $codehilite-whitespace: transparent;
     }
   }
 
-  // Full-width container
+  // Full-width container on top-level
   > .codehilitetable {
     box-shadow: none;
 

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

@@ -0,0 +1,107 @@
+////
+/// Copyright (c) 2016-2018 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Tabbed code block content
+  .superfences-content {
+    display: none;
+    order: 99;
+    width: 100%;
+    background-color: $md-color-white;
+
+    // Actual content
+    > * {
+      margin: 0;
+      border-radius: 0
+    }
+  }
+
+  // Tabbed code block container
+  .superfences-tabs {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    border-top: 0.1rem solid $md-color-black--lightest;
+    border-radius: 0.2em;
+
+    // [mobile +]: Collapse tab labels
+    @include break-from-device(tablet) {
+      border: 0.1rem solid $md-color-black--lightest;
+    }
+
+    // Hide radio buttons
+    & > input {
+      display: none;
+
+      // Active tab label
+      &:checked + label {
+        font-weight: 700;
+
+        // Show code tab content
+        & + .superfences-content {
+          display: block;
+        }
+      }
+    }
+
+    // Tab label
+    & > label {
+      width: auto;
+      padding: 1.2rem 1.6rem;
+      transition: color 0.125s;
+      font-size: ms(-1);
+      cursor: pointer;
+
+      // Hovered tab label
+      html &:hover {
+        color: $md-color-accent;
+      }
+
+      // [mobile +]: Collapse tab labels
+      @include break-from-device(tablet) {
+        padding: 1.2rem 1.2rem;
+      }
+    }
+  }
+
+  // Full-width container on top-level
+  > .superfences-tabs {
+
+    // [mobile -]: Stretch to whole width
+    @include break-to-device(mobile) {
+      margin: 1em -1.6rem;
+      border-radius: 0;
+
+      // Actual container with code, overflowing
+      pre,
+      code {
+        padding: 1.05rem 1.6rem;
+      }
+    }
+  }
+}