دليل المستخدم إلغاء

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

بحث

تاريخ آخر تحديث 20 ديسمبر 2021

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

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

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

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

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

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

حدد Edit > Preferences ‏(في نظام التشغيل Windows) أو Dreamweaver > Preferences ‏(في نظام التشغيل Macintosh).
حدد Interface من قائمة Category على اليسار.
اختر سمة من قائمة Color Themes.
بعد تحديد سمة الواجهة، قم بتعيين سمة التعليمات البرمجية.

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

سمات التعليمات البرمجية الافتراضية
انقر فوق Apply لحفظ التغييرات.

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

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

حدد Edit > Preferences ‏(في نظام التشغيل Windows) أو Dreamweaver > Preferences ‏(في نظام التشغيل Macintosh).
حدد سمة تعليمات برمجية ذات لون فاتح أو غامق، ثم انقر فوق أيقونة علامة الزائد، واحفظ السمة باسم جديد.

ملاحظة:

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

إنشاء نسق جديد
احفظ سمة التعليمات البرمجية الافتراضية باسم جديد.

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

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

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

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

قبل الانتقال إلى تحرير هذه المحددات في ملف main.less file، استغرق دقائق قليلة لقراءة هذه التعليقات والتعليمات داخل ملف النسق. وإذا كنت لا تزال غير متأكد بخصوص المحدد المراد تحريره، فراجع الموارد التالية:

فهم المحددات - الجداول المرجعية التي توفر معلومات حول عناصر التعليمات البرمجية التي تتأثر بمحدد معين
استخدام Token Inspector - استخدم Token Inspector لفحص ملف معين وتمييز عناصر التعليمات البرمجية المتأثرة بمحدد معين.
إذا كنت تريد تحرير ألوان التعليمات البرمجية للتعليقات، أو ضبط لون التمييز لعلامات مقترنة، فراجع أجزاء التعليمات البرمجية العينة في أمثلة تخصيص التعليمات البرمجية.

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

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

/* Custom code colors or overrides should start after this line */
اكتب المحددات لعناصر التعليمات البرمجية التي تريد تحرير ألوانها. استخدم بناء جملة مماثل للمثال التالي:

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

ملاحظة:

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

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
لكي يكون تخصيص لون التعليمات البرمجية قاصرًا على نوع ملف، قم بإحاطة محددات عنصر التعليمات البرمجية داخل محدد نوع الملف كما هو موضح في المثال التالي:
```
.HTML{
.cm-tag{ color: #00D0D0;}
}
```
بعد إجراء التغييرات، احفظ الملف.

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

ملاحظة:

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

تخصيص ألوان التعليمات البرمجية لملفات التعليمات البرمجية المختلطة

إذا كنت تعمل باستخدام ملفات الوضع المختلط (ملف واحد يحتوي على لغات تعليمات برمجية مختلفة) مثل HTML/CSS، أو HTML/PHP، أو HTML/JavaScript، يمكنك عندئذٍ تخصيص ألوان التعليمات البرمجية بالطريقة التالية:

قم بإنشاء نسق تعليمات برمجية مخصص من خلال اتباع التعليمات الواردة في تخصيص نُسق التعليمات البرمجية. حدد النسق الجديد وقم بتطبيقه.
قم بإنهاء Dreamweaver.
افتح package.json في محرر نصوص.

في نظام التشغيل Windows: %appdata%\Adobe\Dreamweaver CC 2017\ar_AE\Configuration\Brackets\extensions\user\\

في نظام التشغيل Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/ar_AE/Configuration/Brackets/extensions/user//

قم بإضافة السطر التالي في النسق{}:

"addModeClass": true

تحرير ملف package.json
افتح Dreamweaver، وحدد Edit > Preferences > Interface، ثم حدد النسق الجديد، وانقر فوق الرمز Edit.

قم بإضافة الأنماط الخاصة بالوضع في نهاية ملف main.less.

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

المحدد	نوع ملف التعليمة البرمجية
cm-m-clike.	PHP
cm-m-css.	CSS, Less
cm-m-javascript.	JavaScript
cm-m-xml.	HTML, XML

على سبيل المثال، لتخصيص ألوان التعليمات البرمجية لأسماء العلامات في CSS وعلامات الأنماط في HTML أو PHP، استخدم بناء الجملة التالي:

.cm-tag {color: #BD46BD;} 
.cm-m-css.cm-tag {color: #38D08B;}

احفظ ملف main.less.

تظهر تغييرات ألوان التعليمات البرمجية الآن في ملفات التعليمات البرمجية لديك.

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

راجع الأمثلة التالية لفهم كيفية تخصيص ألوان التعليمات البرمجية في السيناريوهات المختلفة.

اضبط لون تمييز العلامات المتزاوجة

في ملف main.less، ابحث عن جزء التعليمة البرمجية التالي وقم بضبط اللون.

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #B53A3A;
    color: #fff!important;

ملاحظة:

يعتمد جزء التعليمة البرمجية هذا على النسق. وقد لا يكون موجودًا في جميع النُسق.

اضبط لون تعليقات التعليمات البرمجية

في ملف main.less، ابحث عن جزء التعليمة البرمجية التالي وقم بضبط اللون.

.cm-comment {color: #717171; font-style: italic;}

فهم المحددات

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

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

يمكنك أيضًا استخدام Token Inspector لفهم عناصر التعليمات البرمجية المتأثرة بمحدد معين.

المحددات	HTML	CSS	JavaScript	PHP
cm-atom.	أسماء الكيانات مثل	اللون بتنسيق سداسي عشري أو 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.

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

يوضح الجدول التالي المحددات اللازم استخدامها عند تخصيص ألوان التعليمات البرمجية للحالات التي توجد فيها لغات عديدة في ملف واحد.

المحدد	نوع ملف التعليمة البرمجية
cm-m-clike.	PHP
cm-m-css.	CSS, Less
cm-m-javascript.	JavaScript
cm-m-xml.	HTML, XML

استخدام Token Inspector

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

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

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

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

توضيح الوضع في Token Inspector
حدد عنصر التعليمات البرمجية الذي تريد تعديل شكله.

ثم تقوم Token Inspector بتمييز المحدد.
(اختياري) يمكنك أيضًا تحديد محدد فردي لمشاهدة عناصر التعليمات البرمجية في ملف تعليماتك البرمجية التي تأثرت بهذا المحدد.
لاحظ المحددات التي تريد تحريرها وقم بتحديثها وأغلق Token Inspector.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟