Create code-container element

* See: #98
next-theme · Jul 17, 2023 · c596155 · c596155
1 parent 0624149
commit c596155
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/source/css/_common/scaffolding/highlight/copy-code.styl b/source/css/_common/scaffolding/highlight/copy-code.styl
@@ -1,11 +1,9 @@
-.highlight:hover .copy-btn, pre:hover .copy-btn {
+.highlight:hover .copy-btn, .code-container:hover .copy-btn {
  opacity: 1;
 }
 
-figure.highlight {
- .table-container {
- position: relative;
- }
+.code-container {
+ position: relative;
 }
 
 .copy-btn {

diff --git a/source/css/_common/scaffolding/highlight/index.styl b/source/css/_common/scaffolding/highlight/index.styl
@@ -136,7 +136,6 @@ pre {
  @extend $code-block;
  overflow: auto;
  padding: 10px;
- position: relative;
 
  code {
  background: none;

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -44,7 +44,11 @@ NexT.utils = {
  */
  registerCopyCode: function() {
  let figure = document.querySelectorAll('figure.highlight');
- if (figure.length === 0) figure = document.querySelectorAll('pre:not(.mermaid)');
+ let needWrap = false;
+ if (figure.length === 0) {
+ figure = document.querySelectorAll('pre:not(.mermaid)');
+ needWrap = true;
+ }
  figure.forEach(element => {
  element.querySelectorAll('.code .line span').forEach(span => {
  span.classList.forEach(name => {
@@ -53,9 +57,14 @@ NexT.utils = {
  });
  if (!CONFIG.copycode.enable) return;
  let target = element;
- if (CONFIG.copycode.style !== 'mac') target = element.querySelector('.table-container') || element;
+ if (needWrap) {
+ const box = document.createElement('div');
+ box.className = 'code-container';
+ element.wrap(box);
+ target = box;
+ }
  target.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
- const button = element.querySelector('.copy-btn');
+ const button = target.querySelector('.copy-btn');
  button.addEventListener('click', () => {
  const lines = element.querySelector('.code') || element.querySelector('code');
  const code = lines.innerText;