【Joe主题】给代码块添加行号
标签搜索
侧边栏壁纸
  • 累计撰写 4 篇文章
  • 累计收到 0 条评论

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

重痕
2024-11-03 / 0 评论 / 45 阅读 / 正在检测是否收录...

代码块添加行号

添加方法,在全局设置自定义css和自定义js中添加以下代码
/*自定义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

评论 (0)

取消