diff --git a/src/lib/components/Markdown/Markdown.css b/src/lib/components/Markdown/Markdown.css index 19b3b8e..a254927 100644 --- a/src/lib/components/Markdown/Markdown.css +++ b/src/lib/components/Markdown/Markdown.css @@ -94,35 +94,40 @@ & pre { position: relative; margin: 1em 2em; - padding: 1em; - box-sizing: border-box; - border-radius: 8px; + border-radius: 0.5em; background-color: var(--code-block); color: #d1d9e1; - overflow: auto; - scrollbar-width: thin; - scrollbar-color: #aaa #444; - + font-size: 1rem; + line-height: 1.4em; @media (width<480px) { margin: 1em 0; } & code { + display: block; margin: 0; - padding: 0; - border-radius: 0; - background-color: #fff0; + padding: 0.75em 1em; + border-radius: 0.5em; + background-color: inherit; + overflow: auto; + scrollbar-width: thin; + scrollbar-color: #aaa #444; } - /* - issue: 擬似要素は { イベントリスナを設置できない, アニメーション不可, スクロールに巻き込まれる } &::after { - content: ''; - background-image: url('data:image/svg+xml;utf-8,'); - width: 1.5em; - height: 1.5em; position: absolute; - top: 1em; - right: 1em; - } */ + content: ''; + width: 1.4em; + height: 1.4em; + top: 0; + right: 0; + padding: 0 0.7em; + margin: 0.75em 0; + background: no-repeat center url('data:image/svg+xml;utf-8,'); + background-color: inherit; + } + &.copyed::after { + background: no-repeat center url('data:image/svg+xml;utf-8,'); + background-color: inherit; + } } & table { margin: 1em auto; diff --git a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte index e16128e..ab19661 100644 --- a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte +++ b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte @@ -59,15 +59,20 @@ return ()=>{window.removeEventListener('hashchange', hashChange)} }) - // // copy code - // 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) - // } - // }) - // }) + // copy code + onMount(()=>{ + document.querySelectorAll(".markdown pre").forEach((pre)=>{ + pre.addEventListener('click', (e)=>{ + let target = e.target + if (target instanceof HTMLElement && target.tagName == 'PRE') { + let code = target.textContent || '' + navigator.clipboard.writeText(code) + target.classList.add("copyed") + window.setTimeout(()=>{target.classList.remove("copyed")}, 800) + } + }) + }) + })