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

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

הכרת הבוררים

כדי לשנות את הצבעים של רכיבי הקוד, ערוך את מאפייני הבוררים בקובץ 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 וערכים קבועים מסוג 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; }‎

להבין כיצד בוררים משפיעים על קובצי קודים אחרים

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

  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 לא יטען את השינויים שערכת בקוד המותאם אישית, אלא יגדיר מחדש את ערכת הנושא הכהה של הקוד המוגדרת כברירת מחדל.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת