diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 9c5ae53..6a59788 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -10,6 +10,8 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeKatex from 'rehype-katex'
 import rehypeSlug from 'rehype-slug'
 import rehypeExternalLinks from 'rehype-external-links'
+import type { Element } from 'hast'
+import type { LineElement } from 'rehype-pretty-code'
 import { getPosts, getPost } from '@/lib/posts'
 import { TableOfContents } from '@/components/blog/TableOfContents'
 import { ScrollToTop } from '@/components/ui/ScrollToTop'
@@ -91,14 +93,17 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
                         },
                         keepBackground: false,
                         grid: true,
-                        onVisitLine(node: { children: any[] }) {
+                        onVisitLine(node: LineElement) {
                           if (node.children.length === 0) {
                             node.children = [{ type: 'text', value: ' ' }];
                           }
                         },
-                        onVisitTitle(element: any) {
+                        onVisitTitle(element: Element) {
+                          const existingClassNames = Array.isArray(element.properties.className)
+                            ? element.properties.className
+                            : [];
                           element.properties.className = [
-                            ...(element.properties.className ?? []),
+                            ...existingClassNames,
                             'vscode-title',
                           ];
                           element.children = [
diff --git a/bun.lock b/bun.lock
index 16792a0..51db72b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
       "name": "new-blog",
       "dependencies": {
         "@mdx-js/react": "^3.1.1",
+        "@rehype-pretty/transformers": "^0.13.2",
         "@wrksz/themes": "^0.9.3",
         "gray-matter": "^4.0.3",
         "katex": "^0.17.0",
@@ -203,6 +204,8 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@rehype-pretty/transformers": ["@rehype-pretty/transformers@0.13.2", "", {}, "sha512-p2ciQSwqy5Ip8aNUa9q6rdS/hJZXrxHYYfDVOHvKOsBu3t9HDmQ65YX6r9Qbl19vi160OAxmGF7MIoCRDJrRhg=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@shikijs/core": ["@shikijs/core@4.1.0", "", { "dependencies": { "@shikijs/primitive": "4.1.0", "@shikijs/types": "4.1.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-jLJtSJeuFffqX6/inRE1zqU5aFv2hrszvYgq3OjbAgFRZiWv7abKMDdQzYxuSDfmUPQozZvI/kuy6VMTvnvqTQ=="],
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 1aa87e0..b9a5ba7 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -54,8 +54,6 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
       )
     },
     code: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {
-      const match = /language-(\w+)/.exec(className || '');
-      const language = match ? match[1] : '';
       const isInline = !className?.includes('language-');
 
       if (isInline) {
@@ -70,7 +68,7 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
       }
       return <code className={className} {...props} />;
     },
-    pre: ({ children, ...props }: { children: React.ReactNode; [key: string]: any }) => (
+    pre: ({ children, ...props }: { children: React.ReactNode } & React.HTMLAttributes<HTMLPreElement>) => (
       <pre className="my-6 p-0" {...props}>
         {children}
       </pre>