From d80513d0118d2d97cc3d3c88c1fb58253feff048 Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Fri, 6 Jun 2025 00:41:03 +0800
Subject: [PATCH] refactor(CodePreview): improve the triggering timing for
 highlighting (#6866)

---
 .../components/CodeBlockView/CodePreview.tsx  | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/renderer/src/components/CodeBlockView/CodePreview.tsx b/src/renderer/src/components/CodeBlockView/CodePreview.tsx
index c0ebcd9a7e..d3c56f295b 100644
--- a/src/renderer/src/components/CodeBlockView/CodePreview.tsx
+++ b/src/renderer/src/components/CodeBlockView/CodePreview.tsx
@@ -134,26 +134,31 @@ const CodePreview = ({ children, language, setTools }: CodePreviewProps) => {
     return () => cleanupTokenizers(callerId)
   }, [callerId, cleanupTokenizers])
 
-  // 处理第二次开始的代码高亮
+  // 触发代码高亮
+  // - 进入视口后触发第一次高亮
+  // - 内容变化后触发之后的高亮
   useEffect(() => {
-    if (prevCodeLengthRef.current > 0) {
-      setTimeout(highlightCode, 0)
-    }
-  }, [highlightCode])
-
-  // 视口检测逻辑，只处理第一次代码高亮
-  useEffect(() => {
-    const codeElement = codeContentRef.current
-    if (!codeElement || prevCodeLengthRef.current > 0) return
-
     let isMounted = true
 
-    const observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting && isMounted) {
-        setTimeout(highlightCode, 0)
-        observer.disconnect()
+    if (prevCodeLengthRef.current > 0) {
+      setTimeout(highlightCode, 0)
+      return
+    }
+
+    const codeElement = codeContentRef.current
+    if (!codeElement) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].intersectionRatio > 0 && isMounted) {
+          setTimeout(highlightCode, 0)
+          observer.disconnect()
+        }
+      },
+      {
+        rootMargin: '50px 0px 50px 0px'
       }
-    })
+    )
 
     observer.observe(codeElement)