From 134694eeb35f53b2689faf22f2866f8a002b74b2 Mon Sep 17 00:00:00 2001
From: moris <xinshisheng126@gmail.com>
Date: Thu, 20 Feb 2025 14:37:03 +0900
Subject: [PATCH] =?UTF-8?q?add:=20=E7=9B=AE=E6=AC=A1=E3=82=92=E3=82=AF?=
 =?UTF-8?q?=E3=83=AA=E3=83=83=E3=82=AF=E3=81=97=E3=81=9F=E3=81=A8=E3=81=8D?=
 =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AB=E3=82=A8=E3=83=95?=
 =?UTF-8?q?=E3=82=A7=E3=82=AF=E3=83=88=E3=82=92=E3=81=8B=E3=81=91=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Markdown.css               | 15 +++++++++
 .../(DefaultStyle)/post/[slug]/+page.svelte   | 32 +++++++++++++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Markdown.css b/src/lib/components/Markdown.css
index ac9808f..883096f 100644
--- a/src/lib/components/Markdown.css
+++ b/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;}
 }
\ No newline at end of file
diff --git a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
index 376fa06..b0c446c 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
+++ b/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>