diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index a2de2162b0..4893d32663 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -20,9 +20,11 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.16.0 (2023-06-05)
 
-- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received style, color and icon parameter similar to other shortcodes.
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received some love and style, color and icon parameter similar to other shortcodes.
 
-  Additionally the `name` parameter was renamed to `title`. You don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
+  If you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.
+
+  Additionally the `name` parameter was renamed to `title` but you don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now supports [separate favicons]({{%relref "basics/customization/#change-the-favicon" %}}) for light & dark mode optionally.
 
diff --git a/exampleSite/content/shortcodes/attachments/index.en.md b/exampleSite/content/shortcodes/attachments/index.en.md
index db5e08106b..3019546af3 100644
--- a/exampleSite/content/shortcodes/attachments/index.en.md
+++ b/exampleSite/content/shortcodes/attachments/index.en.md
@@ -39,7 +39,7 @@ While the examples are using shortcodes with named parameter you are free to als
 
 | Name        | Default         | Notes       |
 |:------------|:----------------|:------------|
-| **style**   | `transparent`   | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **style**   | `transparent`   | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
 | **color**   | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **title**   | see notes       | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: `Attachments`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **icon**    | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |
diff --git a/exampleSite/content/shortcodes/badge.en.md b/exampleSite/content/shortcodes/badge.en.md
index 81178cb6b6..7d2a546351 100644
--- a/exampleSite/content/shortcodes/badge.en.md
+++ b/exampleSite/content/shortcodes/badge.en.md
@@ -66,7 +66,7 @@ While the examples are using shortcodes with named parameter you are free to als
 
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
-| **style**             | `default`       | The style scheme used for the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **style**             | `default`       | The style scheme used for the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
 | **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **title**             | see notes       | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **icon**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
diff --git a/exampleSite/content/shortcodes/button.en.md b/exampleSite/content/shortcodes/button.en.md
index 85b26e0b36..5a3c8f2f8f 100644
--- a/exampleSite/content/shortcodes/button.en.md
+++ b/exampleSite/content/shortcodes/button.en.md
@@ -48,7 +48,7 @@ Once the button is clicked, it opens another browser tab for the given URL.
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
 | **href**              | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL|
-| **style**             | `transparent`   | The style scheme used for the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **style**             | `transparent`   | The style scheme used for the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
 | **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **icon**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **iconposition**      | `left`          | Places the icon to the `left` or `right` of the title. |
diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md
index 53dd4025ba..c91c1c0d67 100644
--- a/exampleSite/content/shortcodes/notice.en.md
+++ b/exampleSite/content/shortcodes/notice.en.md
@@ -51,7 +51,7 @@ It is all about the boxes.
 
 | Name      | Position | Default   | Notes       |
 |:----------|:---------|:----------|:------------|
-| **style** | 1        | `default` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **style** | 1        | `default` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
 | **color** |          | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **title** | 2        | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **icon**  | 3        | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
diff --git a/exampleSite/content/shortcodes/tab.en.md b/exampleSite/content/shortcodes/tab.en.md
index 6180b4cad0..99b79edd0e 100644
--- a/exampleSite/content/shortcodes/tab.en.md
+++ b/exampleSite/content/shortcodes/tab.en.md
@@ -50,7 +50,7 @@ printf("Hello World!");
 
 | Name                  | Default         | Notes       |
 |:----------------------|:----------------|:------------|
-| **style**             | `default`       | The style scheme used for the tab.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
+| **style**             | see notes       | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
 | **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
 | **title**             | see notes       | Arbitrary title for the tab. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **icon**              | see notes       | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index df0743aa86..9444dea336 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -12,7 +12,7 @@
   {{- end }}
   {{- with $tab }}
     {{- $color := .color | default $color }}
-    {{- $style := .style | default $style | default (cond (ne .color "") "filled" "default") }}
+    {{- $style := .style | default $style | default (cond (ne .color "") "filled" "initial") }}
     {{- $title := .title | default ($style | T) }}
     {{- $title = trim $title " " }}
     {{- $icon := .icon | default "" }}
@@ -37,7 +37,7 @@
   {{- end }}
 {{- end }}
 {{- $color = .color | default "" }}
-{{- $style = .style | default (cond (ne .color "") "filled" "default") }}
+{{- $style = .style | default (cond (ne .color "") "filled" "initial") }}
 {{- $title = .title | default ($style | T) }}
 {{- $title = trim $title " " }}
 {{- $icon = .icon | default "" }}
diff --git a/static/css/theme.css b/static/css/theme.css
index 4b63ef98a0..42e655bf80 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1897,7 +1897,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     padding: 1rem;
 }
 /* remove margin if only a single code block is contained in the tab */
-#body .tab-content-text:has(> div.highlight:only-child){
+#body .tab-content-text:has(> div.highlight:only-child),
+#body .tab-content.tab-panel-style.code > .tab-content-text{
     padding: 0;
 }
 /* remove border from a code block if single  */
diff --git a/static/css/variant.css b/static/css/variant.css
index a4e5b2f3bf..bc690498b3 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -205,6 +205,13 @@ div.box > .box-content {
     --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
 }
 
+.cstyle.code {
+    --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
+}
+
 .cstyle.transparent {
     --VARIABLE-BOX-color: transparent;
     --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
@@ -398,6 +405,7 @@ article ul > li > input[type="checkbox"] {
     color: var(--VARIABLE-BOX-TEXT-color);
 }
 
+.tab-panel-style.cstyle.initial,
 .tab-panel-style.cstyle.default {
     --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
     --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
@@ -408,6 +416,7 @@ article ul > li > input[type="checkbox"] {
     --VARIABLE-BOX-BG-color: transparent;
 }
 
+#body .tab-panel-style.cstyle.initial.tab-nav-button.active,
 #body .tab-panel-style.cstyle.default.tab-nav-button.active,
 #body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
     background-color: var(--VARIABLE-BOX-BG-color);
@@ -416,6 +425,7 @@ article ul > li > input[type="checkbox"] {
     border-top-color: var(--VARIABLE-BOX-color);
 }
 
+#body .tab-panel-style.cstyle.initial.tab-content,
 #body .tab-panel-style.cstyle.default.tab-content,
 #body .tab-panel-style.cstyle.transparent.tab-content{
     background-color: var(--VARIABLE-BOX-BG-color);
diff --git a/static/js/theme.js b/static/js/theme.js
index 8c6a7ec880..3d23364d04 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -65,6 +65,23 @@ function adjustContentWidth(){
     elc.style[ dir_padding_end ] = '' + end + 'px';
 }
 
+function fixCodeTabs(){
+    /* if only a single code block is contained in the tab and no style was selected, treat it like style=code */
+    var codeTabPanels = Array.from( document.querySelectorAll( '.tab-content.tab-panel-style.initial' ) ).filter( function( tabPanel ){
+        return tabPanel.querySelector( '.tab-content-text > div.highlight:only-child');
+    });
+
+    codeTabPanels.forEach( function( tabPanel ){
+        tabPanel.classList.remove( 'initial' );
+        tabPanel.classList.add( 'code' );
+        tabId = tabPanel.dataset.tabItem;
+        var p = tabPanel.parentNode.parentNode;
+        var tabButton = p.querySelector( '.tab-nav-button.tab-panel-style[data-tab-item="'+tabId+'"]' );
+        tabButton.classList.remove( 'initial' );
+        tabButton.classList.add( 'code' );
+    });
+}
+
 function switchTab(tabGroup, tabId) {
     var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){
         return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
@@ -1251,6 +1268,7 @@ ready( function(){
     initToc();
     initAnchorClipboard();
     initCodeClipboard();
+    fixCodeTabs();
     restoreTabSelections();
     initSwipeHandler();
     initHistory();