Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

支持 word-break: break-all; 情况下的代码块行号计算 #12715

Closed
TCOTC opened this issue Oct 6, 2024 · 3 comments
Closed

支持 word-break: break-all; 情况下的代码块行号计算 #12715

TCOTC opened this issue Oct 6, 2024 · 3 comments
Assignees
@Vanessa219

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Oct 6, 2024 •
edited
Loading

背景

相关帖子：https://ld246.com/article/1727688144141

先使用这个代码片段：

.protyle-wysiwyg .hljs > div[contenteditable] {
    word-break: break-all !important;
}

然后把下面这段代码复制粘贴到代码块里，开启代码块换行和行号：

if ($_SESSION['is_snapshotuser'] == 1) {
	$_SESSION['is_snapshotuser'] = 0;
	return ['nickname' => '微信用户', 'avatar' => 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM5EPsm1NEriaoj9ONhxhcWKz9RbNRnYhaooks1zicFGllRezc7Ya7v5WNqAMtfIxTpF7FVdNpXZnuNA/132'];
}

行号高度的计算就会有问题：

image

方案

不知道能不能实现，但我想到一个思路：

  1. 用 Window.getComputedStyle() 获取代码元素的样式
  2. 如果 .wordBreak === "break-all" ，则按 break-all 来计算代码块的行号

相关的需要修改的应该是这段代码：

siyuan/app/src/protyle/render/highlightRender.ts

Lines 117 to 165 in 6278d97

export const lineNumberRender = (block: HTMLElement) => {
const lineNumber = block.parentElement.getAttribute("lineNumber");
if (lineNumber === "false") {
return;
}
if (!window.siyuan.config.editor.codeSyntaxHighlightLineNum && lineNumber !== "true") {
return;
}
// clientHeight 总是取的整数
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";
lineNumberTemp.setAttribute("style", `padding-left:${codeElement.style.paddingLeft};
width: ${codeElement.clientWidth}px;
white-space:${codeElement.style.whiteSpace};
word-break:${codeElement.style.wordBreak};
font-variant-ligatures:${codeElement.style.fontVariantLigatures};
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);
const isWrap = codeElement.style.wordBreak === "break-word";
lineList.map((line) => {
let lineHeight = "";
if (isWrap) {
// 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>`;
});
lineNumberTemp.remove();
block.firstElementChild.innerHTML = lineNumberHTML;
};

@TCOTC TCOTC changed the title 支持 word-break: break-all; 情况下的行号计算 支持 word-break: break-all; 情况下的代码块行号计算 Oct 6, 2024
@siyuan-note siyuan-note deleted a comment Oct 25, 2024
@Vanessa219
Copy link
Member

https://ld246.com/article/1727688144141/comment/1732412801927?r=Vanessa#comments

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 24, 2024

我说的是回帖里发现的这个问题呐：

image

@Vanessa219
Copy link
Member

这个问题参见回帖。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Vanessa219 Vanessa219

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Vanessa219 @TCOTC