refactor clientsidehighlight (#29713)

* refactor ClientSideHighlight

* names

* names again

components/hooks/useLazyLoadHighlightJS.ts

@@ -1,23 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export default function useLazyLoadHighlightJS(path: string) {
-  // If the page contains `[data-highlight]` blocks, these pages need
-  // syntax highlighting. But not every page needs i  t, so it's conditionally
-  // lazy-loaded on the client.
-  const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
-  useEffect(() => {
-    // It doesn't need to use querySelector because all we care about is if
-    // there is greater than zero of these in the DOM.
-    // Note! This "core selector", which determines whether to bother
-    // or not, needs to match what's used inside ClientSideHighlightJS.tsx
-    if (document.querySelector('[data-highlight]')) {
-      setLazyLoadHighlightJS(true)
-    }
-
-    // Important to depend on the current path because the first page you
-    // load, before any client-side navigation, might not need it, but the
-    // consecutive one does.
-  }, [path])
-
-  return lazyLoadHighlightJS
-}