fix: code

src/app/[...slug]/page.tsx

@@ -40,15 +40,7 @@ export default async function Page({ params }: Props) {
  <>
  <div className="mx-auto max-w-3xl">
  <div className={cn('post-header mb-6 border-b pb-4', 'border-outline-variant/50')}>
- <h1 className="mb-2 text-5xl font-bold tracking-tighter">
- {doc.sourcecode ? (
- <a href={doc.sourcecodeURL} className="no-underline hover:underline">
- <code>{doc.title}</code>
- </a>
- ) : (
- doc.title
- )}
- </h1>
+ <h1 className="mb-2 text-5xl font-bold tracking-tighter">{doc.title}</h1>
  {!!doc?.description?.length && (
  <p className={cn('text-base leading-5', 'text-on-surface-variant/50')}>
  {doc.description}

src/app/globals.css

@@ -72,8 +72,8 @@ pre[class*='language-'] {
 }
 
 /* Inline code */
-:not(pre) > code {
- @apply bg-surface-container-high rounded-lg px-1.5 py-0.5 font-mono text-[85%];
+:not(pre) > code[class*='language-'] {
+ @apply rounded-lg;
  white-space: normal;
 }
 

src/components/mdx/index.tsx

@@ -96,6 +96,13 @@ export const a = ({ href, target, rel, ...props }: ComponentProps<'a'>) => {
 
 export const img = Img
 
+export const code = (props: ComponentProps<'code'>) => (
+ <code
+ className="bg-surface-container-high rounded-md px-1.5 py-0.5 font-mono text-[85%]"
+ {...props}
+ />
+)
+
 export const details = (props: ComponentProps<'details'>) => <details className="ml-4" {...props} />
 export const summary = (props: ComponentProps<'summary'>) => (
  <summary className="my-2 -ml-4 cursor-pointer select-none" {...props} />