From e600d047da557c17cd29498cbfb2005415f32b0a Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Thu, 18 Dec 2025 11:44:57 +0800
Subject: [PATCH] fix: code block mac mode and gist shortcode styles

---
 assets/css/_partials/_single/_code.scss       | 70 ++++++++++++-------
 assets/js/theme.js                            |  5 ++
 layouts/_markup/render-codeblock.html         | 15 +++-
 layouts/_partials/function/code-copy-btn.html |  2 +-
 .../_partials/function/code-expand-btn.html   |  2 +-
 layouts/_partials/function/code-header.html   |  8 +--
 layouts/_partials/init/index.html             |  2 +-
 7 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
index 9476f7c6..71ec443c 100644
--- a/assets/css/_partials/_single/_code.scss
+++ b/assets/css/_partials/_single/_code.scss
@@ -43,16 +43,24 @@ pre:not([data-processed]) {
   font-size: $code-block-font-size;
   font-family: $code-font-family;
 
-  .table-wrapper {
+  .code-wrapper {
+    position: relative;
     #{$rootPrefix}scrollbar-thumb-color: initial;
+
+    > 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 !important;
-      white-space: nowrap;
+      border: none;
     }
   }
 }
@@ -68,7 +76,7 @@ pre:not([data-processed]) {
   #{$rootPrefix}max-shown-lines: attr(data-max number, 10);
   #{$rootPrefix}linenostart: attr(data-linenostart number, 1);
 
-  .table-wrapper {
+  .code-wrapper {
     overflow: hidden;
     height: auto;
     @include transition(height 0.5s ease-out);
@@ -83,7 +91,6 @@ pre:not([data-processed]) {
     }
 
     .lntable {
-      border-spacing: 0;
       width: auto;
       overflow: auto;
       display: block;
@@ -135,7 +142,7 @@ pre:not([data-processed]) {
     @include border-radius($global-border-radius $global-border-radius 0 0);
     @include transition(border-radius 0s);
 
-    + .table-wrapper {
+    + .code-wrapper {
       @include border-radius(0 0 $global-border-radius $global-border-radius);
 
       > pre.chroma {
@@ -235,10 +242,10 @@ pre:not([data-processed]) {
   }
 
   &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
-    .table-wrapper {
+    .code-wrapper {
       height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
     }
-    &[data-mode='mac'] .table-wrapper {
+    &[data-mode='mac'] .code-wrapper {
       #{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
     }
   }
@@ -264,7 +271,7 @@ pre:not([data-processed]) {
         #{$rootPrefix}code-header-bg: #{darken($code-background-color-dark, 6%)};
       }
 
-      + .table-wrapper {
+      + .code-wrapper {
         height: 0;
       }
     }
@@ -333,7 +340,7 @@ pre:not([data-processed]) {
       }
     }
     .lntd:last-child pre.chroma,
-    .table-wrapper > pre.chroma {
+    .code-wrapper > pre.chroma {
       code {
         text-wrap: wrap;
       }
@@ -342,7 +349,7 @@ pre:not([data-processed]) {
 
   // 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) .table-wrapper > pre.chroma:not(:has(.ln)) {
+  &:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
     padding-left: 0;
     > code > .line {
       display: flex;
@@ -362,7 +369,7 @@ pre:not([data-processed]) {
   }
 
   // add sticky effect for line number column when lineNos=false
-  &:not(.line-nos-hidden) .table-wrapper > pre.chroma > code > .line::before {
+  &:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
     position: sticky;
     left: 0;
   }
@@ -414,7 +421,14 @@ pre:not([data-processed]) {
     }
   }
 
-  &:not([data-mode='classic']) {
+  &[data-mode='simple'] {
+    pre.chroma {
+      padding-block: 0.875rem;
+    }
+  }
+
+  // add border for non-classic mode
+  &.code-block:not([data-mode='classic']) {
     border: 1px solid darken($code-background-color, 3%);
 
     [data-theme='dark'] & {
@@ -427,6 +441,9 @@ pre:not([data-processed]) {
 
 // gist shortcode
 .gist {
+  background-color: var(#{$rootPrefix}code-block-background-color);
+  @include border-radius($global-border-radius $global-border-radius 0 0);
+  
   .gist-file,
   .gist-data,
   .gist-meta {
@@ -434,7 +451,11 @@ pre:not([data-processed]) {
   }
 
   .gist-data {
-    background-color: transparent;
+    background-color: inherit;
+
+    .blob-wrapper {
+      padding-block: 0.5rem;
+    }
   }
 
   .gist-meta {
@@ -444,20 +465,15 @@ pre:not([data-processed]) {
     background-color: var(#{$rootPrefix}gist-meta-background-color);
   }
 
-  .table-wrapper {
-    padding-block: 0.5rem;
-    background-color: var(#{$rootPrefix}code-block-background-color);
-    @include border-radius($global-border-radius $global-border-radius 0 0);
+  table.highlight {
+    margin: 0;
+    background-color: inherit;
 
-    .highlight {
-      background-color: transparent;
-
-      td.blob-num {
-        position: sticky;
-        left: 0;
-        background-color: var(#{$rootPrefix}code-block-background-color);
-        @include z-index(0, 1);
-      }
+    td.blob-num {
+      position: sticky;
+      left: 0;
+      background-color: var(#{$rootPrefix}code-block-background-color);
+      @include z-index(0, 1);
     }
   }
 
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 4bedeb40..2a9be16a 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -552,8 +552,13 @@ class FixIt {
 
   initTable(target = document) {
     this.util.forEach(target.querySelectorAll('.content table'), ($table) => {
+      if ($table.parentElement.classList.contains('table-wrapper') || $table.closest('.gist')) return;
       const $wrapper = document.createElement('div');
       $wrapper.className = 'table-wrapper';
+      // highlight shortcode
+      if ($table.closest('.highlight')) {
+        $wrapper.className = 'code-wrapper';
+      }
       $table.parentElement.replaceChild($wrapper, $table);
       $wrapper.appendChild($table);
     });
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
index 226f92a0..47978eac 100644
--- a/layouts/_markup/render-codeblock.html
+++ b/layouts/_markup/render-codeblock.html
@@ -9,6 +9,18 @@
   {{- $targetClass := add "code-block " $class -}}
   {{- with $config.wrapperclass -}}{{ $targetClass = add $targetClass " " . }}{{- end -}}
 
+  {{- /* add code wrapper */ -}}
+  {{- $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 */ -}}
   {{- $lines := cond .Inner (len (split .Inner "\n")) 0 -}}
   {{- $maxShownLines := $config.maxshownlines -}}
@@ -19,9 +31,6 @@
   {{- /* render for different modes */ -}}
   {{- if eq $mode "classic" -}}
     {{- $wrapper = dict "Wrapper" $wrapper "Config" $config "Type" .Type | partial "function/code-header.html" -}}
-    {{- if eq .Options.linenos false -}}
-      {{- $targetClass = add $targetClass " line-nos-hidden" -}}
-    {{- end -}}
   {{- else -}}
     {{- $wrapper = dict "Wrapper" $wrapper "Config" $config | partial "function/code-copy-btn.html" -}}
   {{- end -}}
diff --git a/layouts/_partials/function/code-copy-btn.html b/layouts/_partials/function/code-copy-btn.html
index 46d96468..aca31d80 100644
--- a/layouts/_partials/function/code-copy-btn.html
+++ b/layouts/_partials/function/code-copy-btn.html
@@ -6,7 +6,7 @@
   {{- $copyIcon := dict "Class" "fa-regular fa-clone" | partial "plugin/icon.html" -}}
   {{- $successIcon := dict "Class" "fa-solid fa-check text-success" | partial "plugin/icon.html" -}}
   {{- $copyBtn := printf `<div class="code-copy-btn" aria-label="%s" role="button" title="%s">%s%s</div>` (T "assets.copyToClipboard") (T "assets.copyToClipboard") $copyIcon $successIcon -}}
-  {{- $wrapper = replaceRE `(<div class="highlight[^>]*>)` (printf `$1%s` $copyBtn) $wrapper -}}
+  {{- $wrapper = replaceRE `(<div class="code-wrapper">[\s\S]*?<\/div>)` (printf `$1%s` $copyBtn) $wrapper -}}
 {{- end -}}
 
 {{- return $wrapper -}}
diff --git a/layouts/_partials/function/code-expand-btn.html b/layouts/_partials/function/code-expand-btn.html
index 81c00c94..7f80e5e3 100644
--- a/layouts/_partials/function/code-expand-btn.html
+++ b/layouts/_partials/function/code-expand-btn.html
@@ -2,6 +2,6 @@
 {{- $wrapper := .Wrapper -}}
 {{- $expandIcon := dict "Class" "fa-solid fa-angles-down" | partial "plugin/icon.html" -}}
 {{- $expandBtn := printf `<div class="code-expand-btn" aria-label="%s" role="button">%s</div>` (T "assets.expandCode") $expandIcon -}}
-{{- $wrapper = replaceRE `(<div class="highlight[^>]*>)` (printf `$1%s` $expandBtn) $wrapper -}}
+{{- $wrapper = replaceRE `(<div class="code-wrapper">[\s\S]*?<\/div>)` (printf `$1%s` $expandBtn) $wrapper -}}
 
 {{- return $wrapper -}}
diff --git a/layouts/_partials/function/code-header.html b/layouts/_partials/function/code-header.html
index 88df726f..850c1594 100644
--- a/layouts/_partials/function/code-header.html
+++ b/layouts/_partials/function/code-header.html
@@ -34,12 +34,6 @@
   {{- $titleEl = replace $titleEl `<span class="code-title">` (printf `<span class="code-title" data-name="%s">` .) -}}
 {{- end -}}
 {{- $codeHeader := printf `<div class="code-header language-%s">%s%s%s%s%s%s</div>` $type $titleEl $ellipsisBtn $lineNosBtn $lineWrapBtn $editBtn $copyBtn -}}
-
-{{- if strings.Contains $wrapper `<table class="lntable">` -}}
-  {{- $wrapper = replaceRE `(<table class="lntable">)` (printf "%s$1" $codeHeader) $wrapper -}}
-{{- else -}}
-  {{- /* linenos=false or lineNumbersInTable=false */ -}}
-  {{- $wrapper = replaceRE `(<pre[^>]*class="[^"]*chroma[^"]*">[\s\S]*?<\/pre>)` (printf `%s<div class="table-wrapper">$1</div>` $codeHeader) $wrapper -}}
-{{- end -}}
+{{- $wrapper = replaceRE `(<div class="code-wrapper">)` (printf "%s$1" $codeHeader) $wrapper -}}
 
 {{- return $wrapper -}}
diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html
index 282d276c..2540d067 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-20251128065536-6d00e42b" -}}
+{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251218063009-54235ac6" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}