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

Optimize prism: support copy_button

Browse Source
This commit is contained in:
Mimi 2020-08-02 00:23:28 +08:00
parent 74ccc182f3
commit 04da779212
4 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scripts/events/lib/highlight.js
View File

@ -3,12 +3,18 @@
const fs = require('fs'); const fs = require('fs');
const path = require('path'); const path = require('path');
function resolve(name) { function resolve(name, file) {
return path.dirname(require.resolve(`${name}/package.json`)); let dir;
try {
dir = path.dirname(require.resolve(`${name}/package.json`));
} catch (error) {
return '';
}
return `${dir}/${file}`;
} }
function highlightTheme(name) { function highlightTheme(name) {
const file = `${resolve('highlight.js')}/styles/${name}.css`; const file = resolve('highlight.js', `styles/${name}.css`);
const css = fs.readFileSync(file).toString(); const css = fs.readFileSync(file).toString();
let rule = ''; let rule = '';
let background = ''; let background = '';
@ -30,8 +36,8 @@ function highlightTheme(name) {
} }
function prismTheme(name) { function prismTheme(name) {
let file = `${resolve('prismjs')}/themes/${name}.css`; let file = resolve('prismjs', `themes/${name}.css`);
if (!fs.existsSync(file)) file = `${resolve('prism-themes')}/themes/${name}.css`; if (!fs.existsSync(file)) file = resolve('prism-themes', `themes/${name}.css`);
return file; return file;
} }
@ -49,6 +55,6 @@ module.exports = hexo => {
enable: config.prismjs.enable, enable: config.prismjs.enable,
light : prismTheme(theme.codeblock.prism.light), light : prismTheme(theme.codeblock.prism.light),
dark : prismTheme(theme.codeblock.prism.dark), dark : prismTheme(theme.codeblock.prism.dark),
number: `${resolve('prismjs')}/plugins/line-numbers/prism-line-numbers.css` number: resolve('prismjs', 'plugins/line-numbers/prism-line-numbers.css')
}; };
}; };

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

@ -1,4 +1,4 @@
.highlight:hover .copy-btn, .highlight .copy-btn:focus { .highlight:hover .copy-btn, pre:hover .copy-btn {
opacity: 1; opacity: 1;
} }

11
source/css/_common/scaffolding/highlight/highlight.styl
View File

@ -1,14 +1,14 @@
// Use `@require` to fix issue #67 // Use `@require` to fix issue #67
@require hexo-config('highlight.light.file') if (hexo-config('highlight.enable')); @require hexo-config('highlight.light.file') if (hexo-config('highlight.enable') && hexo-config('highlight.light.file'));
if (hexo-config('prism.enable')) { if (hexo-config('prism.enable')) {
@require hexo-config('prism.light'); @require hexo-config('prism.light') if (hexo-config('prism.light'));
@require hexo-config('prism.number'); @require hexo-config('prism.number') if (hexo-config('prism.number'));
} }
if (hexo-config('darkmode')) { if (hexo-config('darkmode')) {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@require hexo-config('highlight.dark.file') if (hexo-config('highlight.enable')); @require hexo-config('highlight.dark.file') if (hexo-config('highlight.enable') && hexo-config('highlight.dark.file'));
@require hexo-config('prism.dark') if (hexo-config('prism.enable')); @require hexo-config('prism.dark') if (hexo-config('prism.enable') && hexo-config('prism.dark'));
} }
} }
@ -117,6 +117,7 @@ pre {
@extend $code-block; @extend $code-block;
overflow: auto; overflow: auto;
padding: 10px; padding: 10px;
position: relative;
code { code {
background: none; background: none;

7
source/js/utils.js
View File

@ -71,7 +71,9 @@ NexT.utils = {
* One-click copy code support. * One-click copy code support.
*/ */
registerCopyCode: function() { registerCopyCode: function() {
document.querySelectorAll('figure.highlight').forEach(element => { let figure = document.querySelectorAll('figure.highlight');
if (figure.length === 0) figure = document.querySelectorAll('pre');
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 => {
span.classList.replace(name, `hljs-${name}`); span.classList.replace(name, `hljs-${name}`);
@ -81,7 +83,8 @@ NexT.utils = {
element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>'); element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>');
const button = element.querySelector('.copy-btn'); const button = element.querySelector('.copy-btn');
button.addEventListener('click', () => { button.addEventListener('click', () => {
const code = [...button.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); const lines = element.querySelector('.code') || element.querySelector('code');
const code = lines.innerText;
const ta = document.createElement('textarea'); const ta = document.createElement('textarea');
ta.style.top = window.scrollY + 'px'; // Prevent page scrolling ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
ta.style.position = 'absolute'; ta.style.position = 'absolute';