كتل الكود

تستخدم جميع كتل الكود 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",
};

كتل الفروق

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 وظل للصندوق