github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +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;
}
figure.highlight {
.table-container {
position: relative;
}
.code-container {
position: relative;
}
.copy-btn {

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

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

15
source/js/utils.js
View File

@ -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;