كيفية إضافة كتل التعليمات البرمجية في تطبيق React الخاص بك

في تطوير الويب ، يعد عرض كتل التعليمات البرمجية بالتنسيق الصحيح والإبراز مطلبًا شائعًا. كتل التعليمات البرمجية هي أداة متعددة الاستخدامات يمكن استخدامها لمجموعة متنوعة من الأغراض ، بما في ذلك عرض التعليمات البرمجية وتحسين تفاعل المستخدم.

تركيب المكتبة

أولاً، إنشاء تطبيق React وتثبيت رد فعل كتل التعليمات البرمجية مكتبة. تُستخدم هذه المكتبة لعرض كتل التعليمات البرمجية في تطبيقك. يمكنك تثبيت هذه المكتبة باستخدام npm ، مدير الحزم لـ Node.js. افتح المحطة الطرفية وانتقل إلى دليل المشروع الخاص بك. ثم قم بتشغيل الأمر التالي:

npm تثبيت رد فعل الكود الكتل

سيؤدي هذا إلى تثبيت مكتبة كتل التعليمات البرمجية في مشروعك.

إضافة كتلة التعليمات البرمجية إلى مشروعك

بمجرد تثبيت مكتبة رد فعل الكود ، فأنت جاهز للبدء. أولاً ، قم باستيراد ملف كودبلوك مكون من مكتبة رد فعل الكود في تطبيقك. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملفك:

يستورد {CodeBlock} من"رد فعل الكود الكتل";

بعد ذلك ، استخدم مكون CodeBlock في تطبيقك عن طريق إضافة الكود التالي:

 نص ='console.log ("Hello، world!")؛'
 اللغة ="جافا سكريبت"
 showLineNumbers = {حقيقي}
 الموضوع = {yourTheme}
/>

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

• نص (مطلوب): الرمز المراد عرضه في مقطع التعليمات البرمجية.
• اللغة (مطلوب): لغة برمجة الكود. يستخدم هذا ل تسليط الضوء على بناء الجملة من كتلة التعليمات البرمجية.
• showLineNumbers: قيمة منطقية تشير إلى ما إذا كان سيتم عرض أرقام الأسطر في كتلة التعليمات البرمجية أم لا. انها افتراضية على خطأ.
• سمة: الموضوع المراد استخدامه لكتلة التعليمات البرمجية. يمكن أن يكون هذا سمة مضمنة أو كائن سمة مخصصة. يتم تعيينه افتراضيًا على GitHub.
• ابتداءً من رقم الخط: رقم السطر الذي سيتم بدء العد منه. يتم تعيينه افتراضيًا على 1.
• كودبلوك: كائن يحتوي على خيارات لمجموعة التعليمات البرمجية. يمكن أن يشمل ذلك أرقام الأسطر (منطقي يشير إلى ما إذا كان سيتم عرض أرقام الأسطر أم لا) و خطوط التفاف (قيمة منطقية تشير إلى ما إذا كنت تريد التفاف الخطوط أم لا).
• عند النقر: وظيفة يتم الاتصال بها عند النقر فوق كتلة التعليمات البرمجية.

فيما يلي مثال على كيفية استخدام كل هذه الدعائم:

يستورد {CodeBlock} من"رد فعل الكود الكتل";
وظيفةMyComponent() {
مقدار ثابت handleClick = () => {
وحدة التحكم.سجل("تم النقر على كتلة التعليمات البرمجية");
 };
يعود (
 نص ='تحية كونست = "مرحبًا ، أيها العالم!" ؛ console.log (تحية) ؛ '
 اللغة ="جافا سكريبت"
 showLineNumbers = {حقيقي}
 موضوع ="ذرة واحدة مظلمة"
 startLineNumber = {10}
 codeBlock = {{ أرقام الأسطر: خطأ شنيع, خطوط التفاف: حقيقي }}
 onClick = {handleClick}
 />
 );
}

في الكود أعلاه ، أنت تستخدم ذرة واحدة مظلمة الموضوع ، بدء أرقام الأسطر عند 10 ، وتعطيل أرقام الأسطر ، وتمكين التفاف الأسطر ، وإرفاق معالج النقر.

باستخدام هذه الدعائم ، يمكنك تخصيص مظهر وسلوك كتل التعليمات البرمجية الخاصة بك لتناسب احتياجاتك.

إضافة ثيمات في كتل التعليمات البرمجية الخاصة بك

توفر مكتبة قوالب الكود التفاعلي مجموعة متنوعة من السمات المضمنة التي يمكن استخدامها لتخصيص مظهر كتل التعليمات البرمجية الخاصة بك. لاستخدام سمة مدمجة ، ما عليك سوى تحديد اسم السمة في ملف سمة دعم. على سبيل المثال ، لاستخدام ملف ذرة واحدة مظلمة الموضوع ، يمكنك استخدام الكود التالي:

 نص ='console.log ("Hello، world!")؛'
 اللغة ="جافا سكريبت"
 showLineNumbers = {حقيقي}
 موضوع ="ذرة واحدة مظلمة"
/>

بالإضافة إلى السمات المضمنة ، يمكنك أيضًا إنشاء نُسق مخصصة عن طريق تحديد كائن JavaScript يحدد الألوان لاستخدامها في أجزاء مختلفة من كتلة التعليمات البرمجية. فيما يلي مثال على الشكل الذي قد يبدو عليه كائن النسق المخصص:

مقدار ثابت myCustomTheme = {
 رقم الخط "#ccc",
 اللون: "#222",
 لون الخلفية: "#222",
 لون الخط: "#ccc",
 اللون: "# 00ff00",
 اللون: "# 0077ff",
 السمة "# ffaa00",
 محدد العلامة "# 0077ff",
 اللون: "# aa00ff",
 الاسم "# f8f8f8",
 اللون: "# 0077ff",
 اللون: "# ffaa00",
 رصاصة "# ffaa00",
 الكود "#ccc",
 إضافة "# 00ff00",
 اللون: "# f8f8f8",
 اللون: "# ffaa00",
 متغير "# ffaa00",
 نموذج متغير "# ffaa00",
 الرابط "# aa00ff",
 selectorAttributeColor: "# ffaa00",
 المحدد "# aa00ff",
 النوع "# 0077ff",
 سلسلة "# 00ff00",
 محدد اللون: "# ffaa00",
 اللون: "# f8f8f8",
 النموذج "#ccc",
 الحذف "# ff0000",
 العنوان "# 0077ff",
 اللون: "# 0077ff",
 اللون: "#777",
 اللون: "# f8f8f8",
 اللون: "# aa00ff",
 الوظيفة: "# 0077ff",
 الرقم "# ffaa00",
};

لاستخدام سمة مخصصة ، يمكنك تمرير كائن السمة كعنصر سمة لمكون CodeBlock:

 نص ='console.log ("Hello، world!")؛'
 اللغة ="جافا سكريبت"
 showLineNumbers = {حقيقي}
 المظهر = {myCustomTheme}
/>

أدناه هو الإخراج:

باستخدام السمات المضمنة والمخصصة ، يمكنك تخصيص مظهر كتل التعليمات البرمجية الخاصة بك لتناسب احتياجاتك والتصميم العام لتطبيقك.

إضافة CopyBlock إلى مشروعك

إذا كنت ترغب في إضافة وظيفة النسخ إلى كتل التعليمات البرمجية الخاصة بك ، فيمكنك استخدام ملحق CopyBlock المكون الذي توفره مكتبة كتل التعليمات البرمجية. لاستخدام هذا المكون ، ستحتاج إلى تثبيت رد فعل نسخ إلى الحافظة مكتبة كذلك. إليك كيفية إضافة مكون CopyBlock إلى مشروعك:

تحميل هذا رد فعل نسخ إلى الحافظة مكتبة:

npm تثبيت رد فعل نسخ إلى الحافظة

استيراد المكونات والمكتبات الضرورية:

يستورد {CopyBlock} من"رد فعل الكود كتل";
يستورد {FaCopy} من"رد فعل الرموز / كرة القدم";
يستورد ينسخ من'نسخ إلى الحافظة';

استخدم مكون CopyBlock في التعليمات البرمجية الخاصة بك:

مقدار ثابت كود = 'console.log ("Hello، world!")؛';
مقدار ثابت اللغة = "جافا سكريبت";
 نص = {كود}
 اللغة = {language}
 showLineNumbers = {حقيقي}
 wrapLines = {حقيقي}
 موضوع ="دراكولا"
 كودبلوك
 رمز = {}
 onCopy = {() => نسخ (كود)}
/>

أدناه هو الإخراج:

من خلال إضافة مكون CopyBlock إلى مشروعك ، يمكنك بسهولة السماح للمستخدمين بنسخ الكود من كتل التعليمات البرمجية الخاصة بك إلى الحافظة الخاصة بهم.

طرق بديلة لإضافة كتل التعليمات البرمجية

أثناء استخدام مكتبة كتل التعليمات البرمجية هي الطريقة الأكثر مباشرة لإضافة كتل التعليمات البرمجية إلى تطبيق React الخاص بك ، هناك أيضًا بعض الطرق البديلة التي يمكنك استخدامها:

1. إضافة تمييز بناء الجملة يدويًا: إذا كنت لا تريد استخدام مكتبة ، فيمكنك إضافة تمييز بناء الجملة يدويًا إلى شفرتك باستخدام Tailwind CSS أو CSS العادي. يتضمن ذلك إضافة فئات CSS إلى عناصر التعليمات البرمجية الخاصة بك لتطبيق الأنماط المناسبة. بينما تمنحك هذه الطريقة مزيدًا من التحكم في الأنماط ، إلا أن إعدادها وصيانتها قد يستغرق وقتًا طويلاً.
2. استخدام مكتبات أخرى: هناك العديد من المكتبات الأخرى المتاحة التي توفر تمييزًا لغويًا للتعليمات البرمجية ، مثل رد فعل-بناء الجملة-تمييز, المنشور-رد الفعل-العارض، و تسليط الضوء. js. تتمتع هذه المكتبات بميزات وأنماط مختلفة ، لذا يمكنك اختيار واحدة تناسب احتياجاتك.

بينما تعد مكتبة كتل الكود المتفاعل خيارًا رائعًا لمعظم التطبيقات ، يمكن أن تكون هذه الطرق البديلة مفيدة في مواقف معينة. في النهاية ، ستعتمد الطريقة التي تختارها على احتياجاتك وتفضيلاتك المحددة.

تحسين تفاعل المستخدم مع الكتل البرمجية

باستخدام كتل التعليمات البرمجية لشرح التعليمات البرمجية وتقديم أمثلة تشفير تفاعلية وإنشاء مرئي تصميمات جذابة ، يمكنك تحسين تجربة المستخدمين لديك والحفاظ على تفاعلهم مع موقع الويب الخاص بك أو طلب. بالإضافة إلى ذلك ، باستخدام ميزات مثل CopyBlock والسمات المخصصة ، يمكنك جعل تطبيق React أكثر وظيفية وجاذبية.