diff --git a/apps/test/content/posts/codeblock-test.md b/apps/test/content/posts/codeblock-test.md
index 0716863e..f26afbc0 100644
--- a/apps/test/content/posts/codeblock-test.md
+++ b/apps/test/content/posts/codeblock-test.md
@@ -193,4 +193,8 @@ function isObjectLiteral(str) {
 
 ## Gist Embed
 
-{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}}
+```md
+{{</* gist Lruihao fb8b2d0353465c4d40bf74818db80710 */>}}
+```
+
+<!-- {{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}} -->
diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
index b304c539..e8d7e342 100644
--- a/assets/css/_core/_root.scss
+++ b/assets/css/_core/_root.scss
@@ -30,7 +30,8 @@
   #{$rootPrefix}code-inline-background-color: rgba(175, 184, 193, 0.2);
   #{$rootPrefix}code-block-background-color: #{$code-background-color};
   #{$rootPrefix}code-header-color: #{$code-header-color};
-  #{$rootPrefix}code-header-bg: #{darken($code-background-color, 5%)};
+  #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 5%)};
+  #{$rootPrefix}code-highlight-color: #{$code-highlight-color};
   #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color, 5%)};
 
   // Theme colors variables
@@ -51,7 +52,8 @@
   #{$rootPrefix}code-inline-background-color: rgba(99, 110, 123, 0.4);
   #{$rootPrefix}code-block-background-color: #{$code-background-color-dark};
   #{$rootPrefix}code-header-color: #{$code-header-color-dark};
-  #{$rootPrefix}code-header-bg: #{darken($code-background-color-dark, 5%)};
+  #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 5%)};
+  #{$rootPrefix}code-highlight-color: #{$code-highlight-color-dark};
   #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color-dark, 5%)};
 
   @each $color, $value in $theme-colors {
diff --git a/assets/css/_mixin/_compatibility.scss b/assets/css/_mixin/_compatibility.scss
index 79e78e3d..a75af355 100644
--- a/assets/css/_mixin/_compatibility.scss
+++ b/assets/css/_mixin/_compatibility.scss
@@ -83,6 +83,7 @@
   -webkit-appearance: $value;
 }
 
+// TODO Superseded by text-wrap: wrap; in modern browsers
 @mixin overflow-wrap($value) {
   word-wrap: $value;
   overflow-wrap: $value;
diff --git a/assets/css/_partials/_code-syntax/_index.scss b/assets/css/_partials/_code-syntax/_index.scss
index 31ac9ed2..cf8d4488 100644
--- a/assets/css/_partials/_code-syntax/_index.scss
+++ b/assets/css/_partials/_code-syntax/_index.scss
@@ -19,11 +19,6 @@
     display: block;
     background-color: var(#{$rootPrefix}code-highlight-color);
     box-shadow: -0.75rem 0 0 var(#{$rootPrefix}code-highlight-color), 0.75rem 0 0 var(#{$rootPrefix}code-highlight-color);
-    #{$rootPrefix}code-highlight-color: #{$code-highlight-color};
-
-    [data-theme='dark'] & {
-      #{$rootPrefix}code-highlight-color: #{$code-highlight-color-dark};
-    }
   }
 
   @import '../_code-syntax/light';
diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
index 3723390f..07c413e8 100644
--- a/assets/css/_partials/_single/_code.scss
+++ b/assets/css/_partials/_single/_code.scss
@@ -42,60 +42,44 @@ pre:not([data-processed]) {
 .gist {
   font-size: $code-block-font-size;
   font-family: $code-font-family;
+  #{$rootPrefix}scrollbar-thumb-color: inherit;
 
-  .code-wrapper {
-    position: relative;
-    #{$rootPrefix}scrollbar-thumb-color: initial;
+  table {
+    width: 100%;
+    max-width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
 
-    > table {
-      width: 100%;
-      max-width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-    }
-
-    > table,
-    > table thead,
-    > table tr,
-    > table td {
-      margin: 0;
-      padding: 0;
-      border: none;
-    }
+  table,
+  table thead,
+  table tr,
+  table td {
+    margin: 0;
+    padding: 0;
+    border: none;
   }
 }
 
-// block fenced code
+// Code fences blocks or highlight shortcodes
 .highlight {
   margin: 0.5rem 0;
   position: relative;
 
-  .code-wrapper {
-    overflow: hidden;
-    height: auto;
-    counter-reset: codeNos calc(var(#{$rootPrefix}line-start) - 1);
-    @include border-radius($global-border-radius);
-    @include transition(height 0.5s ease-out);
-    @include border-radius($global-border-radius);
-    // attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
-    // non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
-    #{$rootPrefix}max-shown-lines: attr(data-max number, 10);
-    #{$rootPrefix}line-start: attr(data-line-start number, 1);
-    #{$rootPrefix}line-digit: attr(data-line-digit number, 1);
-  }
-
   > .chroma {
     position: relative;
+    background-color: var(#{$rootPrefix}code-block-background-color);
+    @include border-radius($global-border-radius);
 
     &:is(pre):has(.ln) {
       padding: 0.5rem;
     }
 
     .lntable {
-      width: auto;
       overflow: auto;
       display: block;
       background-color: var(#{$rootPrefix}code-block-background-color);
+      @include border-radius($global-border-radius);
 
       td {
         vertical-align: top;
@@ -107,11 +91,6 @@ pre:not([data-processed]) {
         @include border-radius(0);
       }
 
-      /* lineNumbersInTable=false */
-      .ln {
-        min-width: 1.25rem;
-      }
-
       // ========== lineNumbersInTable ========== //
       // line numbers
       .lntd:first-child {
@@ -129,311 +108,349 @@ pre:not([data-processed]) {
     }
   }
 
-  .code-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    font-family: $global-font-family;
-    font-weight: bold;
-    line-height: 1.4em;
-    color: var(#{$rootPrefix}code-header-color);
-    background-color: var(#{$rootPrefix}code-header-bg);
-    @include border-radius($global-border-radius $global-border-radius 0 0);
-    @include transition(border-radius 0s);
-
-    + .code-wrapper {
-      @include border-radius(0 0 $global-border-radius $global-border-radius);
-
-      > pre.chroma {
-        @include border-radius(0 0 $global-border-radius $global-border-radius);
-      }
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    .code-title {
-      width: 100%;
-      padding: 0.4rem;
-
-      &::after {
-        padding-left: 0.2rem;
-        content: attr(data-name, var(#{$rootPrefix}code-type, 'Code'));
-      }
-
-      // filename for code block
-      &[data-name]::after {
-        @include overflow-wrap(break-word);
-      }
-
-      .arrow {
-        padding: 0 0.2rem;
-        @include transition(transform 0.2s ease);
-      }
-
-      .title-inner {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: var(#{$rootPrefix}code-header-bg);
-        padding-inline: 1em;
-        max-width: 80%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        @include z-index(0, 1);
-      }
-    }
-
-    .ellipses-btn {
-      display: none;
-      padding: 0.4rem;
-    }
-
-    [role='button'] {
-      padding: 0.4rem;
-      @extend .print-d-none;
-    }
-
-    @each $type, $text in $code-type-map {
-      &.language-#{to-lower-case($type)} {
-        #{$rootPrefix}code-type: $text;
-      }
-    }
-  }
-
-  .code-copy-btn {
-    @extend .diagram-copy-btn;
-  }
-
-  .code-expand-btn {
-    width: 100%;
-    padding-block: 1rem;
-    text-align: center;
-    position: absolute;
-    bottom: 0;
-    background: linear-gradient(
-      180deg,
-      rgba($code-background-color, 0) 0%,
-      rgba($code-background-color, 0.9) 60%,
-      $code-background-color 100%
-    );
-    @include z-index(0, 1);
-
-    [data-theme='dark'] & {
-      background: linear-gradient(
-        180deg,
-        rgba($code-background-color-dark, 0) 0%,
-        rgba($code-background-color-dark, 0.9) 60%,
-        $code-background-color-dark 100%
-      );
-    }
-
-    .fa-angles-down {
-      opacity: 0;
-      animation-name: fadeOutDown;
-      animation-duration: 1.5s;
-      animation-iteration-count: infinite;
-      animation-delay: 0.3s;
-      @include transition(transform 0.2s ease);
-    }
-  }
-
-  &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
-    .code-wrapper {
-      height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
-    }
-    &[data-mode='mac'] .code-wrapper {
-      #{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
-    }
-  }
-
-  &.line-wrapping .line-wrap-btn,
-  &:not(.line-nos-hidden) .line-nos-btn,
-  .code-header [role='button']:hover,
-  &:has([contenteditable='true']) .edit-btn {
-    color: $global-link-hover-color;
-
-    [data-theme='dark'] & {
-      color: $global-link-hover-color-dark;
-    }
-  }
-
-  &.is-collapsed {
-    .code-header {
-      #{$rootPrefix}code-header-bg: #{darken($code-background-color, 6%)};
-      @include border-radius($global-border-radius);
-      @include transition(border-radius 0.2s ease 0.2s);
-
-      [data-theme='dark'] & {
-        #{$rootPrefix}code-header-bg: #{darken($code-background-color-dark, 6%)};
-      }
-
-      + .code-wrapper {
-        height: 0;
-      }
-    }
-
-    .arrow {
-      @include transform(rotate(-90deg));
-    }
-
-    .ellipses-btn {
-      display: inline;
-    }
-
-    .code-header [role='button']:not(.ellipses-btn),
-    .code-expand-btn {
-      display: none;
-    }
-  }
-
-  &.is-expanded {
-    margin-bottom: 1rem;
-    &:has([contenteditable='true']) .code-expand-btn {
-      display: none;
-    }
-    .code-expand-btn {
-      background: transparent;
-      padding-block: 0;
-      transform: translateY(1rem);
-
-      .fa-angles-down {
-        animation-name: fadeOutRotate;
-
-        @keyframes fadeOutRotate {
-          0% {
-            opacity: 1;
-            transform: rotate(180deg);
-          }
-          100% {
-            opacity: 0;
-            transform: rotate(180deg) translate3d(0, 100%, 0);
-          }
-        }
-      }
-    }
-  }
-
-  &.line-nos-hidden {
-    > .chroma .lntable {
-      width: 100%;
-      display: table;
-    }
-    // hide original line number column
-    .lntd:first-child,
-    .ln {
-      display: none;
-    }
-  }
-
-  &.line-wrapping {
-    > .chroma .lntable {
-      width: 100%;
-      display: table;
-
-      // hide original line number column
-      .lntd:first-child {
-        display: none;
-      }
-    }
-    .lntd:last-child pre.chroma,
-    .code-wrapper > pre.chroma {
-      code {
-        text-wrap: wrap;
-      }
-    }
-  }
-
-  // line number for code block with line wrapping or lineNos=false
-  &.line-wrapping:not(.line-nos-hidden) .lntd:last-child pre.chroma,
-  &:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
-    padding-left: 0;
-    > code > .line {
-      display: flex;
-
-      &::before {
-        counter-increment: codeNos;
-        content: counter(codeNos);
-        text-wrap: nowrap;
-        text-align: right;
-        min-width: calc(var(#{$rootPrefix}line-digit) * 1ch);
-        padding-inline: 0.75rem;
-        flex-shrink: 0;
-        color: var(#{$rootPrefix}global-font-secondary-color);
-        background-color: var(#{$rootPrefix}code-block-background-color);
-      }
-    }
-  }
-
-  // add sticky effect for line number column when lineNos=false
-  &:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
-    position: sticky;
-    left: 0;
-  }
-
-  &:not(.line-nos-hidden) {
-    > .chroma {
-      .lntable {
-        .lntd:last-child pre.chroma {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-
-  /* lineNumbersInTable=false */
+  // lineNumbersInTable=false
   .ln {
     padding-right: 0.75rem;
     display: inline-block;
     text-align: right;
+    position: sticky;
+    left: 0;
   }
-  /* LineNumbers */
+  // Line numbers
   .lnt,
   .ln {
     color: var(#{$rootPrefix}global-font-secondary-color);
     @include user-select(none);
   }
 
-  &[data-mode='mac'] {
-    pre.chroma {
-      padding-top: 1.875rem;
+  &:not(.code-block) {
+    .lntd:last-child pre.chroma {
+      padding-left: 0;
+    }
+  }
 
-      &::after {
-        background: var(#{$rootPrefix}mac-red, #fc625d);
-        box-shadow: 20px 0 var(#{$rootPrefix}mac-yellow, #fdbc40), 40px 0 var(#{$rootPrefix}mac-green, #35cd4b);
-        left: 8px;
-        top: 8px;
-        position: absolute;
-        border-radius: 50%;
-        content: ' ';
-        height: 12px;
-        width: 12px;
+  // code fences blocks wrapped
+  &.code-block {
+    .code-wrapper {
+      overflow: hidden;
+      height: auto;
+      position: relative;
+      counter-reset: codeNos calc(var(#{$rootPrefix}line-start) - 1);
+      @include border-radius($global-border-radius);
+      @include transition(height 0.5s ease-out);
+      @include border-radius($global-border-radius);
+      // attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
+      // non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
+      #{$rootPrefix}max-shown-lines: attr(data-max number, 10);
+      #{$rootPrefix}line-start: attr(data-line-start number, 1);
+      #{$rootPrefix}line-digit: attr(data-line-digit number, 1);
+    }
 
-        [data-theme='dark'] & {
-          #{$rootPrefix}mac-red-dark: #ff5f56;
-          #{$rootPrefix}mac-yellow-dark: #febc2e;
-          #{$rootPrefix}mac-green-dark: #28c840;
+    // code preview
+    &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
+      .code-wrapper {
+        height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
+      }
+      &[data-mode='mac'] .code-wrapper {
+        #{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
+      }
+    }
+    
+    .code-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: $global-font-family;
+      font-weight: bold;
+      line-height: 1.4em;
+      color: var(#{$rootPrefix}code-header-color);
+      background-color: var(#{$rootPrefix}code-header-background-color);
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+      @include transition(border-radius 0s);
+
+      + .code-wrapper {
+        @include border-radius(0 0 $global-border-radius $global-border-radius);
+
+        > pre.chroma {
+          @include border-radius(0 0 $global-border-radius $global-border-radius);
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .code-title {
+        width: 100%;
+        padding: 0.4rem;
+
+        &::after {
+          padding-left: 0.2rem;
+          content: attr(data-name, var(#{$rootPrefix}code-type, 'Code'));
+        }
+
+        // filename for code block
+        &[data-name]::after {
+          @include overflow-wrap(break-word);
+        }
+
+        .arrow {
+          padding: 0 0.2rem;
+          @include transition(transform 0.2s ease);
+        }
+
+        .title-inner {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          background-color: var(#{$rootPrefix}code-header-background-color);
+          padding-inline: 1em;
+          max-width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          @include z-index(0, 1);
+        }
+      }
+
+      .ellipses-btn {
+        display: none;
+        padding: 0.4rem;
+      }
+
+      [role='button'] {
+        padding: 0.4rem;
+        @extend .print-d-none;
+      }
+
+      @each $type, $text in $code-type-map {
+        &.language-#{to-lower-case($type)} {
+          #{$rootPrefix}code-type: $text;
         }
       }
     }
-  }
 
-  &[data-mode='simple'] {
-    pre.chroma {
-      padding-block: 0.875rem;
+    &.line-wrapping .line-wrap-btn,
+    &:not(.line-nos-hidden) .line-nos-btn,
+    .code-header [role='button']:hover,
+    &:has([contenteditable='true']) .edit-btn {
+      color: $global-link-hover-color;
+
+      [data-theme='dark'] & {
+        color: $global-link-hover-color-dark;
+      }
     }
-  }
 
-  // add border for non-classic mode
-  &.code-block:not([data-mode='classic']) {
-    border: 1px solid darken($code-background-color, 3%);
+    .code-expand-btn {
+      width: 100%;
+      padding-block: 1rem;
+      text-align: center;
+      position: absolute;
+      bottom: 0;
+      background: linear-gradient(
+        180deg,
+        rgba($code-background-color, 0) 0%,
+        rgba($code-background-color, 0.9) 60%,
+        $code-background-color 100%
+      );
+      @include z-index(0, 1);
 
-    [data-theme='dark'] & {
-      border-color: darken($code-background-color-dark, 3%);
+      [data-theme='dark'] & {
+        background: linear-gradient(
+          180deg,
+          rgba($code-background-color-dark, 0) 0%,
+          rgba($code-background-color-dark, 0.9) 60%,
+          $code-background-color-dark 100%
+        );
+      }
+
+      .fa-angles-down {
+        opacity: 0;
+        animation-name: fadeOutDown;
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+        animation-delay: 0.3s;
+        @include transition(transform 0.2s ease);
+      }
+    }
+
+    .code-copy-btn {
+      @extend .diagram-copy-btn;
+    }
+
+    // classic mode code block collapsed
+    &.is-collapsed {
+      .code-header {
+        #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)};
+        @include border-radius($global-border-radius);
+        @include transition(border-radius 0.2s ease 0.2s);
+
+        [data-theme='dark'] & {
+          #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)};
+        }
+
+        + .code-wrapper {
+          height: 0;
+        }
+      }
+
+      .arrow {
+        @include transform(rotate(-90deg));
+      }
+
+      .ellipses-btn {
+        display: inline;
+      }
+
+      .code-header [role='button']:not(.ellipses-btn),
+      .code-expand-btn {
+        display: none;
+      }
+    }
+
+    // code preview expanded
+    &.is-expanded {
+      margin-bottom: 1rem;
+      &:has([contenteditable='true']) .code-expand-btn {
+        display: none;
+      }
+      .code-expand-btn {
+        background: transparent;
+        padding-block: 0;
+        transform: translateY(1rem);
+
+        .fa-angles-down {
+          animation-name: fadeOutRotate;
+
+          @keyframes fadeOutRotate {
+            0% {
+              opacity: 1;
+              transform: rotate(180deg);
+            }
+            100% {
+              opacity: 0;
+              transform: rotate(180deg) translate3d(0, 100%, 0);
+            }
+          }
+        }
+      }
+    }
+
+    // hide original line numbers
+    &.line-nos-hidden {
+      > .chroma .lntable {
+        width: 100%;
+        display: table;
+      }
+      .lntd:first-child,
+      .ln {
+        display: none;
+      }
+    }
+
+    // line wrapping
+    &.line-wrapping {
+      > .chroma .lntable {
+        width: 100%;
+        display: table;
+
+        // hide original line numbers
+        .lntd:first-child {
+          display: none;
+        }
+      }
+      .lntd:last-child pre.chroma,
+      .code-wrapper > pre.chroma {
+        code {
+          text-wrap: wrap;
+          white-space: pre-wrap;
+          @include overflow-wrap(break-word);
+        }
+      }
+    }
+
+    // line numbers (pseudo-elements) for code block with line wrapping or lineNos=false
+    &.line-wrapping:not(.line-nos-hidden) .lntd:last-child pre.chroma,
+    &:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
+      padding-left: 0;
+      > code > .line {
+        display: flex;
+
+        &::before {
+          counter-increment: codeNos;
+          content: counter(codeNos);
+          white-space: nowrap;
+          text-align: right;
+          min-width: calc(var(#{$rootPrefix}line-digit) * 1ch);
+          padding-inline: 0.75rem;
+          flex-shrink: 0;
+          color: var(#{$rootPrefix}global-font-secondary-color);
+          background-color: var(#{$rootPrefix}code-block-background-color);
+        }
+
+        // highlight for line numbers
+        &.hl::before {
+          background-color: transparent;
+        }
+      }
+    }
+
+    // add sticky effect for line numbers when lineNos=false
+    &:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
+      position: sticky;
+      left: 0;
+    }
+
+    // when line numbers shown
+    &:not(.line-nos-hidden) {
+      > .chroma {
+        .lntable {
+          .lntd:last-child pre.chroma {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+
+    // add border for non-classic mode
+    &:not([data-mode='classic']) {
+      border: 1px solid darken($code-background-color, 3%);
+
+      [data-theme='dark'] & {
+        border-color: darken($code-background-color-dark, 3%);
+      }
+    }
+
+    &[data-mode='mac'] {
+      pre.chroma {
+        padding-top: 1.875rem;
+
+        &::after {
+          background: var(#{$rootPrefix}mac-red, #fc625d);
+          box-shadow: 20px 0 var(#{$rootPrefix}mac-yellow, #fdbc40), 40px 0 var(#{$rootPrefix}mac-green, #35cd4b);
+          left: 8px;
+          top: 8px;
+          position: absolute;
+          border-radius: 50%;
+          content: ' ';
+          height: 12px;
+          width: 12px;
+
+          [data-theme='dark'] & {
+            #{$rootPrefix}mac-red-dark: #ff5f56;
+            #{$rootPrefix}mac-yellow-dark: #febc2e;
+            #{$rootPrefix}mac-green-dark: #28c840;
+          }
+        }
+      }
+    }
+
+    &[data-mode='simple'] {
+      pre.chroma {
+        padding-block: 0.875rem;
+      }
     }
   }
 }
@@ -456,6 +473,22 @@ pre:not([data-processed]) {
 
     .blob-wrapper {
       padding-block: 0.5rem;
+
+      table.highlight {
+        background-color: inherit;
+        overflow: initial;
+
+        td.blob-num {
+          position: sticky;
+          left: 0;
+          background-color: var(#{$rootPrefix}code-block-background-color);
+          @include z-index(0, 1);
+        }
+
+        td.blob-code {
+          padding-left: 2px !important;
+        }
+      }
     }
   }
 
@@ -466,18 +499,6 @@ pre:not([data-processed]) {
     background-color: var(#{$rootPrefix}gist-meta-background-color);
   }
 
-  table.highlight {
-    margin: 0;
-    background-color: inherit;
-
-    td.blob-num {
-      position: sticky;
-      left: 0;
-      background-color: var(#{$rootPrefix}code-block-background-color);
-      @include z-index(0, 1);
-    }
-  }
-
   [data-theme='dark'] & {
     @import '../_code-syntax/github-dark-dimmed';
   }
diff --git a/hugo.toml b/hugo.toml
index b435b75f..1392fafd 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1108,7 +1108,7 @@ maxShownLines = 10
 copyable = true
 # [classic] whether to enable line numbers toggle button in the code block header
 lineNosToggler = true
-# [classic] whether to enable toggle line wrapping in the code block header
+# [classic] whether to enable toggle line wrapping button in the code block header
 lineWrapToggler = true
 # [classic][Experimental] whether to enable code edit button in the code block header
 editable = false
diff --git a/layouts/_markup/render-codeblock-json.html b/layouts/_markup/render-codeblock-json.html
index a8a0c22f..899a771b 100644
--- a/layouts/_markup/render-codeblock-json.html
+++ b/layouts/_markup/render-codeblock-json.html
@@ -17,6 +17,5 @@
     {{- site.Home.Store.Set "hasJsonViewer" true -}}
   {{- end -}}
 {{- else -}}
-  {{- $result := transform.HighlightCodeBlock . -}}
-  {{- $result.Wrapped -}}
+  {{- partial "plugin/code-block-wrapper.html" . -}}
 {{- end -}}
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
index d56071f4..c03679ac 100644
--- a/layouts/_markup/render-codeblock.html
+++ b/layouts/_markup/render-codeblock.html
@@ -1,91 +1 @@
-{{- $config := .Attributes | merge (.Page.Param "codeblock") -}}
-{{- $result := transform.HighlightCodeBlock . -}}
-{{- $wrapper := $result.Wrapped -}}
-
-{{- /* Add code wrapper */ -}}
-{{- $wrapper = partial "function/code-wrapper.html" $wrapper -}}
-
-{{- if $config.wrapper -}}
-  {{- $mode := $config.mode | default "classic" -}}
-  {{- $lines := cond .Inner (len (split .Inner "\n")) 0 -}}
-  {{- $maxShownLines := $config.maxshownlines -}}
-  {{- $lineNoStart := cond (ne .Options.linenostart nil) .Options.linenostart 1 -}}
-  {{- $lineNosDigit := strings.RuneCount (add $lines $lineNoStart) -}}
-  {{- $class := "highlight" -}}
-  {{- with $config.class -}}{{ $class = add $class " " . }}{{- end -}}
-  {{- $targetClass := add "code-block " $class -}}
-  {{- with $config.wrapperclass -}}{{ $targetClass = add $targetClass " " . }}{{- end -}}
-
-  {{- /* Hide line numbers if linenos=false */ -}}
-  {{- if not (strings.Contains $wrapper `class="lnt"`) | and (not (strings.Contains $wrapper `class="ln"`)) -}}
-    {{- $targetClass = add $targetClass " line-nos-hidden" -}}
-  {{- end -}}
-
-  {{- /* Add code expand button */ -}}
-  {{- if (gt $lines $maxShownLines) | and (gt $lines 0) | and (gt $maxShownLines 0) -}}
-    {{- $wrapper = dict "Wrapper" $wrapper | partial "function/code-expand-btn.html" -}}
-  {{- end -}}
-
-  {{- /* Render for different modes */ -}}
-  {{- if eq $mode "classic" -}}
-    {{- $wrapper = dict "Wrapper" $wrapper "Config" $config "Type" .Type | partial "function/code-header.html" -}}
-  {{- else -}}
-    {{- $wrapper = dict "Wrapper" $wrapper "Config" $config | partial "function/code-copy-btn.html" -}}
-  {{- end -}}
-
-  {{- /* 
-    Add data attributes and class
-    Directly set CSS variables to ensure compatibility with non-Chromium-based browsers
-    See https://caniuse.com/css3-attr for attr() support status
-  */ -}}
-  {{- if $config.editable -}}
-    {{- $wrapper =
-      replace $wrapper
-      (printf `class="%s"` $class)
-      (printf `class="%s" data-editable="%v"` $class $config.editable)
-    -}}
-  {{- end -}}
-  {{- if $config.copyable -}}
-    {{- $wrapper =
-      replace $wrapper
-      (printf `class="%s"` $class)
-      (printf `class="%s" data-copyable="%v"` $class $config.copyable)
-    -}}
-  {{- end -}}
-  {{- if ne .Options.linenostart nil -}}
-    {{- $wrapper =
-      replace $wrapper
-      `class="code-wrapper"`
-      (printf `class="code-wrapper" data-line-start="%v"` .)
-    -}}
-  {{- end -}}
-  {{- $wrapperStyle := printf "--fi-max-shown-lines:%v;--fi-line-digit:%v;--fi-line-start:%v;" $maxShownLines $lineNosDigit $lineNoStart -}}
-  {{- $wrapper =
-    replace $wrapper
-    `class="code-wrapper"`
-    (printf `class="code-wrapper" style="%s"` $wrapperStyle)
-  -}}
-  {{- $wrapper =
-    replace $wrapper
-    `class="code-wrapper"`
-    (printf
-      `class="code-wrapper" data-max="%v" data-line-digit="%d"`
-      $maxShownLines
-      $lineNosDigit
-    )
-  -}}
-  {{- $wrapper =
-    replace $wrapper
-    (printf `class="%s"` $class)
-    (printf `class="%s" data-mode="%s"` $targetClass $mode)
-  -}}
-
-  {{- /* Remove redundant attributes */ -}}
-  {{- $configKeys := slice -}}
-  {{- range $key, $_ := .Page.Param "codeblock" -}}
-    {{- $configKeys = $configKeys | append $key -}}
-  {{- end -}}
-  {{- $wrapper = replaceRE (printf `\s+(?:%s|name)="[^"]*"` (delimit $configKeys "|")) "" $wrapper -}}
-{{- end -}}
-
-{{- $wrapper | safeHTML -}}
+{{- partial "plugin/code-block-wrapper.html" . -}}
diff --git a/layouts/_partials/function/code-wrapper.html b/layouts/_partials/function/code-wrapper.html
deleted file mode 100644
index 84f31df5..00000000
--- a/layouts/_partials/function/code-wrapper.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{{- /* Code wrapper */ -}}
-{{- $REin := cond (strings.Contains . `<table class="lntable">`)
-  `(<table class="lntable">[\s\S]*?<\/table>)`
-  `(<pre tabindex="0" class="chroma">[\s\S]*?<\/pre>)` -}}
-{{- $REout := printf `<div class="code-wrapper">$1</div>` -}}
-{{- return replaceRE $REin $REout . -}}
diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html
index 5a5464a2..40c00f0a 100644
--- a/layouts/_partials/init/index.html
+++ b/layouts/_partials/init/index.html
@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251219093450-0a7f8698" -}}
+{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251219153119-0a614e17" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}
diff --git a/layouts/_partials/plugin/code-block-wrapper.html b/layouts/_partials/plugin/code-block-wrapper.html
new file mode 100644
index 00000000..8a575867
--- /dev/null
+++ b/layouts/_partials/plugin/code-block-wrapper.html
@@ -0,0 +1,90 @@
+{{- /* Hook for code blocks rendering */ -}}
+{{- $config := .Attributes | merge (.Page.Param "codeblock") -}}
+{{- $result := transform.HighlightCodeBlock . -}}
+{{- $wrapper := $result.Wrapped -}}
+
+{{- /* If wrapper is enabled, add code wrapper and more features */ -}}
+{{- if $config.wrapper -}}
+  {{- $mode := $config.mode | default "classic" -}}
+  {{- $lines := cond .Inner (len (split .Inner "\n")) 0 -}}
+  {{- $maxShownLines := $config.maxshownlines -}}
+  {{- $lineNoStart := cond (ne .Options.linenostart nil) .Options.linenostart 1 -}}
+  {{- $lineNosDigit := strings.RuneCount (add $lines $lineNoStart) -}}
+  {{- $class := "highlight" -}}
+  {{- with $config.class -}}{{ $class = add $class " " . }}{{- end -}}
+  {{- $targetClass := add "code-block " $class -}}
+  {{- with $config.wrapperclass -}}{{ $targetClass = add $targetClass " " . }}{{- end -}}
+
+  {{- /* Add code wrapper around the table or pre */ -}}
+  {{- $REin := cond (strings.Contains $wrapper `<table class="lntable">`)
+    `(<table class="lntable">[\s\S]*?<\/table>)`
+    `(<pre tabindex="0" class="chroma">[\s\S]*?<\/pre>)` -}}
+  {{- $REout := printf `<div class="code-wrapper">$1</div>` -}}
+  {{- $wrapper = replaceRE $REin $REout $wrapper -}}
+
+  {{- /* Hide line numbers if linenos=false */ -}}
+  {{- if (not (strings.Contains $wrapper `class="lnt"`)) | and (not (strings.Contains $wrapper `class="ln"`)) -}}
+    {{- $targetClass = add $targetClass " line-nos-hidden" -}}
+  {{- end -}}
+
+  {{- /* Add code expand button */ -}}
+  {{- if (gt $lines $maxShownLines) | and (gt $lines 0) | and (gt $maxShownLines 0) -}}
+    {{- $wrapper = dict "Wrapper" $wrapper | partial "function/code-expand-btn.html" -}}
+  {{- end -}}
+
+  {{- /* Render for different modes */ -}}
+  {{- if eq $mode "classic" -}}
+    {{- $wrapper = dict "Wrapper" $wrapper "Config" $config "Type" .Type | partial "function/code-header.html" -}}
+  {{- else -}}
+    {{- $wrapper = dict "Wrapper" $wrapper "Config" $config | partial "function/code-copy-btn.html" -}}
+  {{- end -}}
+
+  {{- /* 
+    Add data attributes and class
+    Directly set CSS variables to ensure compatibility with non-Chromium-based browsers
+    See https://caniuse.com/css3-attr for attr() support status
+  */ -}}
+  {{- if $config.editable -}}
+    {{- $wrapper =
+      replace $wrapper
+      (printf `class="%s"` $class)
+      (printf `class="%s" data-editable="%v"` $class $config.editable)
+    -}}
+  {{- end -}}
+  {{- if $config.copyable -}}
+    {{- $wrapper =
+      replace $wrapper
+      (printf `class="%s"` $class)
+      (printf `class="%s" data-copyable="%v"` $class $config.copyable)
+    -}}
+  {{- end -}}
+  {{- if ne .Options.linenostart nil -}}
+    {{- $wrapper =
+      replace $wrapper
+      `class="code-wrapper"`
+      (printf `class="code-wrapper" data-line-start="%v"` .)
+    -}}
+  {{- end -}}
+  {{- $wrapperStyle := printf "--fi-max-shown-lines:%v;--fi-line-digit:%v;--fi-line-start:%v;" $maxShownLines $lineNosDigit $lineNoStart -}}
+  {{- $wrapper =
+    replace $wrapper
+    `class="code-wrapper"`
+    (printf `class="code-wrapper" style="%s"` $wrapperStyle)
+  -}}
+  {{- $wrapper =
+    replace $wrapper
+    `class="code-wrapper"`
+    (printf
+      `class="code-wrapper" data-max="%v" data-line-digit="%d"`
+      $maxShownLines
+      $lineNosDigit
+    )
+  -}}
+  {{- $wrapper =
+    replace $wrapper
+    (printf `class="%s"` $class)
+    (printf `class="%s" data-mode="%s"` $targetClass $mode)
+  -}}
+{{- end -}}
+
+{{- $wrapper | safeHTML -}}
diff --git a/layouts/_shortcodes/highlight.html b/layouts/_shortcodes/highlight.html
deleted file mode 100644
index 94f1979d..00000000
--- a/layouts/_shortcodes/highlight.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{{- /*
-  Override the default highlight shortcode
-  Add a code wrapper to better style for highlight shortcode code blocks
-  See https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_shortcodes/highlight.html
-  Usage:
-  ```
-  {{< highlight LANG [OPTIONS] >}}
-  CODE
-  {{< /highlight >}}
-  ```
-  Recommended to use the Markdown code fences extended syntax:
-  ```LANG [OPTIONS]
-  CODE
-  ```
-  See: https://fixit.lruihao.cn/documentation/content-management/markdown-syntax/extended/#options
-*/ -}}
-{{- $code := trim .InnerDeindent "\n\r" -}}
-{{- $lang := .Get 0 -}}
-{{- $options := .Get 1 -}}
-{{- $wrapper := highlight $code $lang $options -}}
-{{- $wrapper = partial "function/code-wrapper.html" $wrapper -}}
-{{- $wrapper | safeHTML -}}