تعرف على كيفية تخصيص الألوان لعناصر تعليماتك البرمجية (تلوين التعليمات البرمجية) مثل تعليقات التعليمات البرمجية في Dreamweaver.

في برنامج Dreamweaver، يمكنك تغيير تفضيلات لون الواجهة باستخدام Edit > Preferences > Interface.

ويمكنك الاختيار بين أربع سمات ألوان مختلفة وتحديد سمة تعليمات برمجية ذات لون فاتح أو غامق. 

بعد تعيين سمة اللون والتعليمات البرمجية الخاصة بك، يمكنك تخصيص ألوان التعليمات البرمجية في Dreamweaver بشكل أكبر عن طريق تحرير المحددات في ملف main.less المدمج.

حول ألوان التعليمات البرمجية في Dreamweaver CC 2017

يتم التحكم في ألوان التعليمات البرمجية في Dreamweaver CC 2017 عن طريق المحددات الموجودة في ملف السمات main.less.

لتخصيص ألوان التعليمات البرمجية في Dreamweaver CC 2017، قم بما يلي:

  1. قم بتعيين تفضيلات سمات الألوان وسمات التعليمات البرمجية الافتراضية في Dreamweaver. 
  2. يمكنك إنشاء سمة تعليمات برمجية باستخدام سمة تعليمات برمجية موجودة كقاعدة.
  3. تحرير سمة التعليمات البرمجية الجديدة.
  4. افهم المحددات التي تريد تعديلها وتأثيرها على عناصر التعليمات البرمجية الأخرى.
  5. قم بتحرير المحددات في ملف السمات main.less واحفظ تغييراتك.

تعيين سمات الألوان وسمات التعليمات البرمجية

يمكنك اختيار سمة ألوان وفقًا لتفضيلاتك عند بدء تشغيل Dreamweaver. يمكنك أيضًا تغيير هذه التفضيلات في أي وقت.

  1. حدد Edit > Preferences ‏(في نظام التشغيل Windows) أو Dreamweaver > Preferences ‏(في نظام التشغيل Macintosh).

  2. حدد Interface من قائمة Category على اليسار.

  3. اختر سمة من قائمة Color Themes. 

  4. بعد تحديد سمة الواجهة، قم بتعيين سمة التعليمات البرمجية.

    يمكنك الاختيار من بين سمة تعليمات برمجية ذات لون فاتح أو غامق. ثم يمكنك بعد ذلك حفظ هذه السمة باسم جديد وتخصيصها بشكل أكبر.

    سمات التعليمات البرمجية الافتراضية
    سمات التعليمات البرمجية الافتراضية

  5. انقر فوق Apply لحفظ التغييرات.

تخصيص سمات التعليمات البرمجية

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

  1. حدد Edit > Preferences ‏(في نظام التشغيل Windows) أو Dreamweaver > Preferences ‏(في نظام التشغيل Macintosh).

  2. حدد سمة تعليمات برمجية ذات لون فاتح أو غامق، ثم انقر فوق أيقونة علامة الزائد، واحفظ السمة باسم جديد.

    ملاحظة:

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

    نسخ سمة وتحريرها
    نسخ سمة وتحريرها

  3. احفظ سمة التعليمات البرمجية الافتراضية باسم جديد.

    انشاء سمة تعليمات برمجية قائمة على سمة تعليمات برمجية افتراضية
    انشاء سمة تعليمات برمجية قائمة على سمة تعليمات برمجية افتراضية

  4. حدد سمة التعليمات البرمجية المنشأة حديثًا، وانقر فوق رمز Edit.

    يتم فتح ملف main.less في Dreamweaver، ويمكنك الآن تحرير المحددات في السمة لتخصيص ألوان تعليماتك البرمجية.

    يتم تحديث طريقة العرض Code بالألوان الجديدة عند حفظ الملف main.less.

فهم المحددات

لتغيير ألوان عناصر التعليمات البرمجية، قم بتحرير خصائص المحددات في الملف main.less.

لكن، قبل الانتقال السريع لتعديل المحددات في ملف main.less، من المهم معرفة معنى المحددات المختلفة، وعناصر التعليمات البرمجية التي تؤثر عليها. راجع الجدول التالي لفهم عناصر التعليمات البرمجية في ملفات HTML وCSS وJavaScript وPHP التي تتأثر بهذه المحددات.

المحددات HTML CSS JavaScript PHP
cm-atom.  أسماء الكيانات مثل   اللون بتنسيق Hex أو rgb أو HSL، وقيم السمات المعرفة مسبقًا مثل strong وnone وauto وinherit وغير ذلك. true‏، false‏، null‏، undefined،‏ NaN‏، Infinity True‏، False‏، Null، والقيم الثابتة السحرية مثل __LINE__‏، __DIR__، وغير ذلك
cm-attribute.  اسم السمة أنواع الوسائط مثل الكل، برايل، طباعة، الشاشة، وغير ذلك    
cm-bracket. أقواس العلامات مثل <، >، /> و</      
cm-builtin.    محدد المعرف   الوظائف المدمجة مثل htmlspecialchars، وtrim، وsubstr، وغير ذلك
cm-comment.  التعليق التعليق التعليق التعليقات
cm-def.    "قاعدة @" المتغير وتعريف الدالة ومعلمة الدالة  اسم الدالة في تعريف الدالة 
cm-error.  علامات الإغلاق دون علامة بداية
قوس اقتباس مفقود لقيمة السمة
خطأ بسبب عدم وجود أقواس { أو } أو أقواس الاقتباس لقيمة خاصية أو اسم خاصية غير معروف    
cm-keyword.    أسماء الألوان !مهم، الكلمات الأساسية في @media مثل and وonly إلى غير ذلك الكلمات الأساسية لبنية التحكم (if, else, …‏)، in‏، of‏، from،‏ default،‏ public‏، private، إلى غير ذلك الكلمات الأساسية مثل function،‏ if،‏ else‏، new،‏ echo‏، isset، إلى غير ذلك
cm-meta.  <!DOCTYPE> الإعلان البادئات الخاصة بالمستعرض مثل -webkit-‏‏، -o-،‏ إلخ علامات الحذف في بناء جملة الامتداد. مثل: ;(myFunction(...iterableObj <!DOCTYPE> الإعلان وعلامات بداية ونهاية PHP‏: <?php, ?>
cm-number.    أي رقم مع أو دون وحدة أي رقم مثل 12، 2.1، 123e-5‏، 0x11‏، 0b11‏، 0o11، إلى غير ذلك أي رقم مثل 12، 2.1، 0x11،‏ 0b11،‏ 0123،‏ 5.0E+19، إلى غير ذلك
cm-operator.      العوامل: +، -، *، +=، !==، &&، >>>، إلى غير ذلك العوامل مثل ===، &&، !، =>، +، -، إلى غير ذلك
cm-property.    اسم الخاصية خاصية الكائن أو الطريقة  
cm-qualifier.    محدد الفئة    
cm-string.  قيمة السمة سلسلة عادية، مثل السلسلة المارة إلى طلب url()، واسم خط ضمن أقواس اقتباس، وغير ذلك. سلسلة حرفية سلسلة حرفية
cm-string-2.    الخصائص غير القياسية مثل لون سهم شريط التمرير، لون قاعدة شريط التمرير، وغير ذلك. التعبيرات العادية  
cm-tag.  اسم العلامة محدد العلامات    
cm-variable.    أسماء الخطوط دون أقواس اقتباس المتغيرات/الدوال العمومية، مراجع الفئات أسماء الدوال المعرفة من قبل المستخدم، مراجع الواجهة/الفئة، خصائص الفئة، القوالب، 
cm-variable-2.    خصائص مخصصة مثل main-bg-color متغيرات محددة النطاق/إشارات الدوال المرجعية المتغيرات المعرفة بواسطة المستخدم والمتغيرات المعرفة مسبقًا، أو المعلمات أو السمات
cm-variable-3.   فئات وهمية مثل :hover، :focus، إلى غير ذلك وعناصر وهمية مثل ::first-letter،‏ ::selection، إلى غير ذلك    

يشير الجدول التالي إلى قوالب ومكتبات Dreamweaver المتأثرة بالمحددات في الملف main.less.

الفئة (Templates(DWT (Library(LBI
cm-templateComment. تعليقات القوالب  
cm-templateAttrVal. قيم السمات في تعليقات القوالب  
cm-instanceParam. تعليق وسمة InstanceParam  
cm-instanceParamAttrVal. قيم سمة InstanceParam  
cm-libraryItem.   مكتبات مدرجة في مستند. مثال: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

معرفة كيفية تأثير المحددات على ملفات التعليمات البرمجية الأخرى

لمعرفة كيفية تأثير المحددات في ملف السمات main.less على عناصر التعليمات البرمجية في ملفات التعليمات البرمجية (غير HTML وCSS وJavaScript وPHP)، قم بتنزيل Token Inspector واستخدامه.

تنزيل

  1. قم بتنزيل Token Inspector وفك ضغطها.

  2. انتقل إلى ملف TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html وافتحه باستخدام Google Chrome.

    تحتوي أداة TokenInspector المساعدة على الأقسام التالية:

    • محرر التعليمات البرمجية، 
    • وخيار لتغيير الأوضاع،
    • قائمة بالمحددات على اليمين.
    استخدام Token Inspector لفهم المحددات
    استخدام Token Inspector لفهم المحددات

    A. محرر التعليمات البرمجية B. تغيير خيار Mode C. قائمة بالمحددات 
  3. انسخ محتويات الملف والصقها في محرر التعليمات البرمجية.

  4. قم بتغيير وضع الملف من خلال كتابة امتداد اسم الملف والنقر فوق Change mode.

    على سبيل المثال، إذا كان ملف HTML، فقم بتغيير امتداد اسم الملف إلى html. يتم تحديث الصفحة لتُظهر التغيير في الوضع وتذكر الوضع الحالي في أعلى الصفحة.

    توضيح الوضع في Token Inspector
    توضيح الوضع في Token Inspector

  5. حدد عنصر التعليمات البرمجية الذي تريد تعديل شكله.

    ثم تقوم Token Inspector بتمييز المحدد.

  6. (اختياري) يمكنك أيضًا تحديد محدد فردي لمشاهدة عناصر التعليمات البرمجية في ملف تعليماتك البرمجية التي تأثرت بهذا المحدد.

  7. لاحظ المحددات التي تريد تحريرها وقم بتحديثها وأغلق Token Inspector.

تحرير المحددات في ملف main.less

بعد أن تعرفت الآن على المحددات التي تحتاج إلى تحريرها، يمكنك عمل التغييرات على ملف main.less.

  1. انتقل إلى نهاية الملف حتى ترى التعليق التالي:

    /* يجب أن تبدأ ألوان التعليمات البرمجية المخصصة أو حالات التجاوز بعد هذا السطر */

  2. اكتب المحددات لعناصر التعليمات البرمجية التي تريد تحرير ألوانها. استخدم بناء جملة مماثل للمثال التالي:

    .cm-tag {color: #00D0D0; }

  3. قم بتجميع محددات متعددة إذا أردت تعيين اللون نفسه لعناصر متعددة. في المثال التالي، يتم تعيين لون واحد لمحددات متعددة مفصولة بفاصلات.

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. لكي يكون تخصيص لون التعليمات البرمجية قاصرًا على نوع ملف، قم بإحاطة محددات عنصر التعليمات البرمجية داخل محدد نوع الملف كما هو موضح في المثال التالي:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. بعد إجراء التغييرات، احفظ الملف.

    يقوم Dreamweaver بتحديث طريقة العرض Code في كل المستندات المفتوحة باستخدام الألوان الجديدة.

ملاحظة:

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

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت