add: 目次をクリックしたときヘッダーにエフェクトをかける

src/lib/components/Markdown.css

@@ -229,4 +229,19 @@
             }
         }
     }
+
+    & .marker {
+        text-decoration: line-through;
+        text-decoration-thickness: 1.125em;
+
+        animation-name: highlight;
+        animation-duration: .6s;
+        animation-fill-mode: forwards;
+    }
+}
+
+@keyframes highlight {
+    0%   {text-decoration-color: #ffff0000;}
+    20%  {text-decoration-color: #ffff00a0;}
+    100% {text-decoration-color: #ffff0040;}
 }

src/routes/(DefaultStyle)/post/[slug]/+page.svelte

@@ -29,16 +29,42 @@
         }
         window.addEventListener('message', toggleHide)
 
+        return ()=>{window.removeEventListener('message', toggleHide)}
+    })
 
+	onMount(()=>{
+		function setMarkerClass(id:string) {
+			let hash = document.querySelector("#blog .marker");
+			if (hash instanceof HTMLElement) {
+				hash.classList.remove("marker")
+			}
+
+			let element = document.querySelector(id);
+			if(element instanceof HTMLElement){
+				element.classList.add("marker")
+			}
+		}
+
+		if(location.hash) {
+			setMarkerClass(decodeURI(location.hash));
+		}
+
+		function hashChange(){
+			let urlHash = decodeURI(location.hash);
+			setMarkerClass(urlHash);
+		}
+		window.addEventListener('hashchange', hashChange)
+
+		return ()=>{window.removeEventListener('hashchange', hashChange)}
+	})
+
+	onMount(()=>{
 		document.getElementById('blog')?.addEventListener('click',(e:MouseEvent)=>{
 			if (e.target instanceof HTMLElement && e.target.matches('pre')) {
 				let code = e.target.textContent || '';
 				navigator.clipboard.writeText(code)
 			}
 		})
-
-		// リスナ解除
-        return ()=>{window.removeEventListener('message', toggleHide)}
     })
 </script>