🔍

功能测试文章 - 公式、图表、代码高亮测试

📅 2026-01-08 📁 测试 📝 721 字 ⏱️ 3 分钟

功能测试：公式、图表、代码高亮

数学公式测试

行内公式测试

爱因斯坦质能方程：E=mc2E = mc^2

二次方程求根公式：x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

块级公式测试

高斯积分公式：

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

傅里叶变换：

F{f(t)}(ω)=∫−∞∞f(t)e−iωtdt\mathcal{F}\{f(t)\}(\omega) = \int_{-\infty}^{\infty} f(t) e^{-i\omega t} dt

复杂矩阵公式：

A=[a11a12⋯a1na21a22⋯a2n⋮⋮⋱⋮am1am2⋯amn]\mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

Mermaid 图表测试

流程图

graph TB
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E
    
    style A fill:#e1f5fe
    style E fill:#f3e5f5
    style B fill:#fff3e0

时序图

sequenceDiagram
    participant A as 用户
    participant B as 前端
    participant C as 后端API
    participant D as 数据库
    
    A->>B: 发起请求
    B->>C: HTTP请求
    C->>D: 查询数据
    D-->>C: 返回结果
    C-->>B: JSON响应
    B-->>A: 渲染页面

类图

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
    }
    
    class Cat {
        +String color
        +meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

代码高亮测试

Python 代码

import numpy as np
import matplotlib.pyplot as plt

def calculate_pi monte_carlo(n_samples=1000000):
    """
    使用蒙特卡洛方法计算π值
    
    Args:
        n_samples (int): 采样点数量
        
    Returns:
        float: π的近似值
    """
    # 生成随机点
    x = np.random.uniform(-1, 1, n_samples)
    y = np.random.uniform(-1, 1, n_samples)
    
    # 计算在圆内的点数
    inside_circle = x**2 + y**2 <= 1
    pi_estimate = 4 * np.sum(inside_circle) / n_samples
    
    return pi_estimate

if __name__ == "__main__":
    pi_approx = calculate_pi_monte_carlo()
    print(f"π的近似值: {pi_approx}")

JavaScript 代码

// 异步数据获取和错误处理示例
class ApiService {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
        this.cache = new Map();
    }
    
    async fetchData(endpoint, options = {}) {
        const cacheKey = `${endpoint}:${JSON.stringify(options)}`;
        
        // 检查缓存
        if (this.cache.has(cacheKey)) {
            return this.cache.get(cacheKey);
        }
        
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    ...options.headers
                },
                ...options
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            
            // 缓存结果
            this.cache.set(cacheKey, data);
            
            return data;
        } catch (error) {
            console.error('API请求失败:', error);
            throw error;
        }
    }
}

// 使用示例
const api = new ApiService('https://api.example.com');
api.fetchData('/users')
    .then(data => console.log('用户数据:', data))
    .catch(error => console.error('获取失败:', error));

SQL 查询

-- 复杂的SQL查询示例
WITH monthly_sales AS (
    SELECT 
        DATE_TRUNC('month', order_date) as month,
        product_id,
        SUM(quantity * unit_price) as revenue
    FROM orders o
    JOIN order_items oi ON o.order_id = oi.order_id
    WHERE o.order_date >= '2023-01-01'
        AND o.order_date < '2024-01-01'
        AND o.status = 'completed'
    GROUP BY 1, 2
),

ranked_products AS (
    SELECT 
        month,
        product_id,
        revenue,
        ROW_NUMBER() OVER (PARTITION BY month ORDER BY revenue DESC) as rank
    FROM monthly_sales
)

SELECT 
    TO_CHAR(month, 'YYYY-MM') as period,
    COUNT(CASE WHEN rank <= 3 THEN 1 END) as top_3_products,
    SUM(revenue) as total_revenue,
    AVG(revenue) as avg_product_revenue
FROM ranked_products
GROUP BY month
ORDER BY month;

Shell 脚本

#!/bin/bash

# 自动部署脚本示例
set -e  # 遇到错误立即退出

PROJECT_DIR="/var/www/myapp"
BACKUP_DIR="/backup/myapp"
TIMESTAMP=$(date +"%Y%m%d_%H%M%S")

echo "开始部署应用..."

# 创建备份
if [ -d "$PROJECT_DIR" ]; then
    echo "创建备份..."
    mkdir -p "$BACKUP_DIR"
    tar -czf "$BACKUP_DIR/backup_$TIMESTAMP.tar.gz" -C "$PROJECT_DIR" .
    echo "备份完成: backup_$TIMESTAMP.tar.gz"
fi

# 更新代码
echo "拉取最新代码..."
cd "$PROJECT_DIR"
git pull origin main

# 安装依赖
echo "安装依赖..."
npm ci --production

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

# 重启服务
echo "重启服务..."
pm2 reload myapp

echo "部署完成！"

功能特性验证

  1. ✅ 数学公式渲染 - KaTeX支持行内和块级公式
  2. ✅ 代码高亮 - PrismJS支持多种编程语言
  3. ✅ 代码复制 - 点击复制按钮一键复制代码
  4. ✅ 行号显示 - 为代码块添加行号
  5. ✅ Mermaid图表 - 支持流程图、时序图、类图等
  6. ✅ 响应式设计 - 移动端适配
  7. ✅ 深色模式 - 主题切换支持
  8. ✅ 目录导航 - 自动生成文章目录
  9. ✅ 搜索功能 - 全文搜索支持

所有功能测试完成！🎉