remove code block border

Author: benthecoder

app/globals.css

@@ -81,11 +81,21 @@ body {
 
 .prose pre {
   padding: 0;
-  border: none;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 
 .prose pre code {
   background-color: inherit;
+  color: inherit;
+  border: none !important;
+}
+
+.prose pre > div {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 
 .prose code::before {
@@ -96,6 +106,52 @@ body {
   content: '';
 }
 
+.dark .prose code {
+  background-color: #2a2b36;
+  color: #DCDDDD; /* shironezu - light grey */
+}
+
+.dark .prose pre {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.dark .prose pre > div {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* Nuclear option: target all possible code block elements */
+.prose pre[class*="language-"],
+.prose div[class*="language-"],
+.prose code[class*="language-"] {
+  border: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  ring: none !important;
+  border-radius: 0 !important;
+}
+
+.dark .prose pre[class*="language-"],
+.dark .prose div[class*="language-"],
+.dark .prose code[class*="language-"] {
+  border: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  ring: none !important;
+  border-radius: 0 !important;
+}
+
 .prose ul li::before {
   content: '\25E6'; /* Unicode for a small circle */
   color: slategrey; /* Change the color */

components/RenderPost.tsx

@@ -10,15 +10,36 @@ import remarkGfm from 'remark-gfm';
 
 import 'katex/dist/katex.min.css';
 
+// Override dracula theme to remove borders
+const customDracula = {
+  ...dracula,
+  'pre[class*="language-"]': {
+    ...dracula['pre[class*="language-"]'],
+    borderRadius: 0,
+    border: 'none',
+    borderImage: 'none',
+    borderWidth: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: '-1.5rem',  // break out of prose (0.5rem) + parent (1rem) padding
+    marginRight: '-1.5rem',
+    padding: '1rem',
+  },
+};
+
 const RenderPost = ({ post, prev, next, slug }: any) => {
   const components = {
     code({ node, inline, className, children, ...props }: any) {
       const match = /language-(\w+)/.exec(className || '');
       return !inline && match ? (
         <SyntaxHighlighter
-          style={dracula}
+          style={customDracula}
           language={match[1]}
-          customStyle={{ border: 'none' }}
+          customStyle={{
+            border: 'none',
+            boxShadow: 'none',
+            outline: 'none',
+          }}
           PreTag="div"
           {...props}
         >
@@ -108,24 +129,24 @@ const RenderPost = ({ post, prev, next, slug }: any) => {
       </div>
 
       {/* Navigation */}
-      <div className="mt-8 flex flex-col text-sm gap-1">
+      <div className="mt-8 flex flex-col text-base gap-2">
         {next && (
           <div className="flex group">
-            <p className="text-japanese-soshoku dark:text-japanese-murasakisuishiyou">Next:</p>
+            <p className="text-japanese-sumiiro dark:text-japanese-shironezu font-semibold">Next:</p>
             <Link
               href={`/posts/${next.slug}`}
-              className="ml-2 text-japanese-sumiiro dark:text-japanese-shironezu hover:text-japanese-sumiiro/70 dark:hover:text-japanese-murasakisuishiyou transition-colors duration-200"
+              className="ml-2 text-japanese-sumiiro dark:text-japanese-nyuhakushoku hover:text-japanese-nezumiiro dark:hover:text-japanese-murasakisuishiyou transition-colors duration-200 underline"
             >
               {next.title}
             </Link>
           </div>
         )}
         {prev && (
           <div className="flex group">
-            <p className="text-japanese-soshoku dark:text-japanese-murasakisuishiyou">Previous:</p>
+            <p className="text-japanese-sumiiro dark:text-japanese-shironezu font-semibold">Previous:</p>
             <Link
               href={`/posts/${prev.slug}`}
-              className="ml-2 text-japanese-sumiiro dark:text-japanese-shironezu hover:text-japanese-sumiiro/70 dark:hover:text-japanese-murasakisuishiyou transition-colors duration-200"
+              className="ml-2 text-japanese-sumiiro dark:text-japanese-nyuhakushoku hover:text-japanese-nezumiiro dark:hover:text-japanese-murasakisuishiyou transition-colors duration-200 underline"
             >
               {prev.title}
             </Link>