מדריך למשתמש ביטול

התאמה אישית של העדפות צבעי קוד

חפש

עודכן לאחרונה בתאריך 20 במאי 2021

Dreamweaver

פתח אפליקציה

למד כיצד ניתן להתאים אישית את הצבעים של רכיבי הקוד (צבעי קוד), כמו הערות לקוד, ב-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 ותוכל לערוך את הבוררים בערכת הנושא כדי להתאים אישית את צבעי הקוד.

בעת שמירת קובץ main.less, תצוגת Code מתרעננת כדי שיופיעו בה הצבעים החדשים.

עריכת בוררים בקובץ main.less

לפני שתתחיל לערוך את הבוררים בקובץ main.less, הקדש כמה דקות לקריאת ההערות וההוראות בקובץ ערכת הנושא. אם עדיין אינך בטוח איזה בורר לערוך, עיין במשאבים הבאים:

הכרת הבוררים - טבלאות עזר המספקות מידע על רכיבי הקוד המושפעים מבורר מסוים
שימוש ב-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\he_IL\Configuration\Brackets\extensions\user\\

ב-Mac:‏ ~/Library/Application Support/Adobe/Dreamweaver CC 2017/he_IL/Configuration/Brackets/extensions/user//

הוסף את השורה הבאה בערכת הנושא{}:

"addModeClass": true

עריכת קובץ package.json
פתח את Dreamweaver, בחר באפשרות Edit ‏> Preferences ‏> Interface, בחר את ערכת הנושא החדשה ולחץ על סמל העריכה.

הוסף סגנונות ספציפיים למצבים שונים בסוף הקובץ main.less.

השתמש בבוררים המפורטים בטבלה הבאה כדי לערוך צבעי קוד עבור סוג הקובץ המתאים.

בורר, Selector	סוג קובץ קוד
.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 וערכים קבועים מסוג magic כגון ‎__LINE__‎‏,‏ ‎__DIR__‎ וכן הלאה
‎.cm-attribute	שם תכונה	סוגי מדיה כגון all‏, braille‏, print‏, screen וכן הלאה
‎.cm-bracket	סוגרי תגים כגון <‏, >‏, ‏‎/> ו-‏‎</
‎.cm-builtin		בורר המזהים		פונקציות מובנות כגון htmlspecialchars‏, trim‏, substr וכן הלאה
‎.cm-comment	Comment	Comment	Comment	Comments
‎.cm-def		המשתנה "@ rule"	, הגדרה של פונקציה ופרמטר של פונקציה	שם הפונקציה בהגדרת הפונקציה
‎.cm-error	תגים סוגרים ללא תג פותח גרשיים חסרים של ערך תכונה	שגיאה בגלל סוגריים חסרים מסוג { או } או בגלל גרשיים חסרים של ערך מאפיין או מאפיין לא מזוהה
‎.cm-keyword		שמות של צבעים, ‏‎!important, מילות מפתח ב-‏‎@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		מאפיינים לא סטנדרטיים כגון scrollbar-arrow-color‏, scrollbar-base-color וכן הלאה.	ביטויים רגולריים
‎.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; }‎

הטבלה הבאה מציינת את הבוררים שיהיו בשימוש בעת התאמה אישית של צבעי קוד עבור תרחישים שבהם שפות מרובות קיימות בקובץ יחיד.

בורר, Selector	סוג קובץ קוד
.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. ‏Code Editor‏ B. האפשרות Change Mode‏ C. רשימת הבוררים
העתק והדבק את התוכן של קובץ לתוך Code Editor.
שנה את מצב הקובץ על-ידי הקלדת סיומת שם הקובץ ולחיצה על Change mode.

לדוגמה, אם זהו קובץ HTML, שנה את סיומת שם הקובץ ל-html. העמוד מתעדכן כדי לשקף את השינוי במצב ומפרט את המצב הנוכחי בחלק העליון של העמוד.

חיווי מצב ב-Token Inspector
בחר את רכיב הקוד שברצונך לשנות את המראה שלו.

Token Inspector ידגיש את הבורר.
(אופציונלי) ניתן גם לבחור בורר בודד כדי לראות אילו רכיבי קודים בקובץ הקודים מושפעים מבורר זה.
רשום לפניך את הבוררים שברצונך לערוך ולעדכן וסגור את Token Inspector.