diff --git a/assets/js/theme.js b/assets/js/theme.js
index 9a8162457..6a388924e 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -386,8 +386,13 @@ class FixIt {
         // code title
         const $title = document.createElement('span');
         $title.classList.add('code-title');
-        const hlAttrs = this.data[$chroma.parentNode.id];
-        $title.insertAdjacentHTML('afterbegin', `<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i><span class="title-inner">${hlAttrs?.title ?? ''}</span>`);
+        // insert code title inner
+        $title.insertAdjacentHTML(
+          'afterbegin',
+          $chroma.parentNode.title
+            ? `<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i><span class="title-inner">${$chroma.parentNode.title}</span>`
+            : '<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i>'
+        );
         $title.addEventListener('click', () => {
           $chroma.classList.toggle('open');
         }, false);
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index 5d39b9913..046abec32 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -1,3 +1,2 @@
-{{- $id := dict "Content" .Attributes "Scratch" .Page.Scratch | partial "function/id.html" -}}
-{{- $codeBlock := transform.Highlight .Inner .Type .Options -}}
-{{- replace $codeBlock "<div class=\"highlight\">" (printf "<div class=\"highlight\" id=\"%v\">" $id) 1 | safeHTML -}}
+{{- $result := transform.HighlightCodeBlock . -}}
+{{- $result.Wrapped -}}