Code Blocks

.code-block

코드 스니펫을 표시하기 위한 다크 테마 코드 블록 컴포넌트입니다.

Basic Code Block

기본 코드 블록 스타일입니다. JetBrains Mono 폰트가 적용됩니다.

npm install @cf-ui/components

Single Line Code

설치 명령어와 같은 단순한 코드를 표시합니다.

<div class="code-block">
    npm install @cf-ui/components
</div>

Multi-line Code

여러 줄의 코드를 표시할 수 있습니다.

import { DataGrid, Modal, Button } from '@cf-ui/components';

function App() {
    return (
        <div className="app">
            <DataGrid
                columns={columns}
                data={data}
                pageSize={15}
            />
        </div>
    );
}

HTML Code Example

HTML 마크업 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>My App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS Code Example

CSS 스타일 코드 예제입니다.

:root {
    --primary-color: #F6821F;
    --secondary-color: #0051C3;
    --text-color: #111827;
}

.button {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(246, 130, 31, 0.3);
}

JavaScript Code Example

JavaScript 코드 예제입니다.

// Accordion functionality
document.querySelectorAll('.accordion-header').forEach(button => {
    button.addEventListener('click', () => {
        const content = button.nextElementSibling;
        const isExpanded = button.getAttribute('aria-expanded') === 'true';

        // Toggle aria-expanded
        button.setAttribute('aria-expanded', !isExpanded);

        // Toggle content visibility
        if (!isExpanded) {
            content.style.maxHeight = content.scrollHeight + 'px';
            content.style.opacity = '1';
        } else {
            content.style.maxHeight = '0';
            content.style.opacity = '0';
        }
    });
});

Shell Commands

터미널 명령어를 표시하는 예제입니다.

# 프로젝트 클론
git clone https://github.com/user/project.git

# 디렉토리 이동
cd project

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

JSON Data Example

JSON 형식의 데이터 구조 예제입니다.

{
    "name": "cf-data-grid",
    "version": "2.0.0",
    "props": {
        "data": {
            "type": "Array",
            "default": []
        },
        "columns": {
            "type": "Array",
            "required": true
        },
        "pageSize": {
            "type": "number",
            "default": 15
        }
    },
    "events": ["row-click", "page-change", "sort"]
}

Styling

코드 블록에 적용되는 스타일 토큰입니다.

속성	토큰	값
배경색	$color-code-bg	#111827
텍스트색	$color-code-text	#E5E7EB
폰트	$font-family-mono	JetBrains Mono
패딩	$space-4	1rem
라운딩	$radius-md	8px