عنصر واجهة مستخدم كتلة كود العنصر مع تمييز بناء الجملة (Pro)
Source Code عبارة عن أداة Master Addons Pro لعرض مقتطفات التعليمات البرمجية على صفحة Elementor. الصق الكود، واختر واحدة من 75 لغة وواحدة من ثمانية سمات Prism.js، وستعرض الكتلة بألوان بناء الجملة وأرقام الأسطر الاختيارية وزر النسخ إلى الحافظة. يمكن للزوار قراءة الكود ونسخه ولكن لا يمكنهم تحريره. يناسب البرامج التعليمية والوثائق وسجلات التغيير ومحافظ المطورين.
كيفية إضافة كتلة التعليمات البرمجية في العنصر
يحتاج كود المصدر إلى عنصر ونشط ماستر أدونز برو رخصة.
- قم بتنشيط Master Addons Pro، وقم بتحرير الصفحة باستخدام Elementor وابحث في لوحة الأدوات كود المصدر.
- اسحبه حيث ينتمي المقتطف.
- اختر اللغة في شفرة و أ موضوع.
- لصق المقتطف في كود المصدر صندوق.
- قم بتشغيل زر النسخ وأرقام الأسطر، واضبط نص الزر والرؤية والموضع.
- في علامة التبويب "النمط"، قم بتعيين ارتفاع للمقتطفات الطويلة وقم بتصميم الزر، ثم قم بمعاينة الصفحة واختبار النسخ.
يتم تغطية كل إعداد في إعدادات عناصر واجهة مستخدم كود المصدر مرشد.
75 لغة و8 موضوعات Prism.js
ال شفرة يسرد Dropdown 75 لغة، من HTML وCSS وJavaScript وPHP إلى Python وBash وSQL وJSON وYAML وTypeScript وReact JSX وGo وKotlin وSwift. موضوع العروض الافتراضية، المظلمة، غير التقليدية، أوكيديا، الشفق، كوي، الضوء الشمسي وغدًا. يختار مخصص لتعيين الخلفية ولون النص ولون رقم السطر والطباعة في علامة التبويب "النمط".
- استخدم سمة ضوئية مثل الضوء الافتراضي أو المشمس على الصفحات البيضاء، وOkaidia أو Tomorrow على الأقسام المظلمة.
- لا يحتوي Custom على ألوان كلمات رئيسية: يظهر الرمز في لون النص الفردي الذي تختاره، لذا استخدم سمة محددة مسبقًا عندما تريد ألوان بناء الجملة.
- عنصر واجهة مستخدم واحد يحمل مقتطفًا واحدًا. ضع عدة عناصر واجهة مستخدم جنبًا إلى جنب للتعليمات البرمجية والإخراج.
Elementor Pro Code Highlight مقابل Master Adds Source Code
يحتوي Elementor Pro على أداة Code Highlight الخاصة به. كلاهما يستخدم Prism.js، لذا فإن الاختيار يعود إلى الإضافات التي تحتاجها.
| ميزة | تسليط الضوء على رمز Elementor Pro | كود مصدر الإضافات الرئيسية |
|---|---|---|
| سعر | يحتاج العنصر برو | يحتاج إلى إضافات رئيسية برو |
| اللغات | 37 | 75 |
| المواضيع | 6 (صلبة، داكنة، أوكيديا، ضوء الشمس، غدا، الشفق) | 8 بالإضافة إلى الألوان المخصصة |
| زر النسخ | نسخ إلى مفتاح الحافظة | نص مخصص، نص منسوخ، دائمًا أو أثناء التمرير، موضعين، تصميم كامل |
| أرقام الأسطر | نعم | نعم |
| تسليط الضوء على الخطوط | نعم | لا |
| التفاف الكلمة | نعم | لا |
| الارتفاع وحجم الخط | نعم | الارتفاع، بالإضافة إلى الطباعة باستخدام السمة المخصصة |
اختر Elementor Pro إذا كنت بحاجة إلى تمييز أسطر معينة أو لف أسطر طويلة. اختر الإضافات الرئيسية إذا كنت تريد المزيد من اللغات أو المزيد من السمات أو زر نسخ مصمم. ذات صلة: جدول المحتويات للدروس الطويلة و الجدول الديناميكي للجداول المرجعية.
نسخ الأزرار وأرقام الأسطر
أفتح تمكين زر النسخ لإضافة زر ينسخ المقتطف بأكمله. تعيين لها نسخ نص الزر، ال بعد نسخ نص الزر تظهر بعد النقر، رؤية الزر (دائما أو أثناء التحليق) و موضع الزر (الزاوية اليمنى العليا أو السفلية اليمنى). تمكين رقم السطر يضيف أرقامًا أسفل الجانب الأيسر.
- احتفظ بالزر المضبوط على الصفحات التعليمية دائمًا حتى يلاحظ القراء ذلك.
- أرقام الأسطر تجعل من السهل الرجوع إلى سطر في النص الخاص بك.
- لا يوجد خيار لتسليط الضوء على أسطر معينة أو لف أسطر طويلة داخل الأداة.
تصميم الحاوية والأزرار
ال حاوية يقوم القسم بتعيين ارتفاع (يصل إلى 1200 بكسل) بحيث يتم تمرير المقتطفات الطويلة، بالإضافة إلى الحشو والهامش والحدود ونصف القطر. مع السمة المخصصة فإنه يضيف أيضًا الخلفية والطباعة ولون النص ولون رقم السطر. ال زر يقوم القسم بتصميم زر النسخ باستخدام الطباعة ولون النص ولون الخلفية والحشو والحدود ونصف القطر.
- قم بتغطية الارتفاع بالملفات الطويلة حتى تظل الصفحة قابلة للقراءة.
- قم بمطابقة خلفية الزر مع لون علامتك التجارية.
- أضف حشوة حتى لا يلمس الكود حواف الكتلة.
الأسئلة المتداولة حول كود المصدر
هل أداة كود المصدر مجانية؟
رقم كود المصدر جزء من ماستر أدونز برو. يمتلك مستخدمو Elementor Pro أيضًا أداة Elementor's Code Highlight.
هل يمكنني إخفاء أرقام الأسطر بجوار الرمز؟
نعم. تعيين تمكين رقم السطر إلى لا لكتلة أنظف.
أين يمكنني وضع زر النسخ؟
تعيين موضع الزر إلى الزاوية اليمنى العليا أو السفلية اليمنى، و رؤية الزر إلى دائما أو على التحليق.
ما هي اللغات التي تدعمها أداة كود المصدر؟
75، تم اختيارها في القائمة المنسدلة التعليمات البرمجية. وهي تشمل HTML وCSS وJavaScript وPHP وPython وBash وSQL وJSON وYAML وMarkdown وTypeScript وReact JSX وTSX وGo وJava وKotlin وSwift وRuby وC وC++ وC#. يمكن للزوار قراءة التعليمات البرمجية ونسخها ولكن لا يمكنهم تحريرها.
هل يمكنني استخدام نظام الألوان الخاص بي بدلاً من السمات المحددة مسبقًا؟
جزئياً. اضبط السمة على مخصص لاختيار الخلفية ولون النص ولون رقم السطر والطباعة في قسم نمط الحاوية. تأتي ألوان الكلمات الرئيسية فقط مع السمات الثمانية المعدة مسبقًا، لذا تعرض الكتلة المخصصة التعليمات البرمجية بلون واحد ما لم تقم بإضافة CSS الخاص بك.
هل يمكنني تسليط الضوء على خطوط محددة؟
لا. لا تحتوي الأداة على خيار تمييز السطر. يمكن لعنصر واجهة المستخدم Code Highlight الخاص بـ Elementor Pro تمييز الأسطر المختارة إذا كنت بحاجة إلى ذلك.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
