support copy code,close #91

README.md

@@ -25,7 +25,7 @@ Maupassant theme, ported to Hugo.
 8. 支持文章按年份日期进行归档
 9. 支持GA分析统计
 17. 不蒜子页面计数器支持
-11. 代码高亮、代码行号
+11. 代码高亮、代码行号、代码拷贝
 10. sitemap站点地图
 5. RSS支持，并且可以自动发现RSS
 14. Google站内搜索

layouts/partials/copy_button.html

@@ -0,0 +1,76 @@
+{{- if (and (eq .Kind "page") (in (slice "post" "posts") .Type)) }}
+<style type="text/css">
+div.highlight {
+    position: relative;
+    margin: 1em 0px;
+}
+
+.copy-code {
+    display: none;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(78, 78, 78, 0.8);
+    border-radius: var(--radius);
+    padding: 0 5px;
+    font: inherit;
+    user-select: none;
+    cursor: pointer;
+    border: 0;
+    --radius: 8px;
+}
+
+div.highlight:hover .copy-code,pre:hover .copy-code {
+    display: block;
+}
+
+</style>
+<script>
+    document.querySelectorAll('pre > code').forEach((codeblock) => {
+        const container = codeblock.parentNode.parentNode;
+
+        const copybutton = document.createElement('button');
+        copybutton.classList.add('copy-code');
+        copybutton.innerHTML = 'copy';
+
+        function copyingDone() {
+            copybutton.innerHTML = 'copied!';
+            setTimeout(() => {
+                copybutton.innerHTML = 'copy';
+            }, 2000);
+        }
+
+        copybutton.addEventListener('click', (cb) => {
+            if ('clipboard' in navigator) {
+                navigator.clipboard.writeText(codeblock.textContent);
+                copyingDone();
+                return;
+            }
+
+            const range = document.createRange();
+            range.selectNodeContents(codeblock);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+            try {
+                document.execCommand('copy');
+                copyingDone();
+            } catch (e) { };
+            selection.removeRange(range);
+        });
+
+        if (container.classList.contains("highlight")) {
+            container.appendChild(copybutton);
+        } else if (container.parentNode.firstChild == container) {
+            // td containing LineNos
+        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
+            // table containing LineNos and code
+            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
+        } else {
+            // code blocks not having highlight as parent class
+            codeblock.parentNode.appendChild(copybutton);
+        }
+    });
+</script>
+{{- end }}

layouts/partials/footer.html

@@ -136,6 +136,8 @@
     {{ template "_internal/google_analytics.html" . }}
 {{- end -}}
 
+{{ partial "copy_button" . }}
+
 {{ if .Site.Params.busuanzi }}
     <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>
 {{ end }}

static/css/style.css

@@ -15,7 +15,6 @@
 
 [class^="icon-"], [class*=" icon-"] {
     font-family: 'icomoon';
-    speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
@@ -98,13 +97,12 @@ mark {
     padding: 3px 3px 3px 5px;
     background: #fffdd1;
 }
-pre, code {
-    font-family:Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;
-}
 pre {
+    font-family:Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;
     overflow:auto;
     border: 1px solid #ddd;
     display: block;
+    margin: 0px;
 }
 code {
     display: inline-block;
@@ -220,8 +218,6 @@ textarea {
 #nav-menu a:first-child {
     border:none;
 }
-#nav-menu a:hover {
-}
 #nav-menu a.current {
     border:1px solid #ddd;
     border-bottom:1px solid #fff;
@@ -1039,7 +1035,6 @@ table tr:nth-child(2n) {
 
 table tr {
     border: 0;
-    border-top: 1px solid #CCC;
     background-color: white;
 }