logo
导航

CodePanel

简介

CodePanel 是一个专业的代码展示面板组件,基于 Shiki 提供高质量的代码语法高亮效果。支持 180+ 编程语言和多种 VS Code 主题,为开发者文档和教程提供最佳的代码展示体验。

组件特性:

  • 🎨 语法高亮:基于 Shiki,支持 180+ 编程语言
  • 🎭 多主题支持:支持 VS Code 主题(dark-plus、light-plus、github-dark 等)
  • 🚀 性能优化:服务端渲染,避免客户端重复计算
  • 📱 响应式设计:自适应不同屏幕尺寸
  • 🎯 可访问性:语义化 HTML 结构,支持键盘导航
  • 🔧 高度可定制:支持自定义主题和样式

基础用法

最简单的代码展示:

function greet(name) {
  console.log(`Hello!`);
  return `Welcome to CodePanel!`;
}

greet();
interface User {
  id: number;
  name: string;
  email?: string;
}

const createUser = (userData: Partial<User>): User => {
  return {
    id: Date.now(),
    name: 'Unknown',
    ...userData
  };
};

const user = createUser({ name: 'Alice', email: 'alice@example.com' });
def fibonacci(n):
    """Generate Fibonacci sequence up to n terms"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    
    sequence = [0, 1]
    for i in range(2, n):
        sequence.append(sequence[i-1] + sequence[i-2])
    
    return sequence

# Generate first 10 Fibonacci numbers
fib_numbers = fibonacci(10)
print(f"Fibonacci sequence: {fib_numbers}")
---
/**
 * @component CodePanelBasicJavascript
 * @description CodePanel 组件 JavaScript 代码高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const javascriptCode = `function greet(name) {
  console.log(\`Hello!\`);
  return \`Welcome to CodePanel!\`;
}

greet();`;
---

<CodePanel code={javascriptCode} language="javascript" />
function greet(name) {
  console.log(`Hello!`);
  return `Welcome to CodePanel!`;
}

greet();
interface User {
  id: number;
  name: string;
  email?: string;
}

const createUser = (userData: Partial<User>): User => {
  return {
    id: Date.now(),
    name: 'Unknown',
    ...userData
  };
};

const user = createUser({ name: 'Alice', email: 'alice@example.com' });
def fibonacci(n):
    """Generate Fibonacci sequence up to n terms"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    
    sequence = [0, 1]
    for i in range(2, n):
        sequence.append(sequence[i-1] + sequence[i-2])
    
    return sequence

# Generate first 10 Fibonacci numbers
fib_numbers = fibonacci(10)
print(f"Fibonacci sequence: {fib_numbers}")
---
/**
 * @component CodePanelBasicTypescript
 * @description CodePanel 组件 TypeScript 代码高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const typescriptCode = `interface User {
  id: number;
  name: string;
  email?: string;
}

const createUser = (userData: Partial<User>): User => {
  return {
    id: Date.now(),
    name: 'Unknown',
    ...userData
  };
};

const user = createUser({ name: 'Alice', email: 'alice@example.com' });`;
---

<CodePanel code={typescriptCode} language="typescript" />
function greet(name) {
  console.log(`Hello!`);
  return `Welcome to CodePanel!`;
}

greet();
interface User {
  id: number;
  name: string;
  email?: string;
}

const createUser = (userData: Partial<User>): User => {
  return {
    id: Date.now(),
    name: 'Unknown',
    ...userData
  };
};

const user = createUser({ name: 'Alice', email: 'alice@example.com' });
def fibonacci(n):
    """Generate Fibonacci sequence up to n terms"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    
    sequence = [0, 1]
    for i in range(2, n):
        sequence.append(sequence[i-1] + sequence[i-2])
    
    return sequence

# Generate first 10 Fibonacci numbers
fib_numbers = fibonacci(10)
print(f"Fibonacci sequence: {fib_numbers}")
---
/**
 * @component CodePanelBasicPython
 * @description CodePanel 组件 Python 代码高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const pythonCode = `def fibonacci(n):
    """Generate Fibonacci sequence up to n terms"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    
    sequence = [0, 1]
    for i in range(2, n):
        sequence.append(sequence[i-1] + sequence[i-2])
    
    return sequence

# Generate first 10 Fibonacci numbers
fib_numbers = fibonacci(10)
print(f"Fibonacci sequence: {fib_numbers}")`;
---

<CodePanel code={pythonCode} language="python" />

主题切换

CodePanel 支持多种 VS Code 主题,提供一致的代码阅读体验:

// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
---
/**
 * @component CodePanelThemeDarkPlus
 * @description CodePanel 组件 dark-plus 主题高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const sampleCode = `// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}`;
---

<CodePanel code={sampleCode} language="typescript" theme="dark-plus" />
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
---
/**
 * @component CodePanelThemeLightPlus
 * @description CodePanel 组件 light-plus 主题高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const sampleCode = `// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}`;
---

<CodePanel code={sampleCode} language="typescript" theme="light-plus" />
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
---
/**
 * @component CodePanelThemeGithubDark
 * @description CodePanel 组件 github-dark 主题高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const sampleCode = `// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}`;
---

<CodePanel code={sampleCode} language="typescript" theme="github-dark" />
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}
---
/**
 * @component CodePanelThemeGithubLight
 * @description CodePanel 组件 github-light 主题高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const sampleCode = `// React Hook for theme management
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return { theme, toggleTheme };
}`;
---

<CodePanel code={sampleCode} language="typescript" theme="github-light" />

多语言支持

支持 180+ 编程语言的语法高亮:

---
// Astro 组件示例
interface Props {
  title: string;
  description?: string;
}

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

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

<style>
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
package main

import (
    "fmt"
    "net/http"
    "encoding/json"
)

type User struct {
    ID   int    'json:"id"'
    Name string 'json:"name"'
    Email string 'json:"email"'
}

func getUserHandler(w http.ResponseWriter, r *http.Request) {
    user := User{
        ID:   1,
        Name: "Alice",
        Email: "alice@example.com",
    }
    
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(user)
}

func main() {
    http.HandleFunc("/user", getUserHandler)
    fmt.Println("Server starting on :8080")
    http.ListenAndServe(":8080", nil)
}
use std::collections::HashMap;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct User {
    id: u64,
    name: String,
    email: Option<String>,
}

impl User {
    fn new(id: u64, name: String) -> Self {
        Self {
            id,
            name,
            email: None,
        }
    }
    
    fn with_email(mut self, email: String) -> Self {
        self.email = Some(email);
        self
    }
}

fn main() {
    let mut users: HashMap<u64, User> = HashMap::new();
    
    let user = User::new(1, "Alice".to_string())
        .with_email("alice@example.com".to_string());
    
    users.insert(user.id, user);
    
    println!("Users: {:#?}", users);
}
-- 用户管理系统数据库设计
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT true
);

CREATE TABLE profiles (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    bio TEXT,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 查询活跃用户及其资料
SELECT 
    u.id,
    u.username,
    u.email,
    p.first_name,
    p.last_name,
    p.bio
FROM users u
LEFT JOIN profiles p ON u.id = p.user_id
WHERE u.is_active = true
ORDER BY u.created_at DESC
LIMIT 10;
---
/**
 * @component CodePanelLanguageAstro
 * @description CodePanel 组件 Astro 语言高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const astroCode = `---
// Astro 组件示例
interface Props {
  title: string;
  description?: string;
}

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

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

<style>
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>`;
---

<CodePanel code={astroCode} language="astro" />
---
// Astro 组件示例
interface Props {
  title: string;
  description?: string;
}

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

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

<style>
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
package main

import (
    "fmt"
    "net/http"
    "encoding/json"
)

type User struct {
    ID   int    'json:"id"'
    Name string 'json:"name"'
    Email string 'json:"email"'
}

func getUserHandler(w http.ResponseWriter, r *http.Request) {
    user := User{
        ID:   1,
        Name: "Alice",
        Email: "alice@example.com",
    }
    
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(user)
}

func main() {
    http.HandleFunc("/user", getUserHandler)
    fmt.Println("Server starting on :8080")
    http.ListenAndServe(":8080", nil)
}
use std::collections::HashMap;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct User {
    id: u64,
    name: String,
    email: Option<String>,
}

impl User {
    fn new(id: u64, name: String) -> Self {
        Self {
            id,
            name,
            email: None,
        }
    }
    
    fn with_email(mut self, email: String) -> Self {
        self.email = Some(email);
        self
    }
}

fn main() {
    let mut users: HashMap<u64, User> = HashMap::new();
    
    let user = User::new(1, "Alice".to_string())
        .with_email("alice@example.com".to_string());
    
    users.insert(user.id, user);
    
    println!("Users: {:#?}", users);
}
-- 用户管理系统数据库设计
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT true
);

CREATE TABLE profiles (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    bio TEXT,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 查询活跃用户及其资料
SELECT 
    u.id,
    u.username,
    u.email,
    p.first_name,
    p.last_name,
    p.bio
FROM users u
LEFT JOIN profiles p ON u.id = p.user_id
WHERE u.is_active = true
ORDER BY u.created_at DESC
LIMIT 10;
---
/**
 * @component CodePanelLanguageGo
 * @description CodePanel 组件 Go 语言高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const goCode = `package main

import (
    "fmt"
    "net/http"
    "encoding/json"
)

type User struct {
    ID   int    'json:"id"'
    Name string 'json:"name"'
    Email string 'json:"email"'
}

func getUserHandler(w http.ResponseWriter, r *http.Request) {
    user := User{
        ID:   1,
        Name: "Alice",
        Email: "alice@example.com",
    }
    
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(user)
}

func main() {
    http.HandleFunc("/user", getUserHandler)
    fmt.Println("Server starting on :8080")
    http.ListenAndServe(":8080", nil)
}`;
---

<CodePanel code={goCode} language="go" />
---
// Astro 组件示例
interface Props {
  title: string;
  description?: string;
}

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

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

<style>
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
package main

import (
    "fmt"
    "net/http"
    "encoding/json"
)

type User struct {
    ID   int    'json:"id"'
    Name string 'json:"name"'
    Email string 'json:"email"'
}

func getUserHandler(w http.ResponseWriter, r *http.Request) {
    user := User{
        ID:   1,
        Name: "Alice",
        Email: "alice@example.com",
    }
    
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(user)
}

func main() {
    http.HandleFunc("/user", getUserHandler)
    fmt.Println("Server starting on :8080")
    http.ListenAndServe(":8080", nil)
}
use std::collections::HashMap;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct User {
    id: u64,
    name: String,
    email: Option<String>,
}

impl User {
    fn new(id: u64, name: String) -> Self {
        Self {
            id,
            name,
            email: None,
        }
    }
    
    fn with_email(mut self, email: String) -> Self {
        self.email = Some(email);
        self
    }
}

fn main() {
    let mut users: HashMap<u64, User> = HashMap::new();
    
    let user = User::new(1, "Alice".to_string())
        .with_email("alice@example.com".to_string());
    
    users.insert(user.id, user);
    
    println!("Users: {:#?}", users);
}
-- 用户管理系统数据库设计
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT true
);

CREATE TABLE profiles (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    bio TEXT,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 查询活跃用户及其资料
SELECT 
    u.id,
    u.username,
    u.email,
    p.first_name,
    p.last_name,
    p.bio
FROM users u
LEFT JOIN profiles p ON u.id = p.user_id
WHERE u.is_active = true
ORDER BY u.created_at DESC
LIMIT 10;
---
/**
 * @component CodePanelLanguageRust
 * @description CodePanel 组件 Rust 语言高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const rustCode = `use std::collections::HashMap;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct User {
    id: u64,
    name: String,
    email: Option<String>,
}

impl User {
    fn new(id: u64, name: String) -> Self {
        Self {
            id,
            name,
            email: None,
        }
    }
    
    fn with_email(mut self, email: String) -> Self {
        self.email = Some(email);
        self
    }
}

fn main() {
    let mut users: HashMap<u64, User> = HashMap::new();
    
    let user = User::new(1, "Alice".to_string())
        .with_email("alice@example.com".to_string());
    
    users.insert(user.id, user);
    
    println!("Users: {:#?}", users);
}`;
---

<CodePanel code={rustCode} language="rust" />
---
// Astro 组件示例
interface Props {
  title: string;
  description?: string;
}

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

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

<style>
  .card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
package main

import (
    "fmt"
    "net/http"
    "encoding/json"
)

type User struct {
    ID   int    'json:"id"'
    Name string 'json:"name"'
    Email string 'json:"email"'
}

func getUserHandler(w http.ResponseWriter, r *http.Request) {
    user := User{
        ID:   1,
        Name: "Alice",
        Email: "alice@example.com",
    }
    
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(user)
}

func main() {
    http.HandleFunc("/user", getUserHandler)
    fmt.Println("Server starting on :8080")
    http.ListenAndServe(":8080", nil)
}
use std::collections::HashMap;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct User {
    id: u64,
    name: String,
    email: Option<String>,
}

impl User {
    fn new(id: u64, name: String) -> Self {
        Self {
            id,
            name,
            email: None,
        }
    }
    
    fn with_email(mut self, email: String) -> Self {
        self.email = Some(email);
        self
    }
}

fn main() {
    let mut users: HashMap<u64, User> = HashMap::new();
    
    let user = User::new(1, "Alice".to_string())
        .with_email("alice@example.com".to_string());
    
    users.insert(user.id, user);
    
    println!("Users: {:#?}", users);
}
-- 用户管理系统数据库设计
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT true
);

CREATE TABLE profiles (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    bio TEXT,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 查询活跃用户及其资料
SELECT 
    u.id,
    u.username,
    u.email,
    p.first_name,
    p.last_name,
    p.bio
FROM users u
LEFT JOIN profiles p ON u.id = p.user_id
WHERE u.is_active = true
ORDER BY u.created_at DESC
LIMIT 10;
---
/**
 * @component CodePanelLanguageSQL
 * @description CodePanel 组件 SQL 语言高亮示例
 */
import { CodePanel } from '@coffic/cosy-ui';

const sqlCode = `-- 用户管理系统数据库设计
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT true
);

CREATE TABLE profiles (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    bio TEXT,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 查询活跃用户及其资料
SELECT 
    u.id,
    u.username,
    u.email,
    p.first_name,
    p.last_name,
    p.bio
FROM users u
LEFT JOIN profiles p ON u.id = p.user_id
WHERE u.is_active = true
ORDER BY u.created_at DESC
LIMIT 10;`;
---

<CodePanel code={sqlCode} language="sql" />

属性说明

属性类型默认值说明
codestring-要显示的代码字符串(必需)
languagestring'typescript'代码语言,用于语法高亮
themestring'dark-plus'主题名称
showLineNumbersbooleanfalse是否显示行号
visiblebooleantrue是否显示在面板中
classstring-自定义类名

支持的主题

  • dark-plus - VS Code 默认深色主题
  • light-plus - VS Code 默认浅色主题
  • github-dark - GitHub 深色主题
  • github-light - GitHub 浅色主题
  • nord - Nord 主题
  • dracula - Dracula 主题

支持的语言

CodePanel 支持所有 Shiki 支持的编程语言,包括但不限于:

  • 前端:JavaScript、TypeScript、HTML、CSS、SCSS、Vue、React、Astro
  • 后端:Python、Java、C#、Go、Rust、PHP、Ruby、Node.js
  • 数据库:SQL、MongoDB、Redis
  • 配置:JSON、YAML、TOML、XML
  • 脚本:Shell、PowerShell、Bash
  • 其他:Markdown、Docker、Kubernetes、Terraform

最佳实践

1. 性能优化

<!-- 推荐:指定具体语言,避免自动检测 -->
<CodePanel 
  code={code}
  language="typescript"
/>

<!-- 避免:使用通用语言,可能影响高亮质量 -->
<CodePanel 
  code={code}
  language="text"
/>

2. 主题选择

<!-- 根据页面主题选择合适的代码主题 -->
<CodePanel 
  code={code}
  language="javascript"
  theme="github-light"  // 适合浅色页面
/>

<CodePanel 
  code={code}
  language="javascript"  
  theme="github-dark"   // 适合深色页面
/>

3. 在容器中使用

---
import { CodeContainer, CodePanel } from '@coffic/cosy-ui';
---

<CodeContainer codes={[sourceCode]}>
  <div id="tab-1">
    <YourComponent />
  </div>
</CodeContainer>

注意事项

  1. 代码转义:确保传入的代码字符串正确转义特殊字符
  2. 主题一致性:在同一页面中保持主题一致性,提供更好的用户体验
  3. 性能考虑:大量代码块可能影响页面加载速度,考虑使用懒加载
  4. 移动端适配:长代码行在移动设备上会产生横向滚动,注意代码格式

常见问题

Q: 为什么某些语言的高亮效果不理想?

A: 请确保指定的 language 参数与代码实际语言匹配,并且该语言受 Shiki 支持。

Q: 如何自定义代码样式?

A: 可以通过 class 属性添加自定义 CSS 类,或者通过 CSS 变量覆盖默认样式。

Q: 代码很长时如何处理?

A: 组件会自动添加横向滚动条。对于超长代码,建议分段展示或提供下载链接。