کد درون‌خطی — InlineCode

کد درون‌خطی (InlineCode) نام تابع، دستور، مسیر یا توکن را وسط جمله نشان می‌دهد و با یک کلیک کپی می‌کند. متن کد قابل انتخاب دستی نیست تا کپی تمیز باشد. تمام کدهای درون‌خطی همین سایت از این کامپوننت استفاده می‌کنند.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { InlineCode } from '@tokapps/tuk';

کی استفاده کنیم

نام تابع، دستور یا مسیری که خواننده ممکن است بخواهد کپی کند.
اشاره به نام توکن، کلاس یا ویژگی در مستندات.
کد چندخطی یا بلوک با شماره خط نیست؛ برای آن .

نمونهٔ زنده

پیش‌فرض

برای نصب از استفاده کنید.

TSX

import { InlineCode } from '@tokapps/tuk';<InlineCode>pnpm add @tokapps/tuk</InlineCode>

لحن برند

کامپوننت از بسته TUK است.

TSX

import { InlineCode } from '@tokapps/tuk';<InlineCode tone="brand">InlineCode</InlineCode>

کپی متنی متفاوت با نمایش

دستور را اجرا کنید.

TSX

import { InlineCode } from '@tokapps/tuk';<InlineCode copyText="pnpm install">pnpm i</InlineCode>

کلمهٔ بلند (شکستن امن)

مسیر کامل: را ببینید.

TSX

import { InlineCode } from '@tokapps/tuk';<InlineCode>packages/tuk/src/data-display/inline-code/InlineCode.tsx</InlineCode>

جمله فارسی با نماد لاتین

مقدار تعیین می‌کند کدام کلید دیده شود.

TSX

import { InlineCode } from '@tokapps/tuk';<InlineCode tone="brand">dock.slots</InlineCode>

کد قابل کپی

پایه

TSX

import { InlineCode } from '@tokapps/tuk';export function Hint() {  return (    <p>      برای ساخت پروژه از <InlineCode>pnpm build</InlineCode> استفاده کنید.    </p>  );}

در تم‌های مختلف

هسته توکاپس

TSX

import { InlineCode } from '@tokapps/tuk';<div data-theme="tokapps" data-mode="light">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div><div data-theme="tokapps" data-mode="dark">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div>

ایده‌پردازی

TSX

import { InlineCode } from '@tokapps/tuk';<div data-theme="ideation" data-mode="light">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div><div data-theme="ideation" data-mode="dark">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div>

سرمایه‌گذاری جمعی

TSX

import { InlineCode } from '@tokapps/tuk';<div data-theme="funding" data-mode="light">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div><div data-theme="funding" data-mode="dark">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div>

کشف محصول

TSX

import { InlineCode } from '@tokapps/tuk';<div data-theme="product-hunt" data-mode="light">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div><div data-theme="product-hunt" data-mode="dark">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div>

روایت‌ها

TSX

import { InlineCode } from '@tokapps/tuk';<div data-theme="stories" data-mode="light">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div><div data-theme="stories" data-mode="dark">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div>

سازمانی

TSX

import { InlineCode } from '@tokapps/tuk';<div data-theme="enterprise" data-mode="light">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div><div data-theme="enterprise" data-mode="dark">  <InlineCode>pnpm add @tokapps/tuk</InlineCode></div>

ساختار و پراپ‌ها

پراپ	نوع	توضیح
		متن کد؛ همان چیزی که کپی می‌شود
		کلاس اضافی برای بستر

RTL، کیبورد و صفحه‌خوان

همیشه با و isolate نمایش داده می‌شود تا علامت‌ها جابه‌جا نشوند.
دکمهٔ کپی با Tab قابل فوکوس است و برچسب کمکی دارد.
پس از کپی، تأیید هم با آیکون و هم با متن نشان داده می‌شود.

صدا، حرکت، چاپ و کاهش حرکت

صدا ندارد.
برچسب کمکی روی hover و فوکوس ظاهر می‌شود.

تغییرات ممنوع

کد درون‌خطی را برای متن بلند یا چندخطی به کار نبرید.