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