Add style for inline code

mengqi92 · Apr 3, 2024 · 659ab2d · 659ab2d
1 parent 67e08aa
commit 659ab2d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -88,19 +88,6 @@ export default makeSource({
             [rehypeAutolinkHeadings, 'after'],
             [rehypePrettyCode, {
                 theme: 'solarized-light',
-                // onVisitLine(node: { children: string | any[] }) {
-                //     // Prevent lines from collapsing in `display: grid` mode, and allow empty
-                //     // lines to be copy/pasted
-                //     if (node.children.length === 0) {
-                //         node.children = [{ type: "text", value: " " }]
-                //     }
-                // },
-                // onVisitHighlightedLine(node: { properties: { className: string[] } }) {
-                //     node.properties.className.push("line--highlighted")
-                // },
-                // onVisitHighlightedWord(node: { properties: { className: string[] } }) {
-                //     node.properties.className = ["word--highlighted"]
-                // },
             }],
             postProcess
         ]

diff --git a/src/app/_components/code-block.tsx b/src/app/_components/code-block.tsx
@@ -2,16 +2,21 @@
 
 import clsx from "clsx";
 import ClipboardCopy from "./clipboard-copy";
+import { ReactElement } from "react";
 
 interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement>{
     raw?: string
 }
 
 const CodeBlock: React.FC<CodeBlockProps> = ({ className, children, raw, ...props }: CodeBlockProps) => {
+    children = children as ReactElement;
+    if (!children || children.type !== 'code') return null;
+
+    children.props.className = children.props.className.replace(/ bg-\w+/, '');
     return (
         <>
             <div className="copyCode">
-                <pre className={clsx("p-0 my-4 px-4 py-4 bg-transparent rounded overflow-x-auto relative", className)} {...props}>
+                <pre className={clsx("relative my-2 max-h-[650px] pl-4 overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900", className)} {...props}>
                     {children}
                     <ClipboardCopy copyText={raw}/>
                 </pre>

diff --git a/src/app/_components/markdown-post.tsx b/src/app/_components/markdown-post.tsx
@@ -13,7 +13,7 @@ const components: MDXComponents = {
     ul: ({ children }) => <ul className="my-6 ml-6 list-disc [&>li]:mt-2">{children}</ul>,
     li: ({ children }) => <li className="leading-7 list-outside list-decimal">{children}</li>,
     pre: CodeBlock,
-    code: ({ children }) => <code className="relative my-4 px-[0.3rem] py-[0.2rem] font-mono text-sm">{children}</code>,
+    code: ({ children }) => <code className="relative bg-muted my-4 px-[0.3rem] py-[0.2rem] font-mono text-sm">{children}</code>,
     lead: ({ children }) => <p className="text-xl text-muted-foreground">{children}</p>,
     a: ({ children, href }) => (
         <a href={href} className="text-red-500 underline decoration-red-400 underline-offset-4 hover:text-red-700 hover:decoration-red-700 hover:decoration-2">{children}</a>