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

## 背景

相关帖子：https://ld246.com/article/1727688144141

先使用这个代码片段：

```css
.protyle-wysiwyg .hljs > div[contenteditable] {
    word-break: break-all !important;
}
```

然后把下面这段代码复制粘贴到代码块里，开启代码块换行和行号：

```php
if ($_SESSION['is_snapshotuser'] == 1) {
	$_SESSION['is_snapshotuser'] = 0;
	return ['nickname' => '微信用户', 'avatar' => 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM5EPsm1NEriaoj9ONhxhcWKz9RbNRnYhaooks1zicFGllRezc7Ya7v5WNqAMtfIxTpF7FVdNpXZnuNA/132'];
}
```

行号高度的计算就会有问题：

![image](https://github.com/user-attachments/assets/af686bb9-f8f2-4f35-accd-aa779b50ab07)

## 方案

不知道能不能实现，但我想到一个思路：

1. 用 [Window.getComputedStyle()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle) 获取代码元素的样式
2. 如果 `.wordBreak === "break-all"` ，则按 break-all 来计算代码块的行号

相关的需要修改的应该是这段代码：

https://github.com/siyuan-note/siyuan/blob/6278d97486cb29370446276f49495701f076da14/app/src/protyle/render/highlightRender.ts#L117-L165


	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;
	};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

背景

方案

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Participants

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

Description

背景

方案

Activity

Vanessa219 commented on Nov 24, 2024

TCOTC commented on Nov 24, 2024

Vanessa219 commented on Nov 25, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Participants

Issue actions

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