Added support for pymdownx.tabbed via pymdown-extensions 7.0b1 (#1459)

* Add support pymdownx.tabbed via pymdown-extensions 7.0b1

* Rebuild theme

* Use :only-child

docs/extensions/codehilite.md

@@ -136,83 +136,91 @@ Result:
 
 ### Grouping code blocks
 
-The [SuperFences][5] extension which is part of the [PyMdown Extensions][6]
+The [Tabbed][5] extension which is part of the [PyMdown Extensions][6]
-package adds support for grouping code blocks with tabs. This is especially
+package adds support for grouping Markdown blocks with tabs. This is especially
 useful for documenting projects with multiple language bindings.
 
 Example:
 
 ````
-``` bash tab="Bash"
+=== "Bash"
-#!/bin/bash
+    ``` bash
+    #!/bin/bash
 
-echo "Hello world!"
+    echo "Hello world!"
-```
+    ```
 
-``` c tab="C"
+=== "C"
-#include <stdio.h>
+    ``` c
+    #include <stdio.h>
 
-int main(void) {
+    int main(void) {
-  printf("Hello world!\n");
+      printf("Hello world!\n");
-}
+    }
-```
+    ```
 
-``` c++ tab="C++"
+=== "C++"
-#include <iostream>
+    ``` c++
+    #include <iostream>
 
-int main() {
+    int main() {
-  std::cout << "Hello world!" << std::endl;
+      std::cout << "Hello world!" << std::endl;
-  return 0;
+      return 0;
-}
+    }
-```
+    ```
 
-``` c# tab="C#"
+=== "C#"
-using System;
+    ``` c#
+    using System;
 
-class Program {
+    class Program {
-  static void Main(string[] args) {
+      static void Main(string[] args) {
-    Console.WriteLine("Hello world!");
+        Console.WriteLine("Hello world!");
-  }
+      }
-}
+    }
-```
+    ```
 ````
 
 Result:
 
-``` bash tab="Bash"
+=== "Bash"
-#!/bin/bash
+    ``` bash
+    #!/bin/bash
 
-echo "Hello world!"
+    echo "Hello world!"
-```
+    ```
 
-``` c tab="C"
+=== "C"
-#include <stdio.h>
+    ``` c
+    #include <stdio.h>
 
-int main(void) {
+    int main(void) {
-  printf("Hello world!\n");
+      printf("Hello world!\n");
-}
+    }
-```
+    ```
 
-``` c++ tab="C++"
+=== "C++"
-#include <iostream>
+    ``` c++
+    #include <iostream>
 
-int main() {
+    int main() {
-  std::cout << "Hello world!" << std::endl;
+      std::cout << "Hello world!" << std::endl;
-  return 0;
+      return 0;
-}
+    }
-```
+    ```
 
-``` c# tab="C#"
+=== "C#"
-using System;
+    ``` c#
+    using System;
 
-class Program {
+    class Program {
-  static void Main(string[] args) {
+      static void Main(string[] args) {
-    Console.WriteLine("Hello world!");
+        Console.WriteLine("Hello world!");
-  }
+      }
-}
+    }
-```
+    ```
 
-  [5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
+  [5]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
   [6]: https://facelessuser.github.io/pymdown-extensions
 
 ### Highlighting specific lines

docs/extensions/pymdown.md

@@ -35,6 +35,7 @@ markdown_extensions:
   - pymdownx.superfences
   - pymdownx.tasklist:
       custom_checkbox: true
+  - pymdownx.tabbed
   - pymdownx.tilde
 ```
 
@@ -263,9 +264,41 @@ SuperFences does also allow [grouping code blocks with tabs][25].
   [24]: https://python-markdown.github.io/extensions/fenced_code_blocks/
   [25]: codehilite.md#grouping-code-blocks
 
+### Tabbed
+
+[Tabbed][26] adds support for creating tabbed groups of Markdown content.
+
+``` markdown
+=== "Fruit List"
+    - Apple
+    - Banana
+    - Orange
+
+=== "Fruit Table"
+    Fruit  | Color
+    ------ | -----
+    Apple  | Red
+    Banana | Yellow
+    Oragne | Orange
+```
+
+=== "Fruit List"
+    - Apple
+    - Banana
+    - Orange
+
+=== "Fruit Table"
+    Fruit  | Color
+    ------ | -----
+    Apple  | Red
+    Banana | Yellow
+    Oragne | Orange
+
+[26]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
+
 ### Tasklist
 
-[Tasklist][26] adds support for styled checkbox lists. This is useful for
+[Tasklist][27] adds support for styled checkbox lists. This is useful for
 keeping track of tasks and showing what has been done and has yet to be done.
 Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
 `[x]` for filled checkboxes.
@@ -298,12 +331,12 @@ Result:
 * [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
 * [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
 
-[26]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
+[27]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
 
 ### Tilde
 
-[Tilde][27] provides an easy way to ~~strike through~~ cross out text.
+[Tilde][28] provides an easy way to ~~strike through~~ cross out text.
 The portion of text that should be erased must be enclosed in two tildes
 `~~...~~` and the extension will take care of the rest.
 
-  [27]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
+[28]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.df0a4fb1.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.299219a4.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.df0a4fb1.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.299219a4.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.ce66ce8d.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.ce66ce8d.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8c25017f.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.a6040c1b.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.4cba2899.min.css"
 }

material/base.html

@@ -43,7 +43,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.a6040c1b.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.4cba2899.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8c25017f.min.css' | url }}">
       {% endif %}
@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.df0a4fb1.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.299219a4.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

mkdocs.yml

@@ -104,6 +104,7 @@ markdown_extensions:
   - pymdownx.mark
   - pymdownx.smartsymbols
   - pymdownx.superfences
+  - pymdownx.tabbed
   - pymdownx.tasklist:
       custom_checkbox: true
   - pymdownx.tilde

requirements.txt

@@ -23,4 +23,4 @@ mkdocs>=1.0
 mkdocs-minify-plugin>=0.2
 Pygments>=2.2
 markdown>=3.2
-pymdown-extensions>=6.3
+pymdown-extensions>=7.0b1

src/assets/stylesheets/app.scss

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

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

@@ -28,7 +28,7 @@
 .md-typeset {
 
   // Tabbed code block content
-  .superfences-content {
+  .tabbed-content {
     display: none;
     order: 99;
     width: 100%;
@@ -42,7 +42,7 @@
   }
 
   // Tabbed code block container
-  .superfences-tabs {
+  .tabbed-set {
     display: flex;
     position: relative;
     flex-wrap: wrap;
@@ -59,8 +59,26 @@
         font-weight: 700;
 
         // Show code tab content
-        & + .superfences-content {
+        & + .tabbed-content {
           display: block;
+          padding: 0 px2rem(12px);
+
+          // Adjust spacing on last element
+          > :last-child {
+            margin-bottom: px2rem(12px);
+          }
+
+          > {
+            div.highlight,
+            div.codehilite,
+            pre,
+            table.highlighttable,
+            table.codehilitetable {
+              &:only-child {
+                margin: 0 px2rem(-12px);
+              }
+            }
+          }
         }
       }
     }
@@ -81,7 +99,7 @@
   }
 
   // Full-width container on top-level
-  > .superfences-tabs {
+  > .tabbed-set {
 
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {