Align code block to new color scheme

Codeblock with line numbers change format of copy code button, updated.

_posts/2023-05-19-kvm.markdown

@@ -42,7 +42,30 @@ RouteMetric=10
 
 The PiKVM configuration override goes in `/etc/kvmd/override.yaml`. Make sure to run `rw` to make the filesystem writeable before editing it, and `ro` when you are done. I’m using the default IP of the Tesmart and a /31 subnet to avoid changing it, but if you do change the IP you’d change it here as well.
 
-```yaml
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+
+<figure id="highlight-figure">
+  <figcaption>File: folderName/fileName.rb</figcaption>
+    {% highlight ruby %}
+    def print_hi(name)
+      puts "Hi, #{name}"
+    end
+    print_hi('Tom')
+    #=> prints 'Hi, Tom' to STDOUT.
+    {% endhighlight %}
+</figure>
+
+
+<figure id="highlight-figure">
+  <figcaption>File: folderName/fileName.rb</figcaption>
+{% highlight yaml linenos %}
 kvmd:
     gpio:
         drivers:
@@ -135,4 +158,102 @@ kvmd:
                 - ["#Minilab", server5_led, server5_switch|Switch]
                 - ["#OPNsense", server6_led, server6_switch|Switch]
                 - ["#Iridium",  server7_led, server7_switch|Switch]
-```
+{% endhighlight %}
+</figure>
+
+
+{% highlight yaml linenos %}
+kvmd:
+    gpio:
+        drivers:
+            tes:
+                type: tesmart
+                host: 192.168.1.10
+                port: 5000
+        scheme:
+            server0_led:
+                driver: tes
+                pin: 0
+                mode: input
+            server0_switch:
+                driver: tes
+                pin: 0
+                mode: output
+                switch: false
+            server1_led:
+                driver: tes
+                pin: 1
+                mode: input
+            server1_switch:
+                driver: tes
+                pin: 1
+                mode: output
+                switch: false    
+            server2_led:
+                driver: tes
+                pin: 2
+                mode: input
+            server2_switch:
+                driver: tes
+                pin: 2
+                mode: output
+                switch: false    
+            server3_led:
+                driver: tes
+                pin: 3
+                mode: input
+            server3_switch:
+                driver: tes
+                pin: 3
+                mode: output
+                switch: false    
+            server4_led:
+                driver: tes
+                pin: 4
+                mode: input
+            server4_switch:
+                driver: tes
+                pin: 4
+                mode: output
+                switch: false    
+            server5_led:
+                driver: tes
+                pin: 5
+                mode: input
+            server5_switch:
+                driver: tes
+                pin: 5
+                mode: output
+                switch: false    
+            server6_led:
+                driver: tes
+                pin: 6
+                mode: input
+            server6_switch:
+                driver: tes
+                pin: 6
+                mode: output
+                switch: false    
+            server7_led:
+                driver: tes
+                pin: 7
+                mode: input
+            server7_switch:
+                driver: tes
+                pin: 7
+                mode: output
+                switch: false
+        view:
+            table:
+                - ["TESMART Switch"]
+                - []
+                - ["#Terra NAS", server0_led, server0_switch|Switch]
+                - ["#Megalab", server1_led, server1_switch|Switch]
+                - ["#PVE1", server2_led, server2_switch|Switch]
+                - ["#PVE2", server3_led, server3_switch|Switch]
+                - ["#PVE3", server4_led, server4_switch|Switch]
+                - ["#Minilab", server5_led, server5_switch|Switch]
+                - ["#OPNsense", server6_led, server6_switch|Switch]
+                - ["#Iridium",  server7_led, server7_switch|Switch]
+{% endhighlight %}
+

_sass/_post.scss

@@ -12,27 +12,80 @@ code {
 code {
   padding: 1px 5px;
   background-color: rgba(255, 168, 106, 0.2);
+  background-color: rgba(8,76,207,.1);
   color: var(--brand-color);
   margin: 0 2px;
   padding: 1px 6px;
   border: none;
 }
 
-pre {
+figure.highlight {
-  padding: 8px 12px;
+  @include border-accent;
-  padding: 1.25em;
+
-  overflow-x: auto;
+  > pre {
+    // padding: 0;
+    margin-bottom: 0;
 
     > code {
       background-color: unset;
-    border: 0;
+      color: unset;
-    padding-right: 0;
+      margin: 0;
-    padding-left: 0;
+      padding: 0;
+      border: none;
+    }
   }
 }
 
-div.highlight {
+figure#highlight-figure {
   position: relative;
+
+  > figcaption {
+    position: absolute;
+    bottom: 0.5rem;
+    z-index: 1;
+  }
+}
+
+.rouge-table {
+  > pre {
+    overflow-x: auto;
+    @include border-accent;
+  }
+
+  .lineno {
+    text-align: right;
+    border-right-color: lightgrey;
+    margin-left: -2rem;
+    padding-right: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  td > pre {
+    padding: 0;
+    // padding: 1rem 0.5rem;
+  }
+
+  &:not(.lineno) {
+    border-left: none;
+  }
+
+ }
+
+
+
+figure.highlight {
+  position: relative;
+
+ table {
+    border-collapse: collapse;
+    margin-bottom: 0;
+
+    td {
+      padding: 0;
+      border-style: hidden !important;
+    }
+  }
+
 }
 
 .highlight > button {
@@ -46,11 +99,11 @@ div.highlight {
 
   background: hsla(0, 0%, 87.8%, 0.8) !important;
   border-radius: 0 !important;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.8) !important;
+  box-shadow: 0 2px 0 0 rgba(8,76,207,.5) !important;
   color: black;
   font-size: 0.8em !important;
   margin: 6px !important;
-  padding: 10px !important;
+  padding: 0.5rem 0.8rem;
   transition: all 0.5s ease;
 }
 

assets/scripts/copyCode.js

@@ -1,6 +1,6 @@
 // This assumes that you're using Rouge; if not, update the selector
 // const codeBlocks = document.querySelectorAll('.code-header + .highlighter-rouge');
-const codeBlocks = document.querySelectorAll('div.highlight');
+const codeBlocks = document.querySelectorAll('figure.highlight');
 const copyCodeButtons = document.querySelectorAll('.copy-code-button');
 
 codeBlocks.forEach((codeBlock) => {
@@ -13,7 +13,7 @@ codeBlocks.forEach((codeBlock) => {
   codeBlock.append(copyButton);
 
   copyButton.addEventListener('click', function () {
-    const code = codeBlock.querySelector('code').innerText.trim();
+    const code = codeBlock.querySelector('.code').innerText.trim();
     window.navigator.clipboard.writeText(code);
 
     copyButton.innerText = 'Copied';