diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
index 5cd4b2fbe..c84bdca5f 100644
--- a/assets/css/_partial/_single/_code.scss
+++ b/assets/css/_partial/_single/_code.scss
@@ -187,16 +187,6 @@ pre,
   .gl {
     text-decoration: underline
   }
-
-  // @each $class, $color in $code-highlight-color-map {
-  //   .#{$class} { color: $color; }
-  // }
-
-  // [theme=dark] & {
-  //   @each $class, $color in $code-highlight-color-map-dark {
-  //     .#{$class} { color: $color; }
-  //   }
-  // }
 }
 
 .gist {
@@ -220,5 +210,6 @@ pre,
 pre > code > span::before {
   counter-increment: codeblock;
   content: counter(codeblock);
-  margin: 10px;
+  margin: 0 1rem;
+  color: var(--global-font-color);
 }
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index f19c798d8..d386be8da 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -10,7 +10,7 @@
       <button class="tw-select-none tw-mx-2 tw-hidden group-[.is-open]:tw-block group-[.is-wrap]:tw-text-doit-blue-light dark:group-[.is-wrap]:tw-text-doit-blue-dark print:!tw-hidden" aria-label="Toggle code wrap" id="wrap-code-{{ $id }}" onclick="toggleCodeblockWrap('{{ $id }}')">{{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "bars") }}</button><button class="tw-select-none tw-mx-2 tw-hidden group-[.is-open]:tw-block hover:tw-text-doit-blue-light dark:hover:tw-text-doit-blue-dark print:!tw-hidden" id="copy-code-{{ $id }}" onclick="copyCode('{{ $id }}')">{{ partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "copy") }}</button><button disabled class="tw-select-none tw-mx-2 tw-block group-[.is-open]:tw-hidden print:!tw-hidden" id="copy-code-{{ $id }}">{{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "ellipsis-h") }}</button>
     </div>
   </div>
-  <pre style="counter-reset: codeblock;" class="tw-block"><code id="codeblock-{{ $id }}" class="!tw-block tw-transition-[max-height] tw-duration-500 tw-ease-in-out">{{ $result.Inner }}</code></pre>
+  <pre style="counter-reset: codeblock;" class="tw-block"><code id="codeblock-{{ $id }}" class="chroma !tw-block tw-transition-[max-height] tw-duration-500 tw-ease-in-out">{{ $result.Inner }}</code></pre>
 </div>
 
 <script>