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" />
属性说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
code | string | - | 要显示的代码字符串(必需) |
language | string | 'typescript' | 代码语言,用于语法高亮 |
theme | string | 'dark-plus' | 主题名称 |
showLineNumbers | boolean | false | 是否显示行号 |
visible | boolean | true | 是否显示在面板中 |
class | string | - | 自定义类名 |
支持的主题
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>
注意事项
- 代码转义:确保传入的代码字符串正确转义特殊字符
- 主题一致性:在同一页面中保持主题一致性,提供更好的用户体验
- 性能考虑:大量代码块可能影响页面加载速度,考虑使用懒加载
- 移动端适配:长代码行在移动设备上会产生横向滚动,注意代码格式
常见问题
Q: 为什么某些语言的高亮效果不理想?
A: 请确保指定的 language
参数与代码实际语言匹配,并且该语言受 Shiki 支持。
Q: 如何自定义代码样式?
A: 可以通过 class
属性添加自定义 CSS 类,或者通过 CSS 变量覆盖默认样式。
Q: 代码很长时如何处理?
A: 组件会自动添加横向滚动条。对于超长代码,建议分段展示或提供下载链接。