Flash-highlight the definition you jump to from a cross-link

Author: DanderBot

docs/javascripts/peek.js

@@ -47,3 +47,28 @@
   });
   document.addEventListener("click", hide, true);
 })();
+
+/* Briefly highlight the definition you jump to, so it's easy to spot. */
+(function () {
+  function flash() {
+    const id = location.hash ? decodeURIComponent(location.hash.slice(1)) : "";
+    if (!id) return;
+    const el = document.getElementById(id);
+    if (!el) return;
+    const block = el.closest("li, p, tr") || el;
+    block.classList.remove("api-target-flash");
+    void block.offsetWidth; // force reflow so the animation restarts on every click
+    block.classList.add("api-target-flash");
+  }
+  document.addEventListener("animationend", function (e) {
+    if (e.target.classList && e.target.classList.contains("api-target-flash")) {
+      e.target.classList.remove("api-target-flash");
+    }
+  });
+  window.addEventListener("hashchange", flash);
+  window.addEventListener("load", flash);
+  // Material instant navigation swaps content without a reload — re-run then too.
+  if (window.document$ && window.document$.subscribe) {
+    window.document$.subscribe(function () { setTimeout(flash, 30); });
+  }
+})();

docs/stylesheets/extra.css

@@ -36,3 +36,24 @@
   line-height: 1.5;
   pointer-events: none;
 }
+
+/* Keep a jumped-to definition clear of the sticky header. */
+.md-typeset code[id^="ref-"] {
+  scroll-margin-top: 4rem;
+}
+
+/* Brief highlight flash on the definition you jump to. */
+@keyframes api-target-flash {
+  from {
+    background-color: rgba(124, 77, 162, 0.4); /* fallback */
+    background-color: color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+.md-typeset .api-target-flash {
+  animation: api-target-flash 1.8s ease-out;
+  border-radius: 0.15rem;
+  box-decoration-break: clone;
+}