【教程】Typecho给Joe主题代码块添加行号

代码

/*自定义CSS*/
.line-numbers {
  color: gray;
  text-align: right;
  user-select: none; 
  padding-right: 5px; 
  padding-left: 10px;
  display: inline-block; 
  border-right: 1px solid gray;
}
.line-numbers span {
  display: block; 
}
//自定义js
document.querySelectorAll('pre code').forEach((code) => {
  const lines = code.textContent.split('\n');

  const lineNumbers = document.createElement('div');
  lineNumbers.className = 'line-numbers';

  lines.forEach((_, index) => {
    const lineNumber = document.createElement('span');
    lineNumber.textContent = index + 1; 
    lineNumbers.appendChild(lineNumber);
  });

  const preBlock = code.parentElement;
  preBlock.insertBefore(lineNumbers, code);

  lineNumbers.style.float = 'left';
  lineNumbers.style.userSelect = 'none';
});

效果图

图片[1]-【教程】Typecho给Joe主题代码块添加行号-Hook云
© 版权声明
THE END
喜欢就支持一下吧
点赞16 分享