app/(root)/blog/[slug]/page.tsx

@@ -123,21 +123,23 @@ const customPortableTextComponents: PortableTextComponents = {
       );
     },
     code: ({ value }) => {
-      const language = value.language || "none";
+      const language = value.language;
       const grammar = Prism.languages[language];
 
-      if (!grammar) {
+      if (language && !grammar) {
         console.error(`No grammar found for language: "${language}"`);
       }
 
       return (
         <div className="relative my-8">
           <pre
-            className={`language-${language} p-4 rounded-md overflow-x-auto text-sm`}
+            className={`${language ? "language-" + language + " " : ""}p-4 rounded-md overflow-x-auto text-sm`}
           >
-            <code className={`language-${language}`}>{value.code}</code>
+            <code className={language ? "language-" + language : ""}>
+              {value.code}
+            </code>
           </pre>
-          {language == "none" ? "" : <PrismLoader />}
+          {language ? <PrismLoader /> : ""}
           <CopyButton code={value.code} />
         </div>
       );

components/shared/copyButton.tsx

@@ -20,7 +20,7 @@ export default function CopyButton({ code }: { code: string }) {
   return (
     <Button
       onClick={copyCode}
-      className="absolute top-2 right-2 bg-accent hover:bg-muted p-2 rounded"
+      className="absolute top-2 right-2 bg-accent hover:bg-muted text-white p-2 rounded"
       size={"icon"}
     >
       {copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}