From 10c48367b34e1eca0e6bb0387d2df02528678595 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 18 Aug 2024 11:27:38 +0800
Subject: [PATCH] :bug: https://github.com/siyuan-note/siyuan/issues/12268

---
 app/src/assets/scss/component/_typography.scss | 4 ----
 app/src/protyle/render/highlightRender.ts      | 6 ++++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index 1dbc03039..97cad155a 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -300,10 +300,6 @@
     &:hover .protyle-action__language {
       opacity: .86;
     }
-
-    &[linenumber="true"] .protyle-action__language {
-      margin-left: 3.6em;
-    }
   }
 
   .hljs {
diff --git a/app/src/protyle/render/highlightRender.ts b/app/src/protyle/render/highlightRender.ts
index 78953c81a..4cce74ad6 100644
--- a/app/src/protyle/render/highlightRender.ts
+++ b/app/src/protyle/render/highlightRender.ts
@@ -91,6 +91,9 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
                     // 需要先添加 class 以防止抖动 https://ld246.com/article/1648116585443
                     block.firstElementChild.classList.add("protyle-linenumber__rows");
                     lineNumberRender(block);
+                } else {
+                    block.firstElementChild.classList.remove("protyle-linenumber__rows");
+                    block.firstElementChild.innerHTML = "";
                 }
 
                 (block.childElementCount === 2 ? block.lastElementChild : block).innerHTML = window.hljs.highlight(
@@ -119,10 +122,9 @@ export const lineNumberRender = (block: HTMLElement) => {
     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";
-    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("style", `box-sizing: border-box;width: ${block.lastElementChild.clientWidth}px;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);
-
     let lineNumberHTML = "";
     const lineList = block.lastElementChild.textContent.split(/\r\n|\r|\n|\u2028|\u2029/g);
     if (lineList[lineList.length - 1] === "" && lineList.length > 1) {