🎨 Hide empty content <div class="highlight-*"> elements

Author: shnizzedy

docs/_sources/_static/custom.css

@@ -18,3 +18,9 @@
   width: 100%;
   height: auto;
 }
+
+/* empty content highlight divs ―
+   see 'hideEmptyHighlights.js' */
+div[class*=" highlight"].hidden, div[class^=highlight].hidden {
+	display: none;
+}

docs/_sources/_static/hideEmptyHighlights.js

@@ -0,0 +1,9 @@
+/* Hide highlight containers only empty spans */
+document.addEventListener("DOMContentLoaded", function() {
+  const highlightDivs = document.querySelectorAll('div[class^="highlight"], div[class*=" highlight"]');
+  highlightDivs.forEach(function(highlightDiv) {
+    if (highlightDiv.textContent.trim() === '') {
+      highlightDiv.classList.add('hidden');
+    }
+  });
+});

docs/_sources/conf.py

@@ -437,6 +437,7 @@ def _unireplace(release_note, unireplace):
     'custom.css',
 ]
 html_js_files = [
+    'hideEmptyHighlights.js',
     ('versionList.js', {'defer': 'defer'})]
 
 # If not '', a 'Last updated on:' timestamp is inserted at every page bottom,