Codeblocks: Use theme switcher for codeblocks

Author: nginx-jack

assets/css/v2/style.css

@@ -745,7 +745,7 @@ blockquote p:last-child {
 }
 
 /* Codeblocks */
-.highlight {
+.highlight-mf {
     grid-column: 1 / -1 !important;
     position: relative;
     margin-left: calc(var(--overflow-gutter-extension) / -2);

layouts/_default/_markup/render-codeblock.html

@@ -1,14 +1,17 @@
 {{ $code := .Inner | safeHTML }}
 {{ $lines := split $code "\n" }}
-<div class="highlight">
-    <pre class="chroma" tabindex="0">
+<div data-mf="true" class="highlight-mf" style="display: none">
+  <pre class="chroma" tabindex="0">
         <code class="language-{{ .Type }}">
             {{ range $lines }}
                 <span class="line">{{ $line := . }}{{ $parts := split $line "#" }}<span class="code">{{ index $parts 0 | safeHTML }}
 </span>{{ $commentPart := "" }}{{ if gt (len $parts) 1 }}<span class="comment">{{ index $parts 1 | safeHTML }}</span>{{ end }}</span>
             {{ end }}
         </code>
-    </pre> 
+    </pre>
 </div>
 
+{{ $result := transform.HighlightCodeBlock . }}
+{{ $result.Wrapped }}
+
 <!-- ABSOLUTELY DO NOT CHANGE THIS ORDER -->