diff --git a/app/src/history/history.ts b/app/src/history/history.ts
index 9a0605108..839aa43d1 100644
--- a/app/src/history/history.ts
+++ b/app/src/history/history.ts
@@ -15,7 +15,7 @@ import {openModel} from "../mobile/menu/model";
 import {closeModel} from "../mobile/util/closePanel";
 import {App} from "../index";
 import {resizeSide} from "./resizeSide";
-import {searchMarkRender, searchTextMarkRender} from "../protyle/render/searchMarkRender";
+import {isSupportCSSHL, searchMarkRender, searchTextMarkRender} from "../protyle/render/searchMarkRender";
 
 let historyEditor: Protyle;
 
@@ -695,7 +695,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
                 } else if (type === "doc") {
                     fetchPost("/api/history/getDocHistoryContent", {
                         historyPath: dataPath,
-                        highlight: CSS && CSS.highlights ? true : false,
+                        highlight: !isSupportCSSHL(),
                         k: (firstPanelElement.querySelector(".b3-text-field") as HTMLInputElement).value
                     }, (response) => {
                         if (response.data.isLargeDoc) {
@@ -712,7 +712,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
                                 protyle: historyEditor.protyle,
                                 action: [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML],
                             });
-                            searchMarkRender(historyEditor.protyle, historyEditor.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
+                            searchMarkRender(historyEditor.protyle, ["TODO"]);
                         }
                     });
                 }
diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts
index 6ca2288ca..69bf6a14b 100644
--- a/app/src/layout/dock/Backlink.ts
+++ b/app/src/layout/dock/Backlink.ts
@@ -10,7 +10,7 @@ import {openFileById} from "../../editor/util";
 import {Protyle} from "../../protyle";
 import {MenuItem} from "../../menus/Menu";
 import {App} from "../../index";
-import {searchMarkRender} from "../../protyle/render/searchMarkRender";
+import {isSupportCSSHL, searchMarkRender} from "../../protyle/render/searchMarkRender";
 
 export class Backlink extends Model {
     public element: HTMLElement;
@@ -437,7 +437,7 @@ export class Backlink extends Model {
             fetchPost(isMention ? "/api/ref/getBackmentionDoc" : "/api/ref/getBacklinkDoc", {
                 defID: this.blockId,
                 refTreeID: docId,
-                highlight: CSS && CSS.highlights ? true : false,
+                highlight: !isSupportCSSHL(),
                 keyword: isMention ? this.inputsElement[1].value : this.inputsElement[0].value,
             }, (response) => {
                 svgElement.removeAttribute("disabled");
@@ -458,7 +458,7 @@ export class Backlink extends Model {
                     }
                 });
                 editor.protyle.notebookId = liElement.getAttribute("data-notebook-id");
-                searchMarkRender(editor.protyle, editor.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
+                searchMarkRender(editor.protyle, ["TODO"]);
                 this.editors.push(editor);
             });
         }
diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts
index 2bf8cd7fd..19dd3653c 100644
--- a/app/src/protyle/index.ts
+++ b/app/src/protyle/index.ts
@@ -42,6 +42,7 @@ import {hasClosestBlock} from "./util/hasClosest";
 import {setStorageVal} from "./util/compatibility";
 import {merge} from "./util/merge";
 import {getAllModels} from "../layout/getAll";
+import {isSupportCSSHL} from "./render/searchMarkRender";
 
 export class Protyle {
 
@@ -73,15 +74,15 @@ export class Protyle {
             options: mergedOptions,
             block: {},
             highlight: {
-                mark: CSS?.highlights ? new Highlight() : undefined,
-                markHL: CSS?.highlights ? new Highlight() : undefined,
+                mark: isSupportCSSHL() ? new Highlight() : undefined,
+                markHL: isSupportCSSHL() ? new Highlight() : undefined,
                 ranges: [],
                 rangeIndex: 0,
                 styleElement: document.createElement("style"),
             }
         };
 
-        if (CSS?.highlights) {
+        if (isSupportCSSHL()) {
             const styleId = genUUID();
             this.protyle.highlight.styleElement.dataset.uuid = styleId;
             this.protyle.highlight.styleElement.textContent = `.protyle-wysiwyg::highlight(search-mark-${styleId}) {background-color: var(--b3-protyle-inline-mark-background);color: var(--b3-protyle-inline-mark-color);}
diff --git a/app/src/protyle/render/searchMarkRender.ts b/app/src/protyle/render/searchMarkRender.ts
index c9c527da2..92ee04516 100644
--- a/app/src/protyle/render/searchMarkRender.ts
+++ b/app/src/protyle/render/searchMarkRender.ts
@@ -1,5 +1,5 @@
-export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<Element>) => {
-    if (matchElements.length === 0 || !CSS || !CSS.highlights) {
+export const searchMarkRender = (protyle: IProtyle, keys: string[]) => {
+    if (!isSupportCSSHL()) {
         return;
     }
     protyle.highlight.markHL.clear();
@@ -30,7 +30,11 @@ export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<El
 
 
 export const searchTextMarkRender = (element: HTMLElement, k: string[]) => {
-    if (!CSS || !CSS.highlights) {
+    if (!isSupportCSSHL()) {
         return;
     }
 }
+
+export const isSupportCSSHL = () => {
+    return !!(CSS && CSS.highlights);
+}
diff --git a/app/src/protyle/scroll/saveScroll.ts b/app/src/protyle/scroll/saveScroll.ts
index f06761c69..7b84a105c 100644
--- a/app/src/protyle/scroll/saveScroll.ts
+++ b/app/src/protyle/scroll/saveScroll.ts
@@ -4,6 +4,7 @@ import {fetchPost} from "../../util/fetch";
 import {onGet} from "../util/onGet";
 import {Constants} from "../../constants";
 import {setStorageVal} from "../util/compatibility";
+import {isSupportCSSHL} from "../render/searchMarkRender";
 
 export const saveScroll = (protyle: IProtyle, getObject = false) => {
     if (!protyle.wysiwyg.element.firstElementChild || window.siyuan.config.readonly) {
@@ -73,7 +74,7 @@ export const getDocByScroll = (options: {
             query: options.protyle.query?.key,
             queryMethod: options.protyle.query?.method,
             queryTypes: options.protyle.query?.types,
-            highlight: CSS && CSS.highlights ? true : false,
+            highlight: !isSupportCSSHL(),
         }, response => {
             if (response.code === 1) {
                 fetchPost("/api/filetree/getDoc", {
@@ -81,7 +82,7 @@ export const getDocByScroll = (options: {
                     query: options.protyle.query?.key,
                     queryMethod: options.protyle.query?.method,
                     queryTypes: options.protyle.query?.types,
-                    highlight: CSS && CSS.highlights ? true : false,
+                    highlight: !isSupportCSSHL(),
                 }, response => {
                     onGet({
                         data: response,
@@ -113,7 +114,7 @@ export const getDocByScroll = (options: {
         query: options.protyle.query?.key,
         queryMethod: options.protyle.query?.method,
         queryTypes: options.protyle.query?.types,
-        highlight: CSS && CSS.highlights ? true : false,
+        highlight: !isSupportCSSHL(),
     }, response => {
         onGet({
             data: response,
diff --git a/app/src/protyle/util/reload.ts b/app/src/protyle/util/reload.ts
index 1e0ecdf73..d5b030ac1 100644
--- a/app/src/protyle/util/reload.ts
+++ b/app/src/protyle/util/reload.ts
@@ -4,7 +4,7 @@ import {getDocByScroll, saveScroll} from "../scroll/saveScroll";
 import {renderBacklink} from "../wysiwyg/renderBacklink";
 import {hasClosestByClassName} from "./hasClosest";
 import {preventScroll} from "../scroll/preventScroll";
-import {searchMarkRender} from "../render/searchMarkRender";
+import {isSupportCSSHL, searchMarkRender} from "../render/searchMarkRender";
 import {restoreLuteMarkdownSyntax} from "./paste";
 
 export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?: boolean) => {
@@ -40,12 +40,12 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?
             fetchPost(isMention ? "/api/ref/getBackmentionDoc" : "/api/ref/getBacklinkDoc", {
                 defID: protyle.element.getAttribute("data-defid"),
                 refTreeID: protyle.block.rootID,
-                highlight: CSS && CSS.highlights ? true : false,
+                highlight: !isSupportCSSHL(),
                 keyword: isMention ? inputsElement[1].value : inputsElement[0].value,
             }, response => {
                 protyle.options.backlinkData = isMention ? response.data.backmentions : response.data.backlinks;
                 renderBacklink(protyle, protyle.options.backlinkData);
-                searchMarkRender(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
+                searchMarkRender(protyle, ["TODO"]);
             });
         }
     } else {
@@ -55,9 +55,9 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?
             focus,
             scrollAttr: saveScroll(protyle, true) as IScrollAttr,
             updateReadonly,
-            cb () {
+            cb() {
                 if (protyle.query?.key) {
-                    searchMarkRender(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
+                    searchMarkRender(protyle, ["TODO"]);
                 }
             }
         });
diff --git a/app/src/search/util.ts b/app/src/search/util.ts
index e64d0beaf..d3f36a6e3 100644
--- a/app/src/search/util.ts
+++ b/app/src/search/util.ts
@@ -51,7 +51,7 @@ import {addClearButton} from "../util/addClearButton";
 import {checkFold} from "../util/noRelyPCFunction";
 import {getUnRefList, openSearchUnRef, unRefMoreMenu} from "./unRef";
 import {getDefaultType} from "./getDefault";
-import {searchMarkRender} from "../protyle/render/searchMarkRender";
+import {isSupportCSSHL, searchMarkRender} from "../protyle/render/searchMarkRender";
 
 export const toggleReplaceHistory = (searchElement: Element) => {
     const list = window.siyuan.storage[Constants.LOCAL_SEARCHKEYS];
@@ -1161,7 +1161,7 @@ const renderNextSearchMark = (options: {
     target: Element,
 }) => {
     const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
-    if (CSS?.highlights) {
+    if (isSupportCSSHL()) {
         options.edit.protyle.highlight.markHL.clear();
         options.edit.protyle.highlight.mark.clear();
         options.edit.protyle.highlight.rangeIndex++;
@@ -1221,7 +1221,7 @@ export const getArticle = (options: {
                 mode: zoomIn ? 0 : 3,
                 size: zoomIn ? Constants.SIZE_GET_MAX : window.siyuan.config.editor.dynamicLoadBlocks,
                 zoom: zoomIn,
-                highlight:CSS && CSS.highlights ? true : false,
+                highlight: !isSupportCSSHL(),
             }, getResponse => {
                 options.edit.protyle.query = {
                     key: options.value || null,
@@ -1234,17 +1234,18 @@ export const getArticle = (options: {
                     protyle: options.edit.protyle,
                     action: zoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HTML],
                 });
-                const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]');
-                if (matchElements.length === 0) {
-                    return;
-                }
+
                 const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
                 let matchRectTop: number;
-                if (CSS?.highlights) {
+                if (isSupportCSSHL()) {
                     options.edit.protyle.highlight.rangeIndex = 0;
-                    searchMarkRender(options.edit.protyle, matchElements);
+                    searchMarkRender(options.edit.protyle, ["TODO"]);
                     matchRectTop = options.edit.protyle.highlight.ranges[0].getBoundingClientRect().top;
                 } else {
+                    const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]');
+                    if (matchElements.length === 0) {
+                        return;
+                    }
                     matchElements[0].classList.add("search-mark--hl");
                     matchRectTop = matchElements[0].getBoundingClientRect().top;
                 }