Fix word highlights (#2250)

This basically reverts the FF fix from #2126 which fixed FF but broke
word highlights. Also divs aren't allowed in `<code>` elements so
Shiki's assumption that it really only needs to look inside `<span>`s
isn't a terrible one in this case.

We'll have to come up with some other solution to work around the FF bug

Author: thecrypticace

src/components/code-example.tsx

@@ -10,7 +10,6 @@ import { createHighlighter } from "shiki";
 import theme from "./syntax-highlighter/theme.json";
 
 import { highlightClasses } from "./highlight-classes";
-import linesToDiv from "./lines-to-div";
 import atApplyInjection from "./syntax-highlighter/at-apply.json";
 import atRulesInjection from "./syntax-highlighter/at-rules.json";
 import themeFnInjection from "./syntax-highlighter/theme-fn.json";
@@ -138,7 +137,7 @@ export function HighlightedCode({
       example={example}
       className={clsx(
         "*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5!",
-        "**:[.line]:isolate **:[.line]:not-last:min-h-[1lh]",
+        "**:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh]",
         "*:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5",
         example.lang === "txt" ? "*:*:max-w-full *:*:whitespace-normal" : "*:*:max-w-none",
         className,
@@ -182,7 +181,6 @@ export function RawHighlightedCode({
           highlightedClassName:
             "highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none",
         }),
-        linesToDiv(),
       ],
     })
     .replaceAll("\n", "");