From f7ae1d04ec396181a4e6dc48a229908b38fb5971 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 25 Sep 2023 12:04:53 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/9260

---
 app/src/assets/scss/business/_av.scss | 14 ++++++--------
 app/src/protyle/ui/initUI.ts          |  6 ++++++
 app/src/util/assets.ts                |  3 +++
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 6e86215e6..474845941 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -1,7 +1,6 @@
 .av {
   user-select: none;
   box-sizing: border-box;
-  font-size: 14px;
 
   &:hover .av__row--footer > .av__calc--show {
     opacity: 1;
@@ -13,14 +12,12 @@
 
     .layout-tab-bar {
       background-color: transparent;
+      font-size: 87.5%;
     }
   }
 
   &__title {
-    height: 30px;
     outline: none;
-    line-height: 30px;
-    font-size: 16px;
 
     &:empty::after {
       color: var(--b3-theme-on-surface);
@@ -62,6 +59,7 @@
     display: flex;
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
     position: relative;
+    font-size: 87.5%;
 
     &:hover {
       [data-type="block-ref"] {
@@ -118,9 +116,8 @@
         flex-direction: row-reverse;
         box-sizing: border-box;
         opacity: 0;
-        line-height: 26px;
         overflow: hidden;
-        font-size: 12px;
+        font-size: 75%;
 
         &.av__calc--ashow {
           opacity: 1;
@@ -133,7 +130,7 @@
         }
 
         span {
-          font-size: 14px;
+          font-size: 116%;
           color: var(--b3-theme-on-background);
           margin-left: 5px;
         }
@@ -150,6 +147,7 @@
       display: flex;
       align-items: center;
       transition: background 20ms ease-in 0s;
+      font-size: 87.5%;
 
       svg {
         height: 12px;
@@ -179,7 +177,7 @@
       display: none;
       position: absolute;
       right: 5px;
-      font-size: 10px;
+      font-size: 85%;
     }
 
     .block__icon {
diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts
index c018d934e..f3b53816f 100644
--- a/app/src/protyle/ui/initUI.ts
+++ b/app/src/protyle/ui/initUI.ts
@@ -6,6 +6,7 @@ import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
 import {isMac} from "../util/compatibility";
 import {setInlineStyle} from "../../util/assets";
 import {fetchPost} from "../../util/fetch";
+import {lineNumberRender} from "../render/highlightRender";
 
 export const initUI = (protyle: IProtyle) => {
     protyle.contentElement = document.createElement("div");
@@ -92,6 +93,11 @@ export const initUI = (protyle: IProtyle) => {
         clearTimeout(wheelTimeout);
         wheelTimeout = window.setTimeout(() => {
             fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
+            if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) {
+                protyle.wysiwyg.element.querySelectorAll(".code-block .protyle-linenumber").forEach((block: HTMLElement) => {
+                    lineNumberRender(block);
+                });
+            }
         }, Constants.TIMEOUT_LOAD);
     }, {passive: false});
 };
diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
index 634747519..75de48aa3 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -199,6 +199,7 @@ export const addGA = () => {
 
 export const setInlineStyle = (set = true) => {
     const height = Math.floor(window.siyuan.config.editor.fontSize * 1.625);
+    // .protyle-wysiwyg .hljs.protyle-linenumber 的设置是由于 lineNumberRender 中 clientHeight 总是取的整数
     let style = `.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}
 .b3-typography code:not(.hljs), .protyle-wysiwyg span[data-type~=code] { font-variant-ligatures: ${window.siyuan.config.editor.codeLigatures ? "normal" : "none"} }
 .li > .protyle-action {height:${height + 8}px;line-height: ${height + 8}px}
@@ -209,6 +210,8 @@ export const setInlineStyle = (set = true) => {
 .protyle-wysiwyg [data-node-id] [spellcheck] {min-height:${height}px;}
 .protyle-wysiwyg [data-node-id] {${window.siyuan.config.editor.rtl ? " direction: rtl;" : ""}${window.siyuan.config.editor.justify ? " text-align: justify;" : ""}}
 .protyle-wysiwyg .li {min-height:${height + 8}px}
+.protyle-wysiwyg .hljs.protyle-linenumber {line-height: ${(height * 0.85).toFixed(0)}px}
+.protyle-wysiwyg .av__calc {line-height: ${height}px}
 .protyle-gutters button svg {height:${height}px}
 .protyle-wysiwyg img.emoji, .b3-typography img.emoji {width:${height - 8}px}
 .protyle-wysiwyg .h1 img.emoji, .b3-typography h1 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.75 * 1.25)}px}