代码块添加行号
添加方法,在全局设置自定义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';
});
评论 (0)