:art: https://github.com/siyuan-note/siyuan/issues/10769

app/appearance/themes/daylight/theme.css

@@ -151,7 +151,6 @@
 
     /* 代码片段背景 */
     --b3-protyle-code-background: rgba(27, 31, 35, .05);
-    --b3-protyle-code-linenumber-hl: #b9d1f4;
 
     /* 所见即所得行内元素颜色 */
     --b3-protyle-inline-strong-color: #202124;
@@ -186,7 +185,3 @@
 .protyle-action--order:after {
     mix-blend-mode: multiply;
 }
-
-.b3-typography .hljs, .protyle-wysiwyg .hljs {
-    background-color: #f8f9fa;
-}

app/appearance/themes/midnight/theme.css

@@ -150,7 +150,6 @@
 
     /* 代码片段背景 */
     --b3-protyle-code-background: rgba(240, 246, 252, .15);
-    --b3-protyle-code-linenumber-hl: #26364a;
 
     /* 所见即所得行内元素颜色 */
     --b3-protyle-inline-strong-color: #e8eaed;

app/src/assets/scss/component/_typography.scss

@@ -268,10 +268,11 @@
 
   .code-block {
     position: relative;
-    padding: 0;
+    padding: 2em 1em 1.6em;
     margin: 1em 0;
     display: flex;
     flex-direction: row-reverse;
+    background-color: var(--b3-protyle-code-background);
 
     .protyle-action {
       left: 4px;
@@ -307,7 +308,6 @@
 
   .hljs {
     border-radius: var(--b3-border-radius);
-    padding: 2em 4px 1.6em 4px;
     font-size: 85%;
     overflow: auto;
     font-family: var(--b3-font-family-code);
@@ -315,6 +315,8 @@
     overflow-x: overlay;
     tab-size: 4;
     flex: 1;
+    display: flex;
+    background-color: transparent;
   }
 
   [data-subtype="echarts"],
@@ -561,12 +563,11 @@
       user-select: none;
       counter-reset: linenumber;
       font-size: 85%;
-      background-color: var(--b3-theme-surface);
-      padding: 2em 4px 1.6em 4px;
       box-sizing: border-box;
-      border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
-      width: 3.6em;
       font-family: var(--b3-font-family-code);
+      margin-right: 1em;
+      min-width: 1.2em;
+      text-align: right;
 
       & > span {
         pointer-events: none;

app/src/assets/scss/protyle/_wysiwyg.scss

@@ -446,27 +446,16 @@
     }
   }
 
-  &--select,
-  &--select .hljs {
-    background-color: var(--b3-theme-primary-lightest) !important;
-  }
-
   // https://github.com/siyuan-note/siyuan/issues/11589
   .hljs wbr {
     display: none;
   }
 
-  &--hl,
-  &--hl .hljs {
+  &--hl {
     transition: var(--b3-background-transition);
     background-color: var(--b3-theme-primary-lightest) !important;
   }
 
-  &--hl .protyle-linenumber__rows,
-  &--select .protyle-linenumber__rows {
-    background-color: var(--b3-protyle-code-linenumber-hl) !important;
-  }
-
   .dragover {
     &__top:not(.av__row) {
       box-shadow: 0 -4px 0 0 var(--b3-theme-primary-lighter) !important;

app/src/protyle/render/highlightRender.ts

@@ -86,23 +86,16 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
                 } else {
                     block.style.fontVariantLigatures = "none";
                 }
-                const languageElement = block.parentElement.querySelector(".protyle-action__language") as HTMLElement;
+                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 = '<div class="protyle-linenumber__rows"></div><div style="flex: 1"></div>'
                     lineNumberRender(block);
-                    if (languageElement) {
-                        languageElement.style.marginLeft = "3.6em";
-                    }
-                } else if (block.nextElementSibling?.classList.contains("protyle-linenumber__rows")) {
-                    block.classList.remove("protyle-linenumber");
-                    block.nextElementSibling.remove();
-                    if (languageElement) {
-                        languageElement.style.marginLeft = "";
-                    }
                 }
-                block.innerHTML = window.hljs.highlight(
-                    block.textContent + (block.textContent.endsWith("\n") ? "" : "\n"), // https://github.com/siyuan-note/siyuan/issues/4609
+
+                (block.childElementCount === 2 ? block.lastElementChild : block).innerHTML = window.hljs.highlight(
+                    codeText + (codeText.endsWith("\n") ? "" : "\n"), // https://github.com/siyuan-note/siyuan/issues/4609
                     {
                         language,
                         ignoreIllegals: true
@@ -133,7 +126,7 @@ export const lineNumberRender = (block: HTMLElement) => {
     block.insertAdjacentElement("afterend", lineNumberTemp);
 
     let lineNumberHTML = "";
-    const lineList = block.textContent.split(/\r\n|\r|\n|\u2028|\u2029/g);
+    const lineList = block.lastElementChild.textContent.split(/\r\n|\r|\n|\u2028|\u2029/g);
     if (lineList[lineList.length - 1] === "" && lineList.length > 1) {
         lineList.pop();
     }
@@ -141,7 +134,7 @@ export const lineNumberRender = (block: HTMLElement) => {
     lineList.map((line) => {
         let lineHeight = "";
         if (isWrap) {
-            lineNumberTemp.textContent = line || "\n";
+            lineNumberTemp.textContent = line || "<br>";
             // 不能使用 lineNumberTemp.getBoundingClientRect().height.toFixed(1) 否则
             // windows 需等待字体下载完成再计算，否则导致不换行，高度计算错误
             // https://github.com/siyuan-note/siyuan/issues/9029
@@ -152,9 +145,5 @@ export const lineNumberRender = (block: HTMLElement) => {
     });
 
     lineNumberTemp.remove();
-    if (block.nextElementSibling?.classList.contains("protyle-linenumber__rows")) {
-        block.nextElementSibling.innerHTML = lineNumberHTML;
-    } else {
-        block.insertAdjacentHTML("afterend", `<span contenteditable="false" class="protyle-linenumber__rows">${lineNumberHTML}</span>`);
-    }
+    block.firstElementChild.innerHTML = lineNumberHTML;
 };