كتلة الشيفرة

شيفرة بأرقام الأسطر واسم الملف وزر نسخ، وشريحة شيفرة داخل النص.

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

أضف المكوّن
$ npx ritla add code-block
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/code-block
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

code-block.tsx

import { CodeBlock } from "@/components/ui/code-block";<CodeBlock code={source} fileName="greeting.tsx" />

الخاصية	النوع	الافتراضي	الوصف
`code`	`string`	لا يوجد	الشيفرة نصًا.
`fileName`	`ReactNode`	لا يوجد	خاصية File name.
`languageSwitch`	`ReactNode`	لا يوجد	خاصية Show language switch: عنصر يمرّره التطبيق.
`showHeader / lineNumbers`	`boolean`	`true`	الرأس وأرقام الأسطر.
`highlightLines`	`number[]`	لا يوجد	أسطر مميّزة.

الخاصية	النوع	الافتراضي	الوصف
`children`	`string`	لا يوجد	خاصية Code.
`copy`	`boolean`	`false`	خاصية Copy.

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينتقل إلى زر النسخ.