diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss index 90e343d42..1dbc03039 100644 --- a/app/src/assets/scss/component/_typography.scss +++ b/app/src/assets/scss/component/_typography.scss @@ -554,36 +554,31 @@ } } - &-linenumber { - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; + &-linenumber__rows { + pointer-events: none; + user-select: none; + counter-reset: linenumber; + font-size: 85%; + box-sizing: border-box; + font-family: var(--b3-font-family-code); + margin-right: 1em; + min-width: 1.2em; + text-align: right; - &__rows { + & > span { pointer-events: none; - user-select: none; - counter-reset: linenumber; - font-size: 85%; - box-sizing: border-box; - font-family: var(--b3-font-family-code); - margin-right: 1em; - min-width: 1.2em; - text-align: right; + display: block; - & > span { - pointer-events: none; + &::before { + counter-increment: linenumber; + content: counter(linenumber); + color: var(--b3-theme-on-surface); display: block; - - &::before { - counter-increment: linenumber; - content: counter(linenumber); - color: var(--b3-theme-on-surface); - display: block; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - direction: rtl; - } + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; } } } diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index fc095f596..55fb662f5 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -2100,8 +2100,8 @@ export const setFold = (protyle: IProtyle, nodeElement: Element, isOpen?: boolea } nodeElement.removeAttribute("fold"); // https://github.com/siyuan-note/siyuan/issues/4411 - nodeElement.querySelectorAll(".protyle-linenumber").forEach((item: HTMLElement) => { - lineNumberRender(item); + nodeElement.querySelectorAll(".protyle-linenumber__rows").forEach((item: HTMLElement) => { + lineNumberRender(item.parentElement); }); } else { if (typeof isOpen === "boolean" && isOpen) { diff --git a/app/src/protyle/render/highlightRender.ts b/app/src/protyle/render/highlightRender.ts index 0a48f25a7..c9be3bf27 100644 --- a/app/src/protyle/render/highlightRender.ts +++ b/app/src/protyle/render/highlightRender.ts @@ -89,8 +89,7 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) = const codeText = block.textContent; if (!isPreview && (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum))) { // 需要先添加 class 以防止抖动 https://ld246.com/article/1648116585443 - block.classList.add("protyle-linenumber"); - block.innerHTML = '
' + block.firstElementChild.classList.add("protyle-linenumber__rows") lineNumberRender(block); } @@ -116,11 +115,10 @@ export const lineNumberRender = (block: HTMLElement) => { if (!window.siyuan.config.editor.codeSyntaxHighlightLineNum && lineNumber !== "true") { return; } - block.classList.add("protyle-linenumber"); // clientHeight 总是取的整数 block.parentElement.style.lineHeight = `${((parseInt(block.parentElement.style.fontSize) || window.siyuan.config.editor.fontSize) * 1.625 * 0.85).toFixed(0)}px`; const lineNumberTemp = document.createElement("div"); - lineNumberTemp.className = "hljs protyle-linenumber"; + lineNumberTemp.className = "hljs"; lineNumberTemp.setAttribute("style", `box-sizing: border-box;width: calc(100% - 3.6em);position: absolute;padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;white-space:${block.style.whiteSpace};word-break:${block.style.wordBreak};font-variant-ligatures:${block.style.fontVariantLigatures};`); lineNumberTemp.setAttribute("contenteditable", "true"); block.insertAdjacentElement("afterend", lineNumberTemp); diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 3e683bb22..1c82d3451 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -1195,12 +1195,6 @@ export class Toolbar { nodeElement.innerHTML = `