From 14828c5c030f0beef902dd573961f86a51081c94 Mon Sep 17 00:00:00 2001
From: moris <moris@noreply.moris.day>
Date: Mon, 7 Apr 2025 22:37:07 +0900
Subject: [PATCH] =?UTF-8?q?NewFeature=E2=9C=A8:=20=E3=82=B3=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=82=B3=E3=83=94=E3=83=BC=E6=A9=9F=E8=83=BD=E3=81=AE?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Markdown/Markdown.css      | 43 +++++++++++--------
 .../(DefaultStyle)/post/[slug]/+page.svelte   | 23 ++++++----
 2 files changed, 38 insertions(+), 28 deletions(-)

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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white"><path d="m200-120c-44 0-80-35.6-80-80v-560c0-44 35.6-80 80-80h167c15-47.5 62.7-80 113-80 55.7 0 100 35 114 80h166c44 0 80 35.6 80 80v560c0 44-35.6 80-80 80zm0-80h560v-560h-80v120h-400v-120h-80zm280-560c22.8 0 40-17.2 40-40 0-22.8-17.2-40-40-40-22.8 0-40 17.2-40 40 0 22.8 17.2 40 40 40z"/></svg>');
-            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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108" fill="white"><path d="m22.5 99c-5 0-9-4-9-9v-63c0-5 4-9 9-9h19c1-5 6-9 12.5-9c6.5 0 11.5 4 12.5 9h19c5 0 9 4 9 9 v63c0 5-4 9-9 9zm0-9h63v-63h-9v14h-45v-14h-9zM54 27c2.5 0 4.5-2 4.5-4.5s-2-4.5-4.5-4.5s-4.5 2-4.5 4.5s2 4.5 4.5 4.5"/></svg>');
+            background-color: inherit;
+        }
+        &.copyed::after {
+            background: no-repeat center url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108" fill="white"><path d="m69.5 94.5l-20-20l6-6l14 14l25-25l6 6zM94.5 49h-9v-22h-9v14h-45v-14h-9v63h27v9h-27c-5 0-9-4-9-9v-63c0-5 4-9 9-9h19c1-5 6-9 12.5-9c6.5 0 11.5 4 12.5 9h19c5 0 9 4 9 9zm-40.5-22c2.5 0 4.5-2 4.5-4.5s-2-4.5-4.5-4.5s-4.5 2-4.5 4.5s2 4.5 4.5 4.5z"/></svg>');
+            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)
+				}
+			})
+		})
+	})
 </script>