diff --git a/assets/scss/base/_syntax.scss b/assets/scss/base/_syntax.scss
index 3d43ff1..3aff810 100644
--- a/assets/scss/base/_syntax.scss
+++ b/assets/scss/base/_syntax.scss
@@ -9,7 +9,7 @@ code:not([class]):not([id]) {
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
-.highlight {
+.code-block {
   @extend %rounded;
   @extend %code-snippet-bg;
 
@@ -116,7 +116,7 @@ td.rouge-code {
   }
 }
 
-div[class^='highlight'] {
+.code-block {
   @extend %rounded;
   @extend %code-snippet-bg;
 
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 0000000..1fa8801
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,5 @@
+<div class="code-block">
+  <div class="code-header"> <span data-label-text="{{ if .Attributes.file }}{{ .Attributes.file }}{{ else }}{{ partial "language-alias.html" (dict "language" .Type) }}{{ end }}">{{ if .Attributes.file }}<i class="far fa-file-code fa-fw"></i>{{ else }}<i class="fas fa-code fa-fw small"></i>{{ end }}</span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div>
+  {{ $result := transform.HighlightCodeBlock . }}
+  {{ $result.Wrapped }}
+</div>
diff --git a/layouts/partials/refactor-content.html b/layouts/partials/refactor-content.html
index 8d7dda4..9da665b 100644
--- a/layouts/partials/refactor-content.html
+++ b/layouts/partials/refactor-content.html
@@ -33,31 +33,4 @@
 
 {{ $content = $headingContent | safeHTML }}
 
-<!-- Insert code header after highlight div and extract language from code class or file attribute -->
-{{ if findRE `<div class="highlight"` $content }}
-  <!-- Add a special marker at the beginning of every <div class="highlight"> -->
-  {{ $content = replaceRE `<div class="highlight"` `<div class="CHIRPY-HIGHLIGHT-MARKER highlight"` $content }}
-  
-  <!-- Process highlight divs with file attribute -->
-  {{ $content = replaceRE `<div class="CHIRPY-HIGHLIGHT-MARKER highlight"([^>]*?)file="([^"]*)"([^>]*?)>` `<div class="highlight"$1file="$2"$3><div class="code-header"> <span data-label-text="$2"><i class="far fa-file-code fa-fw"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div>` $content }}
-  
-  <!-- Process remaining highlight divs that still have the marker (no file attribute) -->
-  {{ $content = replaceRE `<div class="CHIRPY-HIGHLIGHT-MARKER highlight"([^>]*?)>([\s\S]*?)<code class="language-([^"]*)"` `<div class="highlight"$1><div class="code-header"> <span data-label-text-language="$3"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div>$2<code class="language-$3"` $content }}
-  
-  <!-- Process language aliases in data-label-text -->
-  {{ $pattern := `<span data-label-text-language="([^"]*)"` }}
-  
-  <!-- 查找所有语言标签，逐个处理 -->
-  {{ range findRE $pattern $content -1 }}
-    {{ $langRaw := replaceRE $pattern "$1" . }}
-    {{ $langNormalized := partial "language-alias.html" (dict "language" $langRaw) }}
-    
-    {{ if ne $langNormalized "" }}
-      {{ $replacement := printf `<span data-label-text="%s"` $langNormalized }}
-      {{ $original := printf `<span data-label-text-language="%s"` $langRaw }}
-      {{ $content = replace $content $original $replacement }}
-    {{ end }}
-  {{ end }}
-{{ end }}
-
 {{ $content | safeHTML }}
\ No newline at end of file