CodePanel
Introduction
CodePanel is a professional code display panel component that provides high-quality code syntax highlighting based on Shiki. It supports 180+ programming languages and multiple VS Code themes, providing the best code display experience for developer documentation and tutorials.
Component Features:
- 🎨 Syntax Highlighting: Based on Shiki, supports 180+ programming languages
- 🎭 Multi-theme Support: Supports VS Code themes (dark-plus, light-plus, github-dark, etc.)
- 🚀 Performance Optimized: Server-side rendering, avoiding client-side repeated computation
- 📱 Responsive Design: Adapts to different screen sizes
- 🎯 Accessibility: Semantic HTML structure with keyboard navigation support
- 🔧 Highly Customizable: Supports custom themes and styles
class
Custom CSS class name for overriding default styles.
<CodePanel code="console.log('class prop example');" class="my-custom-class" />code
Code string to display (required).
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" />
language
Code language for syntax highlighting, default ‘typescript’.
---
// 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" />
showLineNumbers
Whether to show line numbers, default false.
<CodePanel code="console.log('show line numbers');" showLineNumbers={true} />theme
Theme name, default ‘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 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" />
visible
Whether to show in panel, default true.
<CodePanel code="console.log('hide panel');" visible={false} />