代码块 Copy 按钮和高亮功能测试

这个页面用于测试新添加的代码块功能，包括语法高亮和复制按钮。

JavaScript 代码块

function fibonacci(n) {
  if (n <= 1) return n;

  let a = 0, b = 1;
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}

console.log(fibonacci(10)); // 输出: 55

Python 代码块

def quicksort(arr):
    if len(arr) <= 1:
        return arr

    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]

    return quicksort(left) + middle + quicksort(right)

# 测试
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))

CSS 样式代码

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.button {
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

SQL 查询

SELECT
    u.username,
    p.title,
    p.content,
    p.created_at,
    COUNT(c.id) as comment_count
FROM users u
JOIN posts p ON u.id = p.user_id
LEFT JOIN comments c ON p.id = c.post_id
WHERE u.status = 'active'
    AND p.created_at >= '2024-01-01'
GROUP BY u.id, p.id
ORDER BY p.created_at DESC
LIMIT 10;

JSON 数据

{
  "user": {
    "id": 12345,
    "name": "张三",
    "email": "zhangsan@example.com",
    "profile": {
      "age": 28,
      "city": "北京",
      "skills": ["JavaScript", "Python", "React", "Vue.js"],
      "social": {
        "github": "https://github.com/zhangsan",
        "linkedin": "https://linkedin.com/in/zhangsan"
      }
    }
  },
  "posts": [
    {
      "id": 1,
      "title": "Vue 3 组合式 API 最佳实践",
      "tags": ["vue", "javascript", "frontend"],
      "published": true
    }
  ]
}

Shell 脚本

#!/bin/bash

# 自动部署脚本
set -e

echo "开始部署..."

# 检查 Node.js 版本
node_version=$(node -v)
echo "Node.js 版本: $node_version"

# 安装依赖
echo "安装依赖..."
npm install

# 构建项目
echo "构建项目..."
npm run build

# 部署到服务器
echo "部署到服务器..."
rsync -avz --delete dist/ user@server:/var/www/html/

echo "部署完成！"

行内代码测试

这是一个行内代码的例子：const message = "Hello World!"。

还有一些其他的行内代码：npm install、git commit -m "init"、docker run -d nginx。

无语言标识的代码块

这是一个没有指定语言的代码块
它应该被当作纯文本处理
没有语法高亮
但仍然有复制按钮

功能特性总结

1. ✅ 语法高亮: 支持 20+ 种编程语言的语法高亮
2. ✅ 复制按钮: 每个代码块都有复制功能
3. ✅ 语言标识: 显示代码块的语言类型
4. ✅ 响应式设计: 在移动设备上也能良好显示
5. ✅ 深色主题: 自动适配系统深色模式
6. ✅ 行内代码: 行内代码也有专门的样式

支持的语言列表

• JavaScript/TypeScript
• Python
• Java/C/C++
• CSS/HTML
• JSON/YAML
• SQL
• Bash/Shell
• Go/Rust
• PHP/Swift/Kotlin
• Markdown
• 以及更多…

点击每个代码块右上角的"复制"按钮即可复制代码到剪贴板！