moris/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NewFeature✨: コードコピー機能の実装

Browse source
This commit is contained in:
moris 2025-04-07 22:37:07 +09:00
parent 2ae55f181b
commit 14828c5c03
2 changed files with 38 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/lib/components/Markdown/Markdown.css
View file

@ -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;

23
src/routes/(DefaultStyle)/post/[slug]/+page.svelte
View file

@ -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>