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);
  }
};

重新编译,能看到复制代码时不再复制代码行数。