代码高亮文章

这篇文章用于测试我们博客系统的代码高亮功能。

JavaScript 代码示例

javascript复制
1// React Hook 示例
2import { useState, useEffect } from 'react';
3
4const useCounter = (initialValue = 0) => {
5  const [count, setCount] = useState(initialValue);
6  
7  const increment = () => setCount(prev => prev + 1);
8  const decrement = () => setCount(prev => prev - 1);
9  const reset = () => setCount(initialValue);
10  
11  useEffect(() => {
12    console.log(`计数器值变化：${count}`);
13  }, [count]);
14  
15  return { count, increment, decrement, reset };
16};
17
18export default useCounter;

TypeScript 代码示例

typescript复制
1interface User {
2  id: number;
3  name: string;
4  email: string;
5  avatar?: string;
6}
7
8class UserService {
9  private users: User[] = [];
10  
11  async fetchUsers(): Promise<User[]> {
12    try {
13      const response = await fetch('/api/users');
14      const data = await response.json();
15      this.users = data;
16      return this.users;
17    } catch (error) {
18      console.error('获取用户失败:', error);
19      throw new Error('无法获取用户数据');
20    }
21  }
22  
23  findUserById(id: number): User | undefined {
24    return this.users.find(user => user.id === id);
25  }
26}

CSS 代码示例

css复制
1/* 现代 CSS 网格布局 */
2.blog-layout {
3  display: grid;
4  grid-template-columns: 1fr 300px;
5  grid-template-areas: 
6    "header header"
7    "main sidebar"
8    "footer footer";
9  gap: 2rem;
10  min-height: 100vh;
11}
12
13.header {
14  grid-area: header;
15  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16  padding: 1rem;
17  border-radius: 0.5rem;
18}
19
20.main-content {
21  grid-area: main;
22  background: white;
23  padding: 2rem;
24  border-radius: 0.5rem;
25  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
26}
27
28@media (max-width: 768px) {
29  .blog-layout {
30    grid-template-columns: 1fr;
31    grid-template-areas: 
32      "header"
33      "main"
34      "sidebar"
35      "footer";
36  }
37}

Python 代码示例

python复制
1from typing import List, Optional
2import asyncio
3import aiohttp
4
5class BlogPost:
6    def __init__(self, title: str, content: str, author: str):
7        self.title = title
8        self.content = content
9        self.author = author
10        self.created_at = datetime.now()
11        self.tags: List[str] = []
12    
13    def add_tag(self, tag: str) -> None:
14        """添加标签到文章"""
15        if tag not in self.tags:
16            self.tags.append(tag)
17    
18    def __str__(self) -> str:
19        return f"《{self.title}》 by {self.author}"
20
21async def fetch_posts(url: str) -> Optional[List[dict]]:
22    """异步获取文章列表"""
23    async with aiohttp.ClientSession() as session:
24        try:
25            async with session.get(url) as response:
26                if response.status == 200:
27                    return await response.json()
28                return None
29        except Exception as e:
30            print(f"获取文章失败: {e}")
31            return None
32
33# 使用示例
34if __name__ == "__main__":
35    post = BlogPost("Python异步编程", "内容...", "张三")
36    post.add_tag("Python")
37    post.add_tag("异步")
38    print(post)

行内代码测试

在文本中使用 console.log() 函数输出信息，或者使用 useState Hook 管理组件状态。

引用块测试

这是一个引用块的示例。引用块通常用于引用其他人的话语或者重要的信息。

可以包含多行内容，并且支持 粗体 和 斜体 文本。

表格测试

列表测试

无序列表

• React Hook 的优势
• 函数式组件的简洁性
• 状态管理的便利性
• 副作用处理的统一性

有序列表

1. 创建新的 React 项目
2. 安装必要的依赖
3. 配置开发环境
4. 开始编写代码

这就是我们的代码高亮功能测试！