Use JS to only resize overflowing code blocks

assets/css/style.scss

@@ -534,7 +534,7 @@ h6 {
   left: 50%;
   transform: translateX(-50%);
   position: relative;
-  @media only screen and (max-width: 920px) {
+  &.scroll {
     left: 50%;
     transform: translateX(-50vw);
     border-radius: 0;
@@ -544,9 +544,6 @@ h6 {
     padding-right: 1rem;
     max-width: initial;
     width: 100vw;
-    tr td:first-child {
-      display: none;
-    }
   }
 }
 
@@ -558,11 +555,6 @@ ol > li > .highlight > div {
   }
 }
 
-.highlight {
-  // display: flex;
-  // justify-content: center;
-}
-
 pre {
   display: block;
   font-size: 1.6rem;

config.yaml

@@ -39,7 +39,7 @@ params:
 
   # customCSS: []
   customSCSS: ["css/style.scss", "css/syntax.css"]
-  customJS: ["js/toc.js", "js/footnote.js"]
+  customJS: ["js/toc.js", "js/footnote.js", "js/code.js"]
   customHtml:
 
   googleTagManager:

static/js/code.js

@@ -0,0 +1,25 @@
+var codescroll = function () {
+  console.log("codescroll");
+  var elements = document.querySelectorAll(".highlight > div.chroma");
+  for (element of elements) {
+    // Get the width of the screen
+    let screenWidth = window.innerWidth;
+    let threshold = screenWidth - 110;
+    let firstChild = element.firstElementChild;
+    console.log(
+      screenWidth,
+      threshold,
+      firstChild.offsetWidth,
+      element,
+      firstChild,
+    );
+    if (firstChild.offsetWidth > threshold) {
+      element.classList.add("scroll");
+    } else {
+      element.classList.remove("scroll");
+    }
+  }
+};
+
+codescroll();
+window.onresize = codescroll;