diff --git a/assets/scss/base/_syntax.scss b/assets/scss/base/_syntax.scss
index a533617..e321725 100644
--- a/assets/scss/base/_syntax.scss
+++ b/assets/scss/base/_syntax.scss
@@ -106,10 +106,21 @@ td.rouge-code {
   }
 }
 
-div[class^='language-'] {
+div[class^='highlight'] {
   @extend %rounded;
   @extend %code-snippet-bg;
 
+  tr {
+    background-color: var(--highlight-bg-color) !important;
+    border-bottom: none !important;
+  }
+
+  padding-bottom: 0;
+
+  .table-wrapper {
+    margin-bottom: .75rem;
+  }
+
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
   .content > & {
diff --git a/layouts/partials/refactor-content.html b/layouts/partials/refactor-content.html
new file mode 100644
index 0000000..8f1e35e
--- /dev/null
+++ b/layouts/partials/refactor-content.html
@@ -0,0 +1,56 @@
+{{ $content := .Content }}
+
+<!-- Handle tables -->
+{{ if findRE `<table` $content }}
+  {{ $content = replace $content `<table` `<div class="table-wrapper"><table` }}
+  {{ $content = replace $content `</table>` `</table></div>` }}
+  {{ $content = replace $content `<code><div class="table-wrapper">` `<code>` }}
+  {{ $content = replace $content `</table></div></code>` `</table></code>` }}
+{{ end }}
+
+<!-- Change checkbox icons -->
+{{ if findRE `<input.*type="checkbox"` $content }}
+  <!-- first replace the li with task-list-item class -->
+  {{ $content = replaceRE `<li>(\s*)<input` `<li class="task-list-item">$1<input` $content }}
+  {{ $content = replaceRE `<li class="([^"]*)"(\s*)<input` `<li class="task-list-item $1"$2<input` $content }}
+  
+  <!-- then add task-list class to the parent ul of the li with task-list-item class -->
+  {{ $content = replaceRE `<ul>(\s*)<li class="task-list-item` `<ul class="task-list">$1<li class="task-list-item` $content }}
+  {{ $content = replaceRE `<ul class="([^"]*)"(\s*)<li class="task-list-item` `<ul class="task-list $1"$2<li class="task-list-item` $content }}
+  
+  <!-- replace all checked checkbox format -->
+  {{ $content = replaceRE `<input.*?checked.*?type="checkbox".*?>` `<i class="fas fa-check-circle fa-fw checked"></i>` $content }}
+  {{ $content = replaceRE `<input.*?type="checkbox".*?checked.*?>` `<i class="fas fa-check-circle fa-fw checked"></i>` $content }}
+  
+  <!-- replace all unchecked checkbox format -->
+  {{ $content = replaceRE `<input.*?type="checkbox".*?>` `<i class="far fa-circle fa-fw"></i>` $content }}
+{{ end }}
+
+<!-- Create heading anchors -->
+{{ $headingLevels := slice "2" "3" "4" "5" }}
+{{ $headingContent := $content }}
+
+{{ range $level := $headingLevels }}
+  {{ $markStart := printf `<h%s id="` $level }}
+  {{ $markEnd := printf `</h%s>` $level }}
+  
+  {{ $pattern := printf `%s([^"]+)">(.*?)%s` $markStart $markEnd }}
+  {{ $replacement := printf `%s$1"><span class="me-2">$2</span><a href="#$1" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>%s` $markStart $markEnd }}
+  {{ $headingContent = replaceRE $pattern $replacement $headingContent }}
+{{ end }}
+
+{{ $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="$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 }}
+{{ end }}
+
+{{ $content | safeHTML }}
\ No newline at end of file