From 2de461985dadadbaae1b2b0a83cf291dd8d3a972 Mon Sep 17 00:00:00 2001
From: Justice Almanzar <superdash993@gmail.com>
Date: Thu, 8 Dec 2022 09:54:19 -0500
Subject: fix(ShikiCodeblocks): spoilers (#298)

* fix(ShikiCodeblocks): spoilers

* fix a settings bug i thikn
---
 src/plugins/shikiCodeblocks/components/Highlighter.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'src/plugins/shikiCodeblocks/components')

diff --git a/src/plugins/shikiCodeblocks/components/Highlighter.tsx b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
index d86e772..d26cd81 100644
--- a/src/plugins/shikiCodeblocks/components/Highlighter.tsx
+++ b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
@@ -46,9 +46,11 @@ export interface HighlighterProps {
 }
 
 export const createHighlighter = (props: HighlighterProps) => (
-    <ErrorBoundary>
-        <Highlighter {...props} />
-    </ErrorBoundary>
+    <pre className={cl("container")}>
+        <ErrorBoundary>
+            <Highlighter {...props} />
+        </ErrorBoundary>
+    </pre>
 );
 export const Highlighter = ({
     lang,
@@ -66,7 +68,7 @@ export const Highlighter = ({
     const shikiLang = lang ? resolveLang(lang) : null;
     const useHljs = shouldUseHljs({ lang, tryHljs });
 
-    const [preRef, isIntersecting] = useIntersection(true);
+    const [rootRef, isIntersecting] = useIntersection(true);
 
     const [tokens] = useAwaiter(async () => {
         if (!shikiLang || useHljs || !isIntersecting) return null;
@@ -93,8 +95,8 @@ export const Highlighter = ({
     if (isPreview) preClasses.push(cl("preview"));
 
     return (
-        <pre
-            ref={preRef}
+        <div
+            ref={rootRef}
             className={preClasses.join(" ")}
             style={{
                 backgroundColor: useHljs
@@ -123,7 +125,7 @@ export const Highlighter = ({
                     theme={themeBase}
                 />}
             </code>
-        </pre>
+        </div>
     );
 };
 
-- 
cgit