Remove highlight-container

next-theme · May 7, 2020 · 9527ef6 · 9527ef6
1 parent e61c28d
commit 9527ef6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 24 deletions.
diff --git a/source/css/_common/scaffolding/highlight/copy-code.styl b/source/css/_common/scaffolding/highlight/copy-code.styl
@@ -1,8 +1,4 @@
-.highlight-container {
-  position: relative;
-}
-
-.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus {
+.highlight:hover .copy-btn, .highlight .copy-btn:focus {
   opacity: 1;
 }
 
@@ -22,7 +18,7 @@
     right: 0;
     top: 0;
   } else if (hexo-config('codeblock.copy_button.style') == 'mac') {
-    color: white;
+    color: $highlight-foreground;
     font-size: 14px;
     right: 0;
     top: 2px;
@@ -38,12 +34,16 @@
 }
 
 if (hexo-config('codeblock.copy_button.style') == 'mac') {
-  .highlight-container {
+  .highlight {
     background: #21252b;
     border-radius: 5px;
     box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
     padding-top: 30px;
 
+    .table-container {
+      border-radius: 0 0 5px 5px;
+    }
+
     &::before {
       background: #fc625d;
       border-radius: 50%;
@@ -55,13 +55,5 @@ if (hexo-config('codeblock.copy_button.style') == 'mac') {
       position: absolute;
       width: 12px;
     }
-
-    .highlight {
-      border-radius: 0 0 5px 5px;
-
-      .table-container {
-        border-radius: 0 0 5px 5px;
-      }
-    }
   }
 }
diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl
@@ -28,6 +28,7 @@ code {
 
 .highlight {
   @extend $code-block;
+  position: relative;
 
   *::selection {
     background: $highlight-selection;

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -64,15 +64,12 @@ NexT.utils = {
    */
   registerCopyCode: function() {
     document.querySelectorAll('figure.highlight').forEach(element => {
-      const box = document.createElement('div');
-      element.wrap(box);
-      box.classList.add('highlight-container');
-      box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>');
-      var button = element.parentNode.querySelector('.copy-btn');
+      element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>');
+      const button = element.querySelector('.copy-btn');
       button.addEventListener('click', event => {
-        var target = event.currentTarget;
-        var code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
-        var ta = document.createElement('textarea');
+        const target = event.currentTarget;
+        const code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
+        const ta = document.createElement('textarea');
         ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
         ta.style.position = 'absolute';
         ta.style.opacity = '0';
@@ -84,7 +81,7 @@ NexT.utils = {
         ta.select();
         ta.setSelectionRange(0, code.length);
         ta.readOnly = false;
-        var result = document.execCommand('copy');
+        const result = document.execCommand('copy');
         if (CONFIG.copycode.show_result) {
           target.querySelector('i').className = result ? 'fa fa-check fa-fw' : 'fa fa-times fa-fw';
         }