代码高亮

代码高亮

Starlight 提供了强大的代码高亮功能，支持多种编程语言和自定义主题。

基本用法

行内代码

使用反引号创建行内代码：console.log('Hello World')

代码块

使用三个反引号创建代码块：

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

指定语言

可以为代码块指定编程语言以获得更好的语法高亮：

import numpy as np

def calculate_mean(numbers):
  """计算数字的平均值"""
  return np.mean(numbers)

data = [1, 2, 3, 4, 5]
print(f"平均值: {calculate_mean(data)}")

/* 温暖学术风格的代码高亮 */
.code-highlight {
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

行号显示

添加 showLineNumbers 可以显示行号：

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

class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUserById(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}

高亮特定行

使用 {1,3-5} 语法可以高亮特定行：

function fibonacci(n) {
  if (n <= 1) return n;

  // 计算斐波那契数列
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(result); // 输出: 55

文件名和标题

可以添加文件名和标题：

组件示例

---
interface Props {
  title: string;
  content: string;
}

const { title, content } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  <p>{content}</p>
</div>

支持的语言

Starlight 支持以下常见编程语言的语法高亮：

• Web: HTML, CSS, JavaScript, TypeScript
• 后端: Python, Java, C#, Go, Rust
• 数据: SQL, JSON, YAML, Markdown
• 配置: Docker, Nginx, Apache
• 其他: Bash, PowerShell, Regex

主题定制

代码高亮主题与整体设计风格保持一致，采用温暖学术风格的配色方案。

• 背景色：温暖的浅色调
• 关键字：深棕色强调
• 字符串：温暖的橙色系
• 注释：柔和的灰色

最佳实践

1. 选择正确的语言：确保指定了正确的编程语言
2. 代码简洁：保持代码块简洁，专注于演示核心概念
3. 添加注释：为复杂代码添加必要的注释
4. 合理高亮：有选择地高亮关键行，避免过度使用

---

通过合理使用代码高亮功能，可以让技术文档更加清晰易懂。