Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-09-22 00:20:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve code block line number rendering performance (#15324)

Browse source 
* ⚡ Improve code block line number rendering performance

fix https://github.com/siyuan-note/siyuan/issues/12715

* ⚡ Improve code block line number rendering performance

* ⚡ Improve code block line number rendering performance

* Revert "⚡ Improve code block line number rendering performance"

This reverts commit 603518f521.

* Revert "⚡ Improve code block line number rendering performance"

This reverts commit b69cef5f83.

* ⚡ Improve code block line number rendering performance
This commit is contained in:
Jeffrey Chen 2025-07-23 11:48:09 +08:00 • committed by GitHub
parent 76e4aad584
commit 69987028ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

50
app/src/protyle/render/highlightRender.ts
View file

@ -128,43 +128,51 @@ export const lineNumberRender = (block: HTMLElement, zoom = 1) => {
block.parentElement.style.lineHeight = `${((parseInt(block.parentElement.style.fontSize) || window.siyuan.config.editor.fontSize) * 1.625 * 0.85).toFixed(0)}px`;
const codeElement = block.lastElementChild as HTMLElement;
let lineNumberHTML = "";
const lineList = codeElement.textContent.split(/\r\n|\r|\n|\u2028|\u2029/g);
if (lineList[lineList.length - 1] === "" && lineList.length > 1) {
lineList.pop();
}
block.firstElementChild.innerHTML = `<span>${lineList.length}</span>`;
codeElement.style.paddingLeft = `${block.firstElementChild.clientWidth + 16}px`;
const lineNumberTemp = document.createElement("div");
lineNumberTemp.className = "hljs";
// 不能使用 codeElement.clientWidth，被忽略小数点导致宽度不一致
lineNumberTemp.setAttribute("style", `padding-left:${codeElement.style.paddingLeft};
let lineNumberHTML = "";
if (codeElement.style.wordBreak === "break-word") {
// 代码块开启了换行
const codeElementStyle = window.getComputedStyle(codeElement);
const lineNumberTemp = document.createElement("div");
lineNumberTemp.className = "hljs";
// 不能使用 codeElement.clientWidth，被忽略小数点导致宽度不一致
lineNumberTemp.setAttribute("style", `padding-left:${codeElement.style.paddingLeft};
width: ${codeElement.getBoundingClientRect().width / zoom}px;
white-space:${codeElement.style.whiteSpace};
word-break:${codeElement.style.wordBreak};
font-variant-ligatures:${codeElement.style.fontVariantLigatures};
white-space:${codeElementStyle.whiteSpace};
word-break:${codeElementStyle.wordBreak};
font-variant-ligatures:${codeElementStyle.fontVariantLigatures};
padding-right:0;max-height: none;box-sizing: border-box;position: absolute;padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;`);
lineNumberTemp.setAttribute("contenteditable", "true");
block.insertAdjacentElement("afterend", lineNumberTemp);
lineNumberTemp.setAttribute("contenteditable", "true");
block.insertAdjacentElement("afterend", lineNumberTemp);
const isWrap = codeElement.style.wordBreak === "break-word";
lineList.map((line) => {
let lineHeight = "";
if (isWrap) {
lineList.map((line) => {
// windows 下空格高度为 0 https://github.com/siyuan-note/siyuan/issues/12346
lineNumberTemp.textContent = line.trim() ? line : "<br>";
// 不能使用 lineNumberTemp.getBoundingClientRect().height.toFixed(1) 否则
// windows 需等待字体下载完成再计算，否则导致不换行，高度计算错误
// https://github.com/siyuan-note/siyuan/issues/9029
// https://github.com/siyuan-note/siyuan/issues/9140
lineHeight = ` style="height:${lineNumberTemp.clientHeight}px;"`;
}
lineNumberHTML += `<span${lineHeight}></span>`;
});
lineNumberHTML += `<span style="height:${lineNumberTemp.clientHeight}px"></span>`;
});
lineNumberTemp.remove();
} else {
lineNumberHTML = "<span></span>".repeat(lineList.length);
}
lineNumberTemp.remove();
block.firstElementChild.innerHTML = lineNumberHTML;
// 用最后一个行号元素计算宽度
const lastLineNumberElement = block.firstElementChild.lastElementChild as HTMLElement;
if (lastLineNumberElement) {
lastLineNumberElement.textContent = lineList.length.toString();
codeElement.style.paddingLeft = `${lastLineNumberElement.offsetWidth + 16}px`;
lastLineNumberElement.textContent = "";
}
// https://github.com/siyuan-note/siyuan/issues/12726
if (block.scrollHeight > block.clientHeight) {
if (getSelection().rangeCount > 0) {