added tabbed codeblock shortcodes and styles

README.md

@@ -186,3 +186,42 @@ Markdown content for tab 2.
 
 {{< /tabs-wrapper >}}
 ```
+
+#### Tabbed code blocks
+Shortcodes are also available for tabbed code blocks primarily used to give users
+the option to choose between different languages and syntax.
+The shortcode structure is the same as above, but the shortcode names are different:
+
+`{{< code-tabs-wrapper >}}`  
+`{{% code-tabs %}}`  
+`{{% code-tab-content %}}`
+
+~~~md
+{{< code-tabs-wrapper >}}
+
+{{% code-tabs %}}
+[Flux](#)
+[InfluxQL](#)
+{{% /code-tabs %}}
+
+{{% code-tab-content %}}
+```js
+data = from(bucket: "telegraf/autogen")
+  |> range(start: -15m)
+  |> filter(fn: (r) =>
+    r._measurement == "mem" AND
+    r._field == "used_percent"
+  )
+```
+{{% /code-tab-content %}}
+
+{{% code-tab-content %}}
+```sql
+SELECT "used_percent"
+FROM "telegraf"."autogen"."mem"
+WHERE time > now() - 15m
+```
+{{% /code-tab-content %}}
+
+{{< /code-tabs-wrapper >}}
+~~~

assets/styles/layouts/_layout-article.scss

@@ -151,6 +151,7 @@
     padding: 1.5em;
     border-radius: $border-radius;
     overflow: scroll;
+    code { padding: 0; }
   }
 
   //////////////////////////////////// Tables ////////////////////////////////////
@@ -407,4 +408,36 @@
     display: none;
   }
 
+  .tabs-wrapper.code {
+    .tabs {
+       p {
+         margin: 0;
+         text-align: right;
+         display: block;
+       }
+       a {
+         margin: 0;
+         border-radius: $border-radius $border-radius 0 0;
+         display: inline-block;
+         background: $article-tab-code-bg;
+         color: $article-tab-code-text;
+         &:hover {
+           background: $article-tab-code-bg-hover;
+           color: $article-tab-code-text-hover;
+         }
+         &.is-active {
+           background-color: $article-code-bg;
+           color: $article-tab-code-active-text;
+         }
+       }
+    }
+    .tab-content {
+      padding: 0;
+      pre {
+        margin: 0 0 3rem;
+        border-radius: $border-radius 0 $border-radius $border-radius;
+      }
+    }
+  }
+
 }

assets/styles/themes/_theme-dark.scss

@@ -90,6 +90,12 @@ $article-tab-bg: $g4-onyx !default;
 $article-tab-active-text: $g20-white !default;
 $article-tab-active-bg: $b-ocean !default;
 
+$article-tab-code-text: $g9-mountain !default;
+$article-tab-code-bg: $g5-pepper !default;
+$article-tab-code-text-hover: $g20-white !default;
+$article-tab-code-bg-hover: $b-ocean !default;
+$article-tab-code-active-text: $g20-white !default;
+
 // Left Navigation
 $nav-category: $b-ocean !default;
 $nav-category-hover: $g20-white !default;

assets/styles/themes/_theme-light.scss

@@ -41,10 +41,10 @@ $article-code: $p-star;
 $article-code-bg: $p-violettecreme;
 $article-code-accent1: $p-potassium;
 $article-code-accent2: $b-ocean;
-$article-code-accent3: #0e9e75;
+$article-code-accent3: #008e7c;
 $article-code-accent4: $o-ruby;
 $article-code-accent5: #e24bbb;
-$article-code-accent6: $b-pool;
+$article-code-accent6: $b-ocean;
 $article-code-accent7: #e90;
 $article-code-select:  $b-pool;
 $article-code-hover: $b-sapphire;
@@ -89,6 +89,12 @@ $article-tab-bg: $g18-cloud;
 $article-tab-active-text: $g20-white;
 $article-tab-active-bg: $b-pool;
 
+$article-tab-code-text: $p-potassium;
+$article-tab-code-bg: $g20-white;
+$article-tab-code-text-hover: $g20-white;
+$article-tab-code-bg-hover: $p-comet;
+$article-tab-code-active-text: $p-star;
+
 // Left Navigation
 $nav-category: $b-ocean;
 $nav-category-hover: $gr-viridian;

content/v2.0/example.md

@@ -16,6 +16,31 @@ This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nu
 
 This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
 
+{{< code-tabs-wrapper >}}
+{{% code-tabs %}}
+[Flux](#)
+[InfluxQL](#)
+{{% /code-tabs %}}
+
+{{% code-tab-content %}}
+```js
+data = from(bucket: "telegraf/autogen")
+  |> range(start: -15m)
+  |> filter(fn: (r) =>
+    r._measurement == "mem" AND
+    r._field == "used_percent"
+  )
+```
+{{% /code-tab-content %}}
+{{% code-tab-content %}}
+```sql
+SELECT "used_percent"
+FROM "telegraf"."autogen"."mem"
+WHERE time > now() - 15m
+```
+{{% /code-tab-content %}}
+{{< /code-tabs-wrapper >}}
+
 {{% enterprise %}}
 ### h3 This is a header3
 This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.

layouts/shortcodes/code-tab-content.html

@@ -0,0 +1,3 @@
+<section class="tab-content">
+  {{ .Inner }}
+</section>

layouts/shortcodes/code-tabs-wrapper.html

@@ -0,0 +1,3 @@
+<div class="tabs-wrapper code">
+  {{ .Inner }}
+</div>

layouts/shortcodes/code-tabs.html

@@ -0,0 +1,3 @@
+<div class="tabs">
+  {{ .Inner }}
+</div>