refactor code block detection and css

components/Code/Code.tsx

@@ -12,30 +12,23 @@ export type CodeProps = ComponentPropsWithoutRef<"code"> & {
 // a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax
 // highlighting & a clipboard button)
 const Code = ({
-  "data-language": dataLanguage,
-  "data-theme": dataTheme, // eslint-disable-line @typescript-eslint/no-unused-vars
+  "data-language": dataLanguage, // eslint-disable-line @typescript-eslint/no-unused-vars
+  "data-theme": dataTheme,
   className,
   children,
   ...rest
 }: CodeProps) => {
-  // detect if this input has already been touched by shiki via rehype-pretty-code
-  if (dataLanguage) {
-    // full multi-line code blocks with copy-to-clipboard button
-    return (
-      <>
-        <CopyButton className={styles.copyButton} source={children} />
-        <code className={clsx(styles.highlighted, className)} {...rest}>
-          {children}
-        </code>
-      </>
-    );
-  }
-
-  // simple inline code in paragraphs, headings, etc. (never highlighted)
   return (
-    <code className={clsx(styles.inline, className)} {...rest}>
-      {children}
-    </code>
+    <>
+      {
+        // detect if this input has been touched by shiki via rehype-pretty-code and if so, include a copy-to-clipboard
+        // button as its sibling.
+        dataTheme && <CopyButton className={styles.copyButton} source={children} />
+      }
+      <code className={clsx(styles.code, className)} {...rest}>
+        {children}
+      </code>
+    </>
   );
 };