fix: fix copy button issue.

jaywcjlove · jaywcjlove · commit 73ee65b6926f · 2021-12-05T13:44:51.000+08:00
diff --git a/template/details.ejs b/template/details.ejs
@@ -1,5 +1,17 @@
 <%- include('partial/header'); %>
 <%- include('widget/search',{type: "list"}); %>
+<script src="https://unpkg.com/@uiw/copy-to-clipboard/dist/copy-to-clipboard.umd.js"></script>
+<script>
+function copied(target, str) {
+  target.classList.add('active');
+  copyTextToClipboard(target.dataset.code, function() {
+    setTimeout(() => {
+      target.classList.remove('active');
+    }, 2000);
+  });
+}
+</script>
+
 <div class="markdown-body">
 <% if(md_path){ %>
 <span class="edit_btn">
diff --git a/template/styl/mixins/markdown.styl b/template/styl/mixins/markdown.styl
@@ -55,6 +55,50 @@ mq-mobile = "screen and (max-width: 479px)"
   }
 }
 
+
+.markdown-body pre[class*="language-"] {
+  position: relative;
+}
+.markdown-body pre[class*="language-"] .copied {
+  visibility: hidden;
+  display: flex;
+  position: absolute;
+  cursor: pointer;
+  color: #a5afbb;
+  top: 6px;
+  right: 6px;
+  border-radius: 5px;
+  background: #e3e3e3;
+  padding: 6px;
+  font-size: 12px;
+  transition: all .3s;
+}
+.markdown-body pre[class*="language-"]:hover .copied {
+  visibility: visible;
+}
+.markdown-body pre[class*="language-"]:hover .copied:hover {
+  background: #4caf50;
+  color: #fff;
+}
+.markdown-body pre[class*="language-"]:hover .copied:active,
+.markdown-body pre[class*="language-"] .active {
+  background: #2e9b33;
+  color: #fff;
+}
+
+.markdown-body pre[class*="language-"] .copied .octicon-copy {
+  display: block;
+}
+.markdown-body pre[class*="language-"] .copied .octicon-check {
+  display: none;
+}
+.markdown-body pre[class*="language-"] .active .octicon-copy {
+  display: none;
+}
+.markdown-body pre[class*="language-"] .active .octicon-check {
+  display: block;
+}
+
 .markdown-body .octicon {
   display: inline-block;
   fill: currentColor;
