บล็อกโค้ด

บล็อกโค้ดทั้งหมดใช้ Expressive Code พร้อมการจัดสไตล์แบบกำหนดเองที่กำหนดไว้ใน styles/custom.css

ตัวอย่างภาษา

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) จะได้รับกรอบหน้าต่างที่ได้แรงบันดาลใจจาก iTerm พร้อมจุดไฟจราจรแบบ macOS

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

ข้อมูลอ้างอิง CSS สำหรับเทอร์มินัล

/* Frame border */
.expressive-code .frame.is-terminal {
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* Dark header with traffic light SVG dots */
.expressive-code .frame.is-terminal .header {
  background: #323232 !important;
  color: #ccc !important;
}

/* Dark mode terminal body — Tokyo Night-inspired */
:root:not([data-theme="light"]) .expressive-code .frame.is-terminal pre {
  background: #1a1b26 !important;
}

/* Light mode border override */
: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"; // line 1 highlighted
const other = "normal";
const a = 1; // lines 3-5 highlighted
const b = 2;
const c = 3;
const d = "normal again";

บรรทัดที่แทรกและลบ

const config = {
  theme: "dark", // inserted
  theme: "light", // deleted
  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);
}

เส้นขอบที่ปรับตามธีม

/* Dark mode (default) */
.expressive-code .frame.is-terminal {
  border: 2px solid rgba(255, 255, 255, 0.15);
}

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

การตรวจสอบธีม

สีพื้นหลังของบล็อกโค้ดปรับตามธีม
พื้นหลังส่วนหัวของเทอร์มินัลคือ #323232 พร้อมจุดไฟจราจรแบบ macOS
เส้นขอบเทอร์มินัลใช้ rgba(255, 255, 255, 0.15) ในโหมดมืด และ rgba(0, 0, 0, 0.2) ในโหมดสว่าง
เนื้อหาเทอร์มินัลในโหมดมืดใช้ #1a1b26
สีไวยากรณ์อ่านได้ชัดเจนในทั้งสองธีม
การไฮไลต์บรรทัดมีสีพื้นหลังที่มองเห็นได้ชัด
บรรทัดที่แทรกแสดงสีเขียว บรรทัดที่ลบแสดงสีแดง
บล็อกโค้ดมีรัศมีเส้นขอบ 0.75rem และเงากล่อง