fix: remove re-highlight warning messages

packages/react/src/components/LoadedCode.tsx

@@ -1,10 +1,13 @@
-import { useEffect, useState } from "react";
+import { useRef, useEffect, useState, forwardRef } from "react";
 import hljs from "highlight.js";
 import { Button } from "@components/Button";
 import { useToast } from "@components/Toast";
 import { escapeHtml } from "@/utils/escapeHtml";
 
-export function LoadedCode({ from }: { from: string }) {
+export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main/";
+
+export const LoadedCode = forwardRef<HTMLPreElement, { from: string }>(
+  ({ from }, outRef) => {
     const [state, setState] = useState<string | undefined | null>();
     const { toast } = useToast();
 
@@ -16,9 +19,11 @@ export function LoadedCode({ from }: { from: string }) {
       })();
     }, [from]);
 
+    const ref = useRef<HTMLElement | null>(null);
+
     useEffect(() => {
-    if (state) {
+      if (ref.current && !ref.current.dataset.highlighted) {
-      hljs.highlightAll();
+        hljs.highlightElement(ref.current);
       }
     }, [state]);
 
@@ -27,6 +32,7 @@ export function LoadedCode({ from }: { from: string }) {
         className={`relative hljs w-full h-64 rounded-lg ${
           !state ? "animate-pulse" : ""
         }`}
+        ref={outRef}
       >
         <Button
           preset="default"
@@ -53,7 +59,10 @@ export function LoadedCode({ from }: { from: string }) {
             />
           </svg>
         </Button>
-      <code className="language-tsx">{state ?? null}</code>
+        <code className="language-tsx" ref={ref}>
+          {state ?? null}
+        </code>
       </pre>
     );
   }
+);