refactor <CodeBlock /> to make it useful outside of mdx

components/CodeBlock/CodeBlock.tsx

@@ -1,18 +1,27 @@
-import classNames from "classnames";
+import classNames from "classnames/bind";
 import CopyButton from "../CopyButton/CopyButton";
-import type { HTMLAttributes } from "react";
 
 import styles from "./CodeBlock.module.css";
+const cx = classNames.bind(styles);
 
-type Props = HTMLAttributes<HTMLElement>;
+type CodeBlockProps = JSX.IntrinsicElements["code"] & {
+  forceBlock?: boolean;
+};
 
-const CodeBlock = ({ children, className, ...rest }: Props) => {
-  if (className?.split(" ").includes("code-highlight")) {
-    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
+const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps) => {
+  // detect if this input has already been touched by prism.js via rehype
+  const prismEnabled = className?.split(" ").includes("code-highlight");
+
+  if (prismEnabled || forceBlock) {
+    // 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 (
       <div className={styles.block}>
         <CopyButton source={children} className={styles.copy_btn} />
-        <code className={classNames(styles.code, className)} {...rest}>
+        <code
+          className={cx({ code: true, highlight: prismEnabled }, className?.replace("code-highlight", "").trim())}
+          {...rest}
+        >
           {children}
         </code>
       </div>