🎨 代码片段高亮展示

专业的代码高亮系统，支持多种编程语言，提升技术博客阅读体验

🐍 Python 代码高亮

Python 语法高亮展示，支持关键字、字符串、注释、函数名、类名等元素

Python

import asyncio
from dataclasses import dataclass

# 异步数据处理示例
@dataclass
class UserData:
    """用户数据模型"""
    name: str
    age: int
    email: str

async def fetch_user_data(user_id: int) -> UserData:
    """异步获取用户数据"""
    # 模拟异步操作
    await asyncio.sleep(1)
    return UserData(
        name="张三",
        age=28,
        email="zhangsan@example.com"
    )

# 主程序入口
async def main():
    user = await fetch_user_data(1001)
    print(f"用户: {user.name}, 年龄: {user.age}")

if __name__ == "__main__":
    asyncio.run(main())

⚡ JavaScript 代码高亮

JavaScript/TypeScript 语法高亮，支持现代 ES6+ 语法

JavaScript

// React Hooks 示例
import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchUser() {
            try {
                const response = await fetch(`/api/users/${userId}`);
                const data = await response.json();
                setUser(data);
            } catch (error) {
                console.error('Failed to fetch user:', error);
            } finally {
                setLoading(false);
            }
        }
        fetchUser();
    }, [userId]);

    if (loading) return <div>Loading...</div>;
    return (
        <div>
            <h1>{user.name}</h1>
            <p>Email: {user.email}</p>
        </div>
    );
}

🗄️ SQL 代码高亮

SQL 数据库查询语句高亮展示

SQL

SELECT 
    u.user_id,
    u.username,
    COUNT(o.order_id) AS total_orders,
    SUM(o.amount) AS total_amount,
    AVG(o.amount) AS avg_amount
FROM users u
LEFT JOIN orders o ON u.user_id = o.user_id
WHERE u.status = 'active'
    AND o.created_at >= '2025-01-01'
GROUP BY u.user_id, u.username
HAVING COUNT(o.order_id) > 5
ORDER BY total_amount DESC
LIMIT 10;

🎨

美观专业

VS Code风格配色，专业的代码展示效果

📋

一键复制

点击按钮即可复制完整代码块

🌙

深色模式

完美支持深色和浅色主题

📱

响应式

移动端自适应，代码可横向滚动