From 3378b9c3a0db4e649184dd735b0761f991dc44f4 Mon Sep 17 00:00:00 2001
From: weareoutman <wangshenwei@qq.com>
Date: Sat, 5 Jun 2021 11:38:44 +0800
Subject: [PATCH] fix: fix an issue of highlighting in code blocks

fixes #92
---
 src/client/theme/SearchBar/SearchBar.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/client/theme/SearchBar/SearchBar.tsx b/src/client/theme/SearchBar/SearchBar.tsx
index a552606b..3738fda5 100644
--- a/src/client/theme/SearchBar/SearchBar.tsx
+++ b/src/client/theme/SearchBar/SearchBar.tsx
@@ -163,13 +163,19 @@ export default function SearchBar({
     if (keywords.length === 0) {
       return;
     }
-    const root = document.querySelector("article");
-    if (!root) {
-      return;
-    }
-    const mark = new Mark(root);
-    mark.unmark();
-    mark.mark(keywords);
+    // A workaround to fix an issue of highlighting in code blocks.
+    // See https://github.com/easyops-cn/docusaurus-search-local/issues/92
+    // Code blocks will be re-rendered after this `useEffect` ran.
+    // So we make the marking run after a macro task.
+    setTimeout(() => {
+      const root = document.querySelector("article");
+      if (!root) {
+        return;
+      }
+      const mark = new Mark(root);
+      mark.unmark();
+      mark.mark(keywords);
+    });
   }, [location.search]);
 
   const onInputFocus = useCallback(() => {