# 代码块功能测试

> 发布于：2024-09-14 | 分类：技术测试 | 原文：https://www.imbailey.cn/post/code-block-feature-test

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

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

## JavaScript 代码块

```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 代码块

```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 样式代码

```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 查询

```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 数据

```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 脚本

```bash
#!/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
- 以及更多...

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