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)} })