自定义hugo的even主题,禁止复制代码行数
文章目录
hugo是一个静态网站生成框架,基于go实现。
hugo-theme-even是一个hugo的主题。
因为even默认生成的代码存在代码行数,但是复制文章时会把代码行数也一并复制,所以特地对even的代码进行修改,让其复制时不复制代码行数。
因为需要修改assets目录里面的文件,所以需要hugo extended版,可使用命令 hugo
查看版本。
even默认代码高亮为chroma,所以我们先禁用chroma,并启用highlight作为代码高亮。
修改config.toml配置文件:
# 将下面配置设置为false
pygmentsCodefences = false
pygmentsUseClasses = false
pygmentsCodefencesGuessSyntax = false
#将下面配置设置为true
highlightInClient = true
然后修改assets\js目录下面的even.js文件,使得代码行数禁止复制:
Even.highlight = function() {
const blocks = document.querySelectorAll('pre code');
for (let i = 0; i < blocks.length; i++) {
const block = blocks[i];
const rootElement = block.parentElement;
const lineCodes = block.innerHTML.split(/\\n/);
if (lineCodes[lineCodes.length - 1] === '') lineCodes.pop();
const lineLength = lineCodes.length;
let codeLineHtml = '';
for (let i = 0; i < lineLength; i++) {
codeLineHtml += `<div class="line">${i + 1}</div>`;
}
let codeHtml = '';
for (let i = 0; i < lineLength; i++) {
codeHtml += `<div class="line">${lineCodes[i]}</div>`;
}
block.className += ' highlight';
const figure = document.createElement('figure');
figure.className = block.className;
//修改该行代码,添加style="user-select:none"
figure.innerHTML = `<table><tbody><tr><td class="gutter"><pre style="user-select:none">${codeLineHtml}</pre></td><td class="code"><pre>${codeHtml}</pre></td></tr></tbody></table>`;
rootElement.parentElement.replaceChild(figure, rootElement);
}
};
重新编译,能看到复制代码时不再复制代码行数。
文章作者 梧桐碎梦
上次更新 2021-10-13 23:18:11