لصق التعليمات البرمجية في عنصر واجهة مستخدم نص عادي ويقوم بتجريد التنسيق، مما يترك كتلة غير قابلة للقراءة. ال القطعة كود المصدر، عنصر واجهة مستخدم احترافي في الإضافات الرئيسية للعنصر، يصلح ذلك: فهو يعرض التعليمات البرمجية الخاصة بك مع تمييز بناء الجملة المناسب، وأرقام الأسطر، وموضوع اللغة، وزر النسخ، حتى يتمكن القراء من الحصول على مقتطف بنقرة واحدة.
إنه مصمم للبرامج التعليمية والوثائق ومدونات المطورين، في أي مكان تحتاج فيه إلى إظهار PHP أو JavaScript أو CSS أو HTML أو لغة أخرى بشكل نظيف. تقوم بلصق التعليمات البرمجية واختيار اللغة والموضوع وتعيين زر النسخ، كل ذلك من لوحة Elementor. فيما يلي تشغيل لكل إعداد.
ما تفعله أداة كود المصدر #
تأخذ الأداة كتلة من التعليمات البرمجية وتعرضها مع تمييز بناء الجملة المرمز بالألوان بناءً على اللغة التي تختارها. يمكنه ترقيم الأسطر وتطبيق أحد سمات المحرر العديدة وإضافة زر النسخ إلى الحافظة الذي يؤكد وقت نسخ التعليمات البرمجية.
يحتوي على ثلاث علامات تبويب: محتوى الكود واللغة وزر النسخ ونمط الحاوية ومظهر الزر ومتقدم لخيارات Elementor المعتادة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- ماستر أدونز برو تم تثبيته بترخيص نشط، نظرًا لأن Source Code عبارة عن عنصر واجهة مستخدم Pro. جديد في البرنامج المساعد؟ انظر ال دليل التثبيت.
- مقتطف الكود الذي تريد عرضه.
كيفية إضافة عنصر واجهة المستخدم كود المصدر #
في محرر Elementor، افتح عناصر لوحة والبحث عن كود المصدر، أو قم بالتمرير إلى قسم الإضافات الرئيسية. اسحبه إلى صفحتك. يتم تحميله باستخدام مقتطف عينة حتى تتمكن من رؤية التمييز على الفور.
أضف الرمز الخاص بك واختر لغة #
افتح ال محتوى علامة التبويب. ال كود المصدر القسم يحمل كل شيء. لصق المقتطف الخاص بك في كود المصدر box، ثم قم بتعيين اللغة والموضوع فوقه.
- رمز: اللغة المراد تمييزها هي واحدة من 75 لغة، مثل PHP أو JavaScript أو CSS أو HTML. وهذا يحدد كيفية تطبيق الألوان.
- موضوع: نظام الألوان للكتلة (مغطى أدناه).
- كود المصدر: المقتطف نفسه، مع خيار الكتابة باستخدام الذكاء الاصطناعي إذا كنت بحاجة إلى مثال سريع.
اختر موضوعًا #
ال موضوع يقوم Dropdown بتعيين نظام الألوان لكتلة التعليمات البرمجية. يتضمن الافتراضي، الداكن، غير التقليدي، أوكيديا، الشفق، كوي، الضوء الشمسي، غدًا، وخيار مخصص، حتى تتمكن من مطابقة الكتلة بصفحة فاتحة أو داكنة.
يؤدي تبديل اللغة والموضوع معًا إلى إعطاء كل مقتطف المظهر الصحيح. إليك مقتطف JavaScript حول السمة المظلمة.
قم بإعداد زر النسخ #
زر النسخ هو ما يجعل الأداة مفيدة للبرامج التعليمية. يوجد أسفل مربع التعليمات البرمجية عناصر التحكم الخاصة به.
- تمكين زر النسخ: إظهار أو إخفاء زر النسخ إلى الحافظة.
- تمكين رقم السطر: قم بتشغيل أو إيقاف تشغيل أرقام الأسطر الموجودة على اليسار.
- رؤية الزر: إظهار الزر دائمًا أو فقط أثناء التمرير.
- موضع الزر: ضعه في الزاوية، مثل أعلى اليمين.
- نسخ نص الزر وبعد نسخ نص الزر: التسمية قبل وبعد النسخة، مثل رمز النسخ والنسخ.
عندما ينقر الزائر على الزر، يتحول الملصق إلى النص بعد النسخ لتأكيد عمل النسخة.
نمط كتلة الكود #
ال أسلوب يتم تقسيم علامة التبويب إلى حاوية و زر، زائد أنماط عندما الحرة أنماط تم تشغيل الامتداد. ال حاوية يتحكم القسم في إطار كتلة التعليمات البرمجية.
- ارتفاع: قم بتغطية ارتفاع الكتلة ودع التعليمات البرمجية الطويلة تمر.
- الحشو والهامش: التباعد داخل وحول الكتلة.
- نوع الحدود ونصف قطر الحدود: الخطوط العريضة والزوايا المستديرة.
- موضوع مخصص فقط: الخلفية والطباعة ولون النص ولون رقم السطر. يعرض Custom الكود بلون واحد، دون تمييز الكلمات الرئيسية.
ال زر يقوم القسم بتصميم زر النسخ: الطباعة ولون النص ولون الخلفية والحشوة والحدود ونصف القطر. لا توجد ألوان تحوم منفصلة.
النتيجة على الصفحة #
النشر أو المعاينة ويتم تمييز عروض التعليمات البرمجية بأرقام الأسطر وزر نسخ العمل. يوجد أدناه مقتطف CSS حول السمة المظلمة مع الزر الذي يوضح حالتها المنسوخة.
حالات الاستخدام الشائعة #
- البرامج التعليمية والمشاركات الإرشادية يمكن لقارئات رموز المشاركة النسخ.
- وثائق البرنامج المساعد والموضوع مع أمثلة التكوين أو الخطاف.
- مدونات المطورين عرض المقتطفات في PHP أو JavaScript أو CSS.
- قواعد المعرفة مع أوامر النسخ واللصق.
- الصفحات المقصودة إظهار استدعاء API أو رمز التضمين.
نصائح للعمل مع أداة كود المصدر #
- مطابقة اللغة مع الكود. إعداد الكود الصحيح هو ما يجعل التمييز دقيقًا.
- اختر الموضوع الذي يناسب الصفحة. استخدم سمة داكنة على الأقسام المظلمة وموضوعة فاتحة على الصفحات البيضاء.
- حافظ على زر النسخ مرئيًا. اضبط زر الرؤية على البرامج التعليمية دائمًا حتى يتمكن القراء من اكتشافها.
- قم بتغطية الارتفاع للمقتطفات الطويلة. الارتفاع الثابت مع التمرير يمنع كتلة طويلة من السيطرة على الصفحة.
- اكتب تسميات أزرار واضحة. انسخ الكود والمنسوخ لإخبار القراء بما حدث بالضبط.
الأسئلة المتداولة #
ما هي أداة كود المصدر في الإضافات الرئيسية؟
إنها أداة Master Addons Pro لـ Elementor التي تعرض التعليمات البرمجية مع تمييز بناء الجملة وأرقام الأسطر وموضوع اللغة وزر النسخ إلى الحافظة. يمكنك لصق مقتطف واختيار اللغة والموضوع وتعيين زر النسخ، كل ذلك من لوحة Elementor، دون الحاجة إلى مكونات إضافية أو رموز مختصرة.
ما هي لغات البرمجة التي تسلط الضوء عليها؟
يمكنك اختيار واحدة من 75 لغة في القائمة المنسدلة للتعليمات البرمجية، بما في ذلك PHP وJavaScript وCSS وHTML وPython وSQL وYAML. يحدد الاختيار كيفية تطبيق ألوان بناء الجملة، بحيث يقرأ المقتطف بالطريقة التي يقرأ بها في محرر التعليمات البرمجية.
هل يمكن للقراء نسخ الكود بنقرة واحدة؟
نعم. قم بتشغيل تمكين زر النسخ وسيظهر زر النسخ إلى الحافظة على الكتلة. تقوم بتعيين موضعه، عندما يظهر، والنص قبل وبعد النسخة، مثل رمز النسخ والنسخ، مما يؤكد نجاح النقرة.
هل يمكنني إظهار أرقام الأسطر في كتلة التعليمات البرمجية؟
نعم. يضيف تبديل تمكين رقم السطر في علامة التبويب "المحتوى" أرقامًا أسفل الجانب الأيسر من الكتلة. فهي تجعل من السهل الرجوع إلى سطر معين في البرنامج التعليمي، ويمكنك إيقاف تشغيله للحصول على مظهر أنظف.
هل يمكنني تغيير موضوع اللون للكود؟
نعم. يقدم القائمة المنسدلة The Theme الافتراضي، والداكن، وغير التقليدي، والأوكيديا، والشفق، والكوي، والضوء الشمسي، والغد، والمخصص. اختر واحدًا لمطابقة صفحة فاتحة أو داكنة، أو استخدم Custom لتعيين ألوان الخلفية والنص الخاصة بك في علامة التبويب Style. يعرض Custom التعليمات البرمجية بلون واحد، دون تمييز الكلمات الرئيسية.
إلتحاق بالركب #
تقوم أداة Source Code بتحويل المقتطف الأولي إلى كتلة نظيفة ومظللة يمكن للقراء نسخها بنقرة واحدة. الصق التعليمات البرمجية الخاصة بك، وقم بتعيين اللغة والموضوع، وقم بتشغيل أرقام الأسطر وزر النسخ، ثم قم بتصميم الحاوية لتتناسب مع صفحتك. للمقارنة مع أداة Code Highlight الخاصة بـ Elementor Pro، راجع عنصر واجهة المستخدم كتلة رمز العنصر صفحة. للحصول على طريقة أخرى لتقديم محتوى منظم، راجع القطعة الجدول الديناميكي، تصفح بالكامل عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
