https://geimy.com/js/toc-highlight.js

1document.addEventListener("DOMContentLoaded", function () {
2  const tocLinks = document.querySelectorAll('.hextra-toc a[href^="#"]');
3  const headings = Array.from(tocLinks)
4    .map(link => {
5      const href = link.getAttribute('href');
6      // ページ内のsubheading-anchorでhrefが一致するものを探す
7      const anchor = document.querySelector('a.subheading-anchor[href="' + href + '"]');
8      if (anchor && anchor.parentElement) {
9        // h2/h3などの親要素を返す
10        return anchor.parentElement;
11      }
12      return null;
13    })
14    .filter(Boolean);
15
16  function onScroll() {
17    let current = -1;
18    const scrollPosition = window.scrollY + 120;
19    for (let i = 0; i < headings.length; i++) {
20      if (headings[i].offsetTop <= scrollPosition) {
21        current = i;
22      }
23    }
24    tocLinks.forEach(link => link.classList.remove('active'));
25    if (current >= 0 && tocLinks[current]) {
26      tocLinks[current].classList.add('active');
27    }
28  }
29
30  window.addEventListener('scroll', onScroll);
31  onScroll();
32});