探索 MDX 的代码块魅力#

1
export default {
2
  title: 'My Awesome Blog',
3
  author: 'Developer',
4
  features: {
5
    darkMode: true,
6
    comments: true,
7
  },
8
}

1
function login(username: string, password: string) {
2
  const user = findUser(username);
3
  if (!user) return null;
4

5
  const isValid = verifyPassword(password, user.hash); // [!code highlight]
6
  if (!isValid) return null;
7

8
  return generateToken(user); // [!code highlight]
9
}

1
function calculateTotal(items) {
2
  let total = 0; // [!code --]
3
  for (let i = 0; i < items.length; i++) { // [!code --]
4
    total += items[i].price; // [!code --]
5
  } // [!code --]
6
  return total; // [!code --]
7
  return items.reduce((sum, item) => sum + item.price, 0); // [!code ++]
8
}

1
import fs from 'node:fs' // [!code collapse:8]
2
import path from 'node:path'
3
import matter from 'gray-matter'
4
import type { Post } from './types'
5

6
const POSTS_DIR = path.join(process.cwd(), 'src/content/posts')
7

8
export function getAllPosts(): Post[] {
9
  return fs
10
    .readdirSync(POSTS_DIR)
11
    .filter((f) => f.endsWith('.mdx') || f.endsWith('.md'))
12
    .map((file) => {
13
      const raw = fs.readFileSync(path.join(POSTS_DIR, file), 'utf-8')
14
      const { data } = matter(raw)
15
      return { slug: file.replace(/\.mdx?$/, ''), ...data } as Post
16
    })
17
    .sort((a, b) => b.published.getTime() - a.published.getTime())
18
}

1
import subprocess
2
import sys
3

4
def run(cmd: str) -> None:
5
    result = subprocess.run(cmd, shell=True, capture_output=True, text=True)
6
    if result.returncode != 0:
7
        print(f"Error: {result.stderr}", file=sys.stderr)
8
        sys.exit(1)
9
    print(result.stdout)
10

11
if __name__ == "__main__":
12
    run("git pull origin main")
13
    run("pnpm build")
14
    run("wrangler pages deploy ./dist")
15
    print("✅ Deployment complete!")