github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create code-container element

Browse Source 
* See: https://github.com/next-theme/hexo-theme-next/issues/98
This commit is contained in:
Mimi 2023-07-17 11:23:42 +08:00
parent 0624149b05
commit c596155ef9
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/css/_common/scaffolding/highlight/copy-code.styl
View File

@ -1,11 +1,9 @@
.highlight:hover .copy-btn, pre:hover .copy-btn { .highlight:hover .copy-btn, .code-container:hover .copy-btn {
opacity: 1; opacity: 1;
} }
figure.highlight { .code-container {
.table-container { position: relative;
position: relative;
}
} }
.copy-btn { .copy-btn {

1
source/css/_common/scaffolding/highlight/index.styl
View File

@ -136,7 +136,6 @@ pre {
@extend $code-block; @extend $code-block;
overflow: auto; overflow: auto;
padding: 10px; padding: 10px;
position: relative;
code { code {
background: none; background: none;

15
source/js/utils.js
View File

@ -44,7 +44,11 @@ NexT.utils = {
*/ */
registerCopyCode: function() { registerCopyCode: function() {
let figure = document.querySelectorAll('figure.highlight'); 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 => { figure.forEach(element => {
element.querySelectorAll('.code .line span').forEach(span => { element.querySelectorAll('.code .line span').forEach(span => {
span.classList.forEach(name => { span.classList.forEach(name => {
@ -53,9 +57,14 @@ NexT.utils = {
}); });
if (!CONFIG.copycode.enable) return; if (!CONFIG.copycode.enable) return;
let target = element; 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>'); 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', () => { button.addEventListener('click', () => {
const lines = element.querySelector('.code') || element.querySelector('code'); const lines = element.querySelector('.code') || element.querySelector('code');
const code = lines.innerText; const code = lines.innerText;