diff --git a/README.md b/README.md index ebe3110db..b132550e0 100644 --- a/README.md +++ b/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 >}} +~~~ diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss index a31719819..8f48ad169 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/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; + } + } + } + } diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 485e78e3b..3657ff10b 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/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; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index 00892d2bb..a1d8e890e 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/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; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index c085072a4..6a05ba789 100644 --- a/content/v2.0/example.md +++ b/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. diff --git a/layouts/shortcodes/code-tab-content.html b/layouts/shortcodes/code-tab-content.html new file mode 100644 index 000000000..d88086a17 --- /dev/null +++ b/layouts/shortcodes/code-tab-content.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/code-tabs-wrapper.html b/layouts/shortcodes/code-tabs-wrapper.html new file mode 100644 index 000000000..e42d0856e --- /dev/null +++ b/layouts/shortcodes/code-tabs-wrapper.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/code-tabs.html b/layouts/shortcodes/code-tabs.html new file mode 100644 index 000000000..94db29833 --- /dev/null +++ b/layouts/shortcodes/code-tabs.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +