مقتطف code

CodeSnippet

كتلة كود في React بتبويبات لغات وأرقام أسطر وزر نسخ وطيّ «عرض المزيد» ونمط مضمّن. يبقى الكود من اليسار إلى اليمين في الصفحات العربية.

افتح في ستوري بوك ↗

يستقبل CodeSnippet مصفوفة languages، وتظهر التبويبات عند وجود أكثر من لغة. استخدم maxLines لزر إظهار المزيد، وCodeSnippetInline للأوامر القصيرة. تعرض الشيفرة دائمًا من اليسار إلى اليمين.

متى تستخدمه

استخدم CodeSnippet في وثائق المطوّرين وبوّابات واجهات البرمجة وأدلّة التكامل. مرّر عدّة languages لإظهار التبويبات، واستخدم maxLines للعيّنات الطويلة، وCodeSnippetInline للأوامر أو القيم المفردة داخل الجملة.

أمثلة

لغات متعدّدة

// جلب دليل الخدمات الوطنيconst res = await fetch(  'https://api.gov.example.sa/v1/services',);const services = await res.json();console.log(services.length);

لغة واحدة، بلا أرقام أسطر

export const config = {  authority: 'هيئة الحكومة الرقمية',  region: 'sa-central-1',  retries: 3,};

قابل للطي مع «عرض المزيد»

# مخطّط طلب الرخصةfrom pydantic import BaseModelclass PermitRequest(BaseModel):    citizen_id: str    service_code: str    ministry: str    submitted_at: str    status: str = "pending"    priority: int = 3# مثالrequest = PermitRequest(    citizen_id="1000000000",    service_code="BLD-204",    ministry="الشؤون البلدية",    submitted_at="2026-07-02",)

أمر مضمّن

pnpmpnpm add @dev-dga/react @dev-dga/css

npmnpm install @dev-dga/react

الخصائص

الخصائص التي يعرّفها CodeSnippet. سمات العنصر الأصلي تمرّ كما هي.

<CodeSnippet>

الخاصية	النوع	الافتراضي	الوصف
`languages`إلزامي	`CodeSnippetLanguage[]`		One entry per language. A single entry hides the tab bar (SDGA single-tab).
`value`	`string`		Controlled active language.
`defaultValue`	`string`		Uncontrolled initial active language (defaults to the first).
`onValueChange`	`(value: string) => void`
`lineNumbers`	`boolean`	`true`	Render the line-number gutter.
`maxLines`	`number`		Collapse to this many lines with a Show More toggle when exceeded.
`renderCode`	`(ctx: { code: string; language: string; }) => ReactNode`		Escape hatch: render highlighted code yourself; the active `code` still drives copy + line count.
`onCopy`	`(text: string) => void`
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy button.
`copiedLabel`	`string`	`'Copied'`	Live-region text announced after a successful copy.

<CodeSnippetInline>

الخاصية	النوع	الافتراضي	الوصف
`children`إلزامي	`string`		The command text - copied verbatim.
`prefix`	`react.ReactNode`		Leading label (e.g. `npm`) - rendered in gold.
`onCopy`	`(text: string) => void`
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy button.
`copiedLabel`	`string`	`'Copied'`	Live-region text announced after a successful copy.

إمكانية الوصول

لزر النسخ اسم متاح ويعلن النجاح عبر منطقة حيّة. يعرض زر «عرض المزيد» aria-expanded.

يُعرض الكود داخل <pre> و<code> باتجاه إجباري من اليسار إلى اليمين، فيُقرأ بشكل صحيح داخل المحتوى العربي. التبويبات تعمل بلوحة المفاتيح.