feat(code): add copy button for code (#239)

README.md

@@ -33,6 +33,7 @@ Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme ha
 * Easy-to-use and self-expanding **table of contents**
 * More **social links**, **share sites** and **comment system**
 * **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* **Copy code** to clipboard with one click
 * Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended Markdown syntax for **ruby annotation**
 * Extended Markdown syntax for **fraction**
@@ -92,6 +93,7 @@ I hope you will LoveIt ❤️!
 
 * **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
 * Automatically **highlighting** code
+* **Copy code** to clipboard with one click
 * **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended Markdown syntax for **ruby annotation**
@@ -137,16 +139,18 @@ LoveIt is licensed under the MIT license. Check the [LICENSE file](https://githu
 
 Thanks to the authors of following resources included in the theme:
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
 * [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [KaTeX](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

README.zh-cn.md

@@ -32,6 +32,7 @@
 * 易用和自动展开的**文章目录**
 * 支持更多的**社交链接**、**网站分享**和**评论系统**
 * 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
+* 一键**复制代码**到剪贴板
 * 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
 * 支持**分数**的扩展 Markdown 语法
@@ -87,6 +88,7 @@
 
 * 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
 * 支持**代码高亮**
+* 一键**复制代码**到剪贴板
 * 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
 * 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
@@ -132,16 +134,18 @@ LoveIt 根据 MIT 许可协议授权。 更多信息请查看 [LICENSE 文件](h
 
 LoveIt 主题中用到了以下项目，感谢它们的作者：
 
+* [normalize.css](https://github.com/necolas/normalize.css)
 * [Font Awesome](https://fontawesome.com/)
 * [Fork Awesome](https://forkaweso.me/Fork-Awesome/)
 * [Animate.css](https://daneden.github.io/animate.css/)
 * [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
-* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* [clipboard.js](https://github.com/zenorocha/clipboard.js)
+* [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [KaTeX](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)

assets/css/_core/_base.scss

@@ -33,6 +33,7 @@ body {
   background-color: $global-background-color;
   color: $global-font-color;
   overflow-wrap: break-word;
+  scrollbar-color: auto;
 
   &.dark {
     color: $global-font-color-dark;

assets/css/_mixin/_compatibility.scss

@@ -41,8 +41,8 @@
   display: -webkit-box;
   display: box;
 
-  -moz-box-orient: $orient;
   -webkit-box-orient: $orient;
+  -moz-box-orient: $orient;
   box-orient: $orient;
 }
 
@@ -67,3 +67,21 @@
     color: $color;
   }
 }
+
+@mixin max-content($property) {
+  #{$property}: -webkit-max-content;
+  #{$property}: -moz-max-content;
+  #{$property}: intrinsic;
+  #{$property}: max-content;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
+@mixin appearance($value) {
+  -moz-appearance: $value;
+  -webkit-appearance: $value;
+}

assets/css/_page/_single.scss

@@ -339,17 +339,10 @@
       }
     }
 
-    .version {
-      img {
-        min-height: 1.2rem;
-        vertical-align: sub;
-      }
-
-      &.small {
-        img {
-          min-height: 1rem;
-        }
-      }
+    .version img {
+      min-height: 1.2rem;
+      height: 1.2rem;
+      vertical-align: text-bottom;
     }
   }
 

assets/css/_partial/_single/_code.scss

@@ -1,12 +1,52 @@
 code {
   font-size: $code-font-size;
   font-family: $code-font-family;
-  padding: .2rem .4rem;
   color: $code-color;
 
+  img, .version img {
+    min-height: 1.1 * $code-font-size;
+    height: 1.1 * $code-font-size;
+  }
+
   .dark & {
     color: $code-color-dark;
   }
+
+  &:not(.block) {
+    padding: .2rem .4rem;
+  }
+}
+
+pre {
+  position: relative;
+  margin: 0;
+  padding: .25rem 0 .25rem .5rem;
+  @include tab-size(4);
+
+  .copy-button {
+    font-size: $code-font-size;
+    line-height: $code-font-size;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .3rem .5rem;
+    color: $code-info-color;
+    background: darken($code-background-color, 3%);
+
+    .dark & {
+      color: $code-info-color-dark;
+      background: darken($code-background-color-dark, 3%);
+    }
+  }
+
+  .copy-button:hover, .copy-button:focus {
+    cursor: pointer;
+    color: $global-link-hover-color;
+
+    .dark & {
+      color: $global-link-hover-color-dark;
+    }
+  }
 }
 
 code, pre, .highlight table, .highlight tr, .highlight td {
@@ -17,17 +57,26 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
+.highlight > .chroma, .gist {
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    border: none !important;
+    white-space: nowrap;
+  }
+}
+
 .highlight > .chroma {
+  position: relative;
   margin: .5rem 0;
 
-  code, pre {
-    margin: 0;
-    padding: 0;
+  pre {
+    position: unset;
   }
 
   &::before {
     display: block;
-    padding: .2rem .4rem;
+    padding: .3rem .4rem;
     font-family: $global-font-family;
     font-weight: bold;
     color: $code-info-color;
@@ -46,20 +95,25 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     }
   }
 
+  .lntd:last-child {
+    width: 100%;
+
+    pre {
+      padding-left: .75rem;
+      @include max-content(min-width);
+    }
+  }
+
   .ln {
-    padding-right: .8rem;
+    padding-right: .75rem;
   }
 
-  .lntd {
-    &:last-child {
-      .hl {
-        display: block;
-        background-color: darken($code-background-color, 5%);
+  .hl {
+    display: block;
+    background-color: darken($code-background-color, 10%);
 
-        .dark & {
-          background-color: darken($code-background-color-dark, 5%);
-        }
-      }
+    .dark & {
+      background-color: darken($code-background-color-dark, 5%);
     }
   }
 
@@ -96,18 +150,6 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma, .gist {
-  table, tr, td {
-    margin: 0;
-    border: none !important;
-    white-space: nowrap;
-  }
-
-  td {
-    padding: .2rem .4rem;
-  }
-}
-
 .gist {
   .gist-file, .gist-data, .gist-meta {
     border: none;

assets/css/_variables.scss

@@ -82,7 +82,7 @@ $search-background-color-dark: #363636 !default;
 // ========== Single Content ========== //
 // Font size of the TOC
 $toc-title-font-size: 1.2rem !default;
-$toc-content-font-size: 0.9rem !default;
+$toc-content-font-size: 1rem !default;
 
 // Color of the single link
 $single-link-color: #2d96bd !default;
@@ -124,7 +124,7 @@ $code-info-color: #b1b0b0 !default;
 $code-info-color-dark: #b1b0b0 !default;
 
 // Font size of the code
-$code-font-size: 13px !default;
+$code-font-size: .875rem !default;
 
 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace !default;

assets/lib/VERSION

@@ -6,9 +6,10 @@ [email protected] https://github.com/cferdinandi/smooth-scroll
 [email protected] https://github.com/algolia/autocomplete.js
 [email protected] https://lunrjs.com/
 [email protected] https://github.com/algolia/algoliasearch-client-javascript
-[email protected] https://github.com/ellisonleao/sharer.js
 [email protected] https://github.com/aFarkas/lazysizes
 [email protected] [email protected] [email protected] https://github.com/sachinchoolur/lightgallery.js
+[email protected] https://github.com/zenorocha/clipboard.js
+[email protected] https://github.com/ellisonleao/sharer.js
 [email protected] https://github.com/alexmacarthur/typeit
 [email protected] https://katex.org/
 [email protected] https://github.com/knsv/mermaid

assets/lib/polyfill.yml

@@ -10,3 +10,4 @@ theme:
   - Object.values
   - Promise
   - fetch
+  - Element.prototype.after