From 5278b4bfd83b12b45e6954c0f7306e9c9cb05741 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Sun, 18 Feb 2024 13:14:55 +0100 Subject: [PATCH] Align code block to new color scheme Codeblock with line numbers change format of copy code button, updated. --- _posts/2023-05-19-kvm.markdown | 125 ++++++++++++++++++++++++++++++++- _sass/_post.scss | 77 ++++++++++++++++---- assets/scripts/copyCode.js | 4 +- 3 files changed, 190 insertions(+), 16 deletions(-) diff --git a/_posts/2023-05-19-kvm.markdown b/_posts/2023-05-19-kvm.markdown index 3312ae6..1eb166d 100644 --- a/_posts/2023-05-19-kvm.markdown +++ b/_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 %} + + +
+
File: folderName/fileName.rb
+ {% highlight ruby %} + def print_hi(name) + puts "Hi, #{name}" + end + print_hi('Tom') + #=> prints 'Hi, Tom' to STDOUT. + {% endhighlight %} +
+ + +
+
File: folderName/fileName.rb
+{% 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 %} +
+ + +{% 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 %} + diff --git a/_sass/_post.scss b/_sass/_post.scss index d53375b..da7e683 100644 --- a/_sass/_post.scss +++ b/_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 { - padding: 8px 12px; - padding: 1.25em; - overflow-x: auto; +figure.highlight { + @include border-accent; - > code { - background-color: unset; - border: 0; - padding-right: 0; - padding-left: 0; + > pre { + // padding: 0; + margin-bottom: 0; + + > code { + background-color: unset; + color: unset; + margin: 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; } diff --git a/assets/scripts/copyCode.js b/assets/scripts/copyCode.js index 3695fe1..916b0ff 100644 --- a/assets/scripts/copyCode.js +++ b/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';