كتل الأكواد

تستخدم جميع كتل الأكواد 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 وظل للصندوق