代码高亮演示

本文展示博客支持的代码高亮效果，包含多种编程语言示例。

JavaScript

JavaScript
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to the blog, ${name}`;
}

const users = ["Alice", "Bob", "Charlie"];
users.forEach((user) => greet(user));

Python

Python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 计算前10个斐波那契数
for i in range(10):
    print(fibonacci(i))

TypeScript

TypeScript
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Go

Go
package main

import "fmt"

func main() {
    message := "Hello, World!"
    fmt.Println(message)

    // 计算平方
    for i := 1; i <= 5; i++ {
        fmt.Printf("%d² = %d\n", i, i*i)
    }
}

Rust

Rust
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);

    // 过滤偶数
    let even_numbers: Vec<_> = numbers
        .into_iter()
        .filter(|&x| x % 2 == 0)
        .collect();

    println!("Even numbers: {:?}", even_numbers);
}

HTML

HTML
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>示例页面</title>
  </head>
  <body>
    <div class="container">
      <h1>欢迎来到我的博客</h1>
      <p>这是一个段落。</p>
    </div>
  </body>
</html>

CSS

CSS
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

SQL

SQL
SELECT
    users.name,
    COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at >= '2024-01-01'
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5
ORDER BY order_count DESC
LIMIT 10;

效果说明

代码高亮功能支持以下特性：

关键字高亮
字符串高亮
注释高亮
数字高亮
函数名高亮
类型高亮

希望这个演示能帮助你了解博客的代码展示效果！

图片

111