코드 블록

모든 코드 블록은 styles/custom.css에 정의된 커스텀 스타일링과 함께 Expressive Code를 사용합니다.

언어 예시

JavaScript

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

Python

def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))  # 55

Bash

#!/bin/bash
for i in $(seq 1 5); do
  echo "Iteration $i"
done

YAML

site:
  title: Documentation
  base: /
  integrations:
    - starlight
    - react

JSON

{
  "name": "@f5-sales-demo/docs-theme",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js"
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

CSS

:root {
  --sl-color-accent: #f06680;
  --sl-font: "proximaNova", system-ui;
}

h1 {
  font-family: var(--sl-font-heading);
  font-weight: 700;
}

TypeScript

interface Config {
  title: string;
  base: string;
  plugins: string[];
}

const config: Config = {
  title: "Documentation",
  base: "/",
  plugins: ["starlight", "react"],
};

터미널 모드

터미널 스타일 코드 블록(```bash 또는 ```sh로 펜스 처리된)은 macOS 신호등 점이 있는 iTerm에서 영감을 받은 윈도우 프레임을 적용받습니다.

npm install @f5-sales-demo/docs-theme
npx astro build
npx astro preview

터미널 CSS 참조

/* 프레임 테두리 */
.expressive-code .frame.is-terminal {
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* 신호등 SVG 점이 있는 다크 헤더 */
.expressive-code .frame.is-terminal .header {
  background: #323232 !important;
  color: #ccc !important;
}

/* 다크 모드 터미널 본문 — Tokyo Night 영감 */
:root:not([data-theme="light"]) .expressive-code .frame.is-terminal pre {
  background: #1a1b26 !important;
}

/* 라이트 모드 테두리 오버라이드 */
:root[data-theme="light"] .expressive-code .frame.is-terminal {
  border-color: rgba(0, 0, 0, 0.2);
}

파일명 제목

export default {
  site: "https://example.com",
  title: "My Docs",
};

줄 강조

const name = "highlighted"; // 1번 줄 강조
const other = "normal";
const a = 1; // 3-5번 줄 강조
const b = 2;
const c = 3;
const d = "normal again";

삽입 및 삭제된 줄

const config = {
  theme: "dark", // 삽입됨
  theme: "light", // 삭제됨
  lang: "en",
};

Diff 블록

const oldValue = "deprecated";
const newValue = "replacement";
const unchanged = "stays";
removeThis();
addThis();

CSS 참조

프레임 스타일링

모든 코드 블록은 둥근 모서리와 레이어드 그림자를 적용받습니다:

.expressive-code .frame {
  --header-border-radius: 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

테마 인식 테두리

/* 다크 모드 (기본값) */
.expressive-code .frame.is-terminal {
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* 라이트 모드 */
:root[data-theme="light"] .expressive-code .frame.is-terminal {
  border-color: rgba(0, 0, 0, 0.2);
}

테마 확인 사항

코드 블록 배경색은 테마에 맞게 적응합니다
터미널 헤더 배경은 macOS 신호등 점과 함께 #323232입니다
터미널 테두리는 다크 모드에서 rgba(255, 255, 255, 0.15), 라이트 모드에서 rgba(0, 0, 0, 0.2)를 사용합니다
다크 모드 터미널 본문은 #1a1b26을 사용합니다
구문 색상은 두 테마 모두에서 가독성을 유지합니다
줄 강조에는 눈에 띄는 배경 색조가 적용됩니다
삽입된 줄은 녹색 색조, 삭제된 줄은 빨간색 색조를 표시합니다
코드 블록은 0.75rem 테두리 반경과 박스 그림자를 가집니다