چگونه بلوک های کد را در برنامه React خود اضافه کنید

آیا به دنبال نمایش بلوک های کد در برنامه React خود هستید؟ برای ادغام بلوک‌های کد برجسته‌شده با نحو در برنامه خود، این راهنما را دنبال کنید.

در توسعه وب، نمایش بلوک های کد با قالب بندی و برجسته سازی مناسب یک نیاز رایج است. بلوک های کد یک ابزار همه کاره هستند که می توانند برای اهداف مختلفی از جمله نمایش کد و بهبود تعامل کاربر استفاده شوند.

نصب کتابخانه

ابتدا یک برنامه React ایجاد کنید و کتابخانه react-code-blocks را نصب کنید. این کتابخانه برای نمایش بلوک های کد در برنامه شما استفاده می شود. شما می توانید این کتابخانه را با استفاده از npm، مدیر بسته برای Node.js نصب کنید. ترمینال خود را باز کنید و به فهرست پروژه خود بروید. سپس دستور زیر را اجرا کنید:

npm install react-code-blocks

با این کار کتابخانه react-code-blocks در پروژه شما نصب می شود.

اضافه کردن کد بلوک به پروژه شما

هنگامی که کتابخانه react-code-blocks را نصب کردید، برای شروع آماده هستید. ابتدا مؤلفه CodeBlock را از کتابخانه react-code-blocks در برنامه خود وارد کنید. می توانید این کار را با افزودن کد زیر به فایل خود انجام دهید:

import { CodeBlock } from "react-code-blocks";

سپس، با افزودن کد زیر، از مؤلفه CodeBlock در برنامه خود استفاده کنید:

<CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme={yourTheme}
/>

در کد بالا، شما چندین پروپ را به کامپوننت CodeBlock ارسال می کنید. در اینجا لیستی از تمام لوازم موجود است:

• متن (الزامی): کدی که باید در بلوک کد نمایش داده شود.
• زبان (الزامی): زبان برنامه نویسی کد. این برای برجسته کردن نحو بلوک کد استفاده می شود.
• showLineNumbers: یک مقدار بولی که نشان می دهد شماره خطوط در بلوک کد نمایش داده شود یا خیر. پیش فرض آن false است.
• theme: موضوعی که برای بلوک کد استفاده می شود. این می تواند یک تم داخلی یا یک موضوع تم سفارشی باشد. پیش‌فرض GitHub است.
• startingLineNumber: شماره خطی که باید از آن شمارش شروع شود. پیش فرض آن 1 است.
• codeBlock: یک شی حاوی گزینه هایی برای بلوک کد. این می‌تواند شامل lineNumbers (یک بولی که نشان می‌دهد اعداد خطوط نمایش داده می‌شود یا نه) و wrapLines (یک بولی که نشان می‌دهد خطوط قرار داده شوند یا نه) باشد.
• onClick: تابعی برای فراخوانی هنگام کلیک روی بلوک کد.

در اینجا مثالی از نحوه استفاده از همه این وسایل وجود دارد:

import { CodeBlock } from "react-code-blocks";

function MyComponent() {
  const handleClick = () => {
    console.log("Code block clicked");
  };

  return (
    <CodeBlock
      text='const greeting = "Hello, world!"; console.log(greeting);'
      language='javascript'
      showLineNumbers={true}
      theme='atom-one-dark'
      startingLineNumber={10}
      codeBlock={{ lineNumbers: false, wrapLines: true }}
      onClick={handleClick}
    />
  );
}

در کد بالا، شما از تم اتم-یک-تاریک استفاده می کنید، اعداد خطوط را از 10 شروع می کنید، شماره خطوط را غیرفعال می کنید، بسته بندی خطوط را فعال می کنید و کنترل کننده کلیک را وصل می کنید.

با استفاده از این لوازم، می توانید ظاهر و رفتار بلوک های کد خود را مطابق با نیازهای خود سفارشی کنید.

اضافه کردن تم ها در بلوک های کد شما

کتابخانه react-code-blocks تم های داخلی مختلفی را ارائه می دهد که می توانند برای سفارشی کردن ظاهر بلوک های کد شما استفاده شوند. برای استفاده از یک تم داخلی، شما فقط باید نام تم را در پایه تم مشخص کنید. به عنوان مثال، برای استفاده از تم atom-one-dark، باید از کد زیر استفاده کنید:

<CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme='atom-one-dark'
/>

علاوه بر تم های داخلی، می توانید با تعریف یک شی جاوا اسکریپت که رنگ های مورد استفاده برای قسمت های مختلف بلوک کد را مشخص می کند، تم های سفارشی ایجاد کنید. در اینجا مثالی از اینکه یک شی تم سفارشی ممکن است شبیه باشد آورده شده است:

const myCustomTheme = {
  lineNumberColor: "#ccc",
  lineNumberBgColor: "#222",
  backgroundColor: "#222",
  textColor: "#ccc",
  substringColor: "#00ff00",
  keywordColor: "#0077ff",
  attributeColor: "#ffaa00",
  selectorTagColor: "#0077ff",
  docTagColor: "#aa00ff",
  nameColor: "#f8f8f8",
  builtInColor: "#0077ff",
  literalColor: "#ffaa00",
  bulletColor: "#ffaa00",
  codeColor: "#ccc",
  additionColor: "#00ff00",
  regexpColor: "#f8f8f8",
  symbolColor: "#ffaa00",
  variableColor: "#ffaa00",
  templateVariableColor: "#ffaa00",
  linkColor: "#aa00ff",
  selectorAttributeColor: "#ffaa00",
  selectorPseudoColor: "#aa00ff",
  typeColor: "#0077ff",
  stringColor: "#00ff00",
  selectorIdColor: "#ffaa00",
  quoteColor: "#f8f8f8",
  templateTagColor: "#ccc",
  deletionColor: "#ff0000",
  titleColor: "#0077ff",
  sectionColor: "#0077ff",
  commentColor: "#777",
  metaKeywordColor: "#f8f8f8",
  metaColor: "#aa00ff",
  functionColor: "#0077ff",
  numberColor: "#ffaa00",
};

برای استفاده از یک تم سفارشی، می‌توانید موضوع تم را به‌عنوان پایه تم مولفه CodeBlock ارسال کنید:

<CodeBlock
  text='console.log("Hello, world!");'
  language='javascript'
  showLineNumbers={true}
  theme={myCustomTheme}
/>

در زیر خروجی است:

با استفاده از تم های داخلی و سفارشی، می توانید ظاهر بلوک های کد خود را مطابق با نیازهای خود و طراحی کلی برنامه خود سفارشی کنید.

اضافه کردن CopyBlock به پروژه شما

اگر می خواهید قابلیت کپی را به بلوک های کد خود اضافه کنید، می توانید از مؤلفه CopyBlock ارائه شده توسط کتابخانه react-code-blocks استفاده کنید. برای استفاده از این مؤلفه، باید کتابخانه react-copy-to-clipboard را نیز نصب کنید. در اینجا نحوه افزودن مولفه CopyBlock به پروژه خود آورده شده است:

کتابخانه react-copy-to-clipboard را نصب کنید:

npm install react-copy-to-clipboard

وارد کردن اجزا و کتابخانه های لازم:

import { CopyBlock } from 'react-code-blocks';
import { FaCopy } from 'react-icons/fa';
import copy from 'copy-to-clipboard';

از مؤلفه CopyBlock در کد خود استفاده کنید:

const code = 'console.log("Hello, world!");';
const language = 'javascript';

<CopyBlock
  text={code}
  language={language}
  showLineNumbers={true}
  wrapLines={true}
  theme='dracula'
  codeBlock
  icon={<FaCopy />}
  onCopy={() => copy(code)}
/>

در زیر خروجی است:

با افزودن مولفه CopyBlock به پروژه خود، می توانید به راحتی به کاربران اجازه دهید کد را از بلوک های کد شما در کلیپ بورد خود کپی کنند.

روش های جایگزین برای افزودن بلوک های کد

در حالی که استفاده از کتابخانه react-code-blocks ساده ترین راه برای افزودن بلوک های کد به برنامه React شما است، چند روش جایگزین نیز وجود دارد که می توانید از آنها استفاده کنید:

1. اضافه کردن دستی برجسته‌سازی نحو: اگر نمی‌خواهید از کتابخانه استفاده کنید، می‌توانید با استفاده از Tailwind CSS یا CSS معمولی، برجسته‌سازی نحو را به صورت دستی به کد خود اضافه کنید. این شامل اضافه کردن کلاس های CSS به عناصر کد شما برای اعمال سبک های مناسب است. در حالی که این روش به شما کنترل بیشتری بر سبک ها می دهد، تنظیم و نگهداری آن می تواند زمان بر باشد.
2. استفاده از کتابخانه های دیگر: چندین کتابخانه دیگر در دسترس هستند که برجسته سازی نحوی را برای کد ارائه می دهند، مانند react-syntax-highlighter، prism-react-renderer و highlight.js. این کتابخانه ها دارای ویژگی ها و سبک های متفاوتی هستند، بنابراین شما می توانید یکی را متناسب با نیاز خود انتخاب کنید.

در حالی که کتابخانه react-code-blocks یک انتخاب عالی برای اکثر برنامه ها است، این روش های جایگزین می توانند در شرایط خاصی مفید باشند. در نهایت، روشی که انتخاب می کنید به نیازها و ترجیحات خاص شما بستگی دارد.

بهبود تعامل کاربر با بلوک های کد

با استفاده از بلوک‌های کد برای توضیح کد، ارائه نمونه‌های کدنویسی تعاملی، و ایجاد طرح‌های جذاب بصری، می‌توانید تجربه کاربران خود را افزایش دهید و آنها را با وب‌سایت یا برنامه خود درگیر نگه دارید. علاوه بر این، با استفاده از ویژگی هایی مانند CopyBlock و تم های سفارشی، می توانید برنامه React خود را حتی کاربردی تر و جذاب تر کنید.

منبع مقاله