refactor(js): improve robustness of line numbering and TOC anchoring

Author: xihale

assets/js/code-block.js

@@ -16,14 +16,16 @@ document.addEventListener('DOMContentLoaded', () => {
     codeContainer.appendChild(copyButton);
 
     copyButton.addEventListener('click', () => {
-      const codeText = code.innerText;
+      const codeText = code.textContent;
       navigator.clipboard.writeText(codeText).then(() => {
         copyButton.classList.add('copied');
         setTimeout(() => { copyButton.classList.remove('copied'); }, 2000);
+      }).catch(err => {
+        console.error('无法复制到剪贴板：', err);
       });
     });
 
-    const codeLines = code.innerHTML.split(/\r?\n/);
+    const codeLines = code.textContent.split(/\r?\n/);
     const hasTrailingEmptyLine = codeLines.length > 0 && codeLines[codeLines.length - 1].trim() === '';
     if (hasTrailingEmptyLine) {
         codeLines.pop();

assets/js/toc.js

@@ -5,27 +5,12 @@ document.addEventListener('DOMContentLoaded', () => {
   // We query all headings first, then filter/map to find the actual anchor ID
   const rawHeadings = document.querySelectorAll('.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6');
 
-  const headings = [];
-  rawHeadings.forEach(h => {
-    let id = h.getAttribute('id');
-    // If the heading itself doesn't have an ID, check if it contains an element with an ID (e.g. <a id="...">)
-    // or if the Zine renderer placed the ID on a wrapper.
-    if (!id) {
-        // Check if the parent element has an ID (SuperMD section wrapper)
-        if (h.parentElement && h.parentElement.getAttribute('id')) {
-            id = h.parentElement.getAttribute('id');
-        } else {
-            const childWithId = h.querySelector('[id]');
-            if (childWithId) {
-                id = childWithId.getAttribute('id');
-            }
-        }
-    }
-    
-    if (id) {
-        headings.push({ element: h, id: id });
-    }
-  });
+  const headings = Array.from(rawHeadings)
+    .map(h => ({
+      element: h,
+      id: h.id || h.parentElement?.id || h.querySelector('[id]')?.id,
+    }))
+    .filter(h => h.id);
 
   if (tocLinks.length === 0 || headings.length === 0) return;
 
@@ -45,9 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (currentId) {
       tocLinks.forEach(link => {
         link.classList.remove('active');
-        // Decode URI component to handle non-ASCII IDs if any
-        const href = link.getAttribute('href');
-        if (href === `#${currentId}`) {
+        if (link.hash === `#${currentId}`) {
           link.classList.add('active');
         }
       });