switch to shiki for syntax highlighting

components/Code/Code.tsx

@@ -1,38 +1,41 @@
-import CodeBlock from "../CodeBlock";
-import CodeInline from "../CodeInline";
+import clsx from "clsx";
+import CopyButton from "../CopyButton";
 import type { ComponentPropsWithoutRef } from "react";
 
+import styles from "./Code.module.css";
+
 export type CodeProps = ComponentPropsWithoutRef<"code"> & {
-  forceBlock?: boolean;
+  "data-language"?: string;
+  "data-theme"?: string;
 };
 
 // a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax
 // highlighting & a clipboard button)
-const Code = ({ forceBlock, className, children, ...rest }: CodeProps) => {
-  // detect if this input has already been touched by prism.js via rehype
-  const classNames = className?.split(" ");
-  const prismEnabled = classNames?.includes("code-highlight");
-
-  if (prismEnabled || forceBlock) {
+const Code = ({
+  "data-language": dataLanguage,
+  "data-theme": dataTheme, // eslint-disable-line @typescript-eslint/no-unused-vars
+  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
-    // automatic if highlighted by prism, otherwise can be forced (rather than inlined) with `forceBlock={true}`
     return (
-      <CodeBlock
-        highlight={prismEnabled && !classNames?.includes("language-plaintext")}
-        withCopyButton
-        className={className}
-        {...rest}
-      >
-        {children}
-      </CodeBlock>
+      <>
+        <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 (
-    <CodeInline className={className} {...rest}>
+    <code className={clsx(styles.inline, className)} {...rest}>
       {children}
-    </CodeInline>
+    </code>
   );
 };