代码
/*自定义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云](https://bbs.hookyun.cn/wp-content/uploads/2025/09/eceb73ccfb20250916041439.jpg)
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END