refactor: table wrapper via table render hook

resolve #503

assets/js/theme.js

@@ -550,20 +550,6 @@ class FixIt {
     stagingDOM.destroy();
   }
 
-  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);
-    });
-  }
-
   /**
    * Helper method to update TOC active state based on scroll position
    * @param {HTMLElement} $tocContainer - TOC container element for parent traversal
@@ -1159,7 +1145,6 @@ class FixIt {
     this.initLightGallery();
     this.initCodeWrapper();
     this.initDiagramCopyBtn();
-    this.initTable(target);
     this.initEcharts();
     this.initTypeit(target);
     this.initMapbox();

layouts/_markup/render-codeblock.html

@@ -10,11 +10,7 @@
   {{- 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 -}}
+  {{- $wrapper = partial "function/code-wrapper.html" $wrapper -}}
 
   {{- /* hide line numbers if linenos=false */ -}}
   {{- if not (strings.Contains $wrapper `class="lnt"`) | and (not (strings.Contains $wrapper `class="ln"`)) -}}

layouts/_markup/render-table.html

@@ -0,0 +1,45 @@
+{{- /*
+  Add a table wrapper to better style overflow tables
+  The reset of the template is the same as the default render-table.html
+  See https://gohugo.io/render-hooks/tables/
+*/ -}}
+<div class="table-wrapper">
+  <table
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}>
+    <thead>
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>
+{{- /* EOF */ -}}

layouts/_partials/function/code-wrapper.html

@@ -0,0 +1,6 @@
+{{- /* 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 . -}}

layouts/_partials/init/index.html

@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251219025233-a96a76ab" -}}
+{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251219061028-5dcb107d" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}

layouts/_shortcodes/highlight.html

@@ -0,0 +1,22 @@
+{{- /*
+  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 -}}