tabs: fix style for indented code blocks #550

McShelby · Jun 7, 2023 · 25e39cf · 25e39cf
1 parent 822a913
commit 25e39cf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/exampleSite/content/shortcodes/tabs.en.md b/exampleSite/content/shortcodes/tabs.en.md
@@ -122,10 +122,8 @@ While pressing a tab of group A switches all tab views of group A in sync (if th
 <Hello>World</Hello>
 ```
 {{%/* /tab */%}}
-{{%/* tab title="properties" */%}}
-```properties
-Hello = World
-```
+{{%/* tab title="text" */%}}
+    Hello World
 {{%/* /tab */%}}
 {{</* /tabs */>}}
 ````
@@ -178,10 +176,10 @@ Hello = World
 <Hello>World</Hello>
 ```
 {{% /tab %}}
-{{% tab title="properties" %}}
-```ini
-Hello = World
-```
+{{% tab title="text" %}}
+
+    Hello World
+
 {{% /tab %}}
 {{< /tabs >}}
 

diff --git a/static/css/theme.css b/static/css/theme.css
@@ -1955,6 +1955,7 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     padding: 0;
 }
 /* remove border from a code block if single  */
-#body .tab-content-text > div.highlight:only-child > pre{
+#body .tab-content-text > div.highlight:only-child > pre,
+#body .tab-content-text > pre.pre-code:only-child{
     border: 0;
 }
diff --git a/static/js/theme.js b/static/js/theme.js
@@ -68,7 +68,7 @@ function adjustContentWidth(){
 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');
+        return tabPanel.querySelector( '.tab-content-text > div.highlight:only-child, .tab-content-text > pre.pre-code:only-child');
     });
 
     codeTabPanels.forEach( function( tabPanel ){