even more styled components

components/CodeBlock/CodeBlock.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 import styles from "./CodeBlock.module.css";
 
-export type Props = {
+type Props = {
   className?: string;
   children: ReactNode;
 };
@@ -12,14 +12,16 @@ const CodeBlock = (props: Props) => {
   if (props.className?.split(" ").includes("code-highlight")) {
     // full multi-line code blocks with prism highlighting and copy-to-clipboard button
     return (
-      <div className={styles.code}>
+      <div className={styles.block}>
         <CopyButton source={props.children} />
-        <code {...props}>{props.children}</code>
+        <code {...props} className={`${styles.code} ${props.className}`}>
+          {props.children}
+        </code>
       </div>
     );
   } else {
     // inline code in paragraphs, headings, etc. (not highlighted)
-    return <code {...props}>{props.children}</code>;
+    return <code className={`${styles.code} ${styles.inline}`}>{props.children}</code>;
   }
 };