Learn how you can customize the colors of your code elements in Dreamweaver.

Customize code coloring

Išči
Adobe Dreamweaver Navodila za uporabo

Na tej strani

Velja za: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Learn how you can customize the colors of your code elements (code coloring) such as code comments in Dreamweaver.

In Dreamweaver, you can change your interface color preferences using Edit > Preferences > Interface.

You can choose between four different color themes, and select a light or dark code theme. 

After you set your color and code theme, you can further personalize your code colors in Dreamweaver by editing the selectors in the in-built main.less file.

Set color themes and code themes

You can choose a color theme according to your preferences when you start Dreamweaver. You can also change this preference any time.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

  2. Select Interface from the Category list on the left.

  3. Choose a theme from the Color Themes list. 

  4. After setting the interface theme, set the code theme.

    You can choose between a light or dark code theme. You can then save this theme with a new name and customize it further.

    Default code themes
    Default code themes

  5. Click Apply to save the changes.

Customize code themes

After selecting a code theme, customize the code colors by saving the code theme with a new name and editing it.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

  2. Select a light or dark code theme, then click the plus icon, and save the theme with a new name.

    Opomba:

    The default light and dark code themes are not editable, so you have to make changes to a copy of this theme. New themes that you create can be edited always.

    Creating a new theme
    Creating a new theme

  3. Save the default code theme with a new name.

    Creating a code theme based off a default code theme
    Creating a code theme based off a default code theme

  4. Select the newly created code theme, and click the Edit icon.

    The main.less file opens in Dreamweaver, and you can now edit the selectors in the theme to customize your code colors.

    The Code view refreshes with the new colors when you save the main.less file.

Edit selectors in the main.less file

Before you jump into editing the selectors in the main.less file, take a few minutes to read through the comments and instructions within the theme file. If you are still not sure which selector to edit, refer the following resources:

  • Understanding selectors - Reference tables providing information on the code elements that are impacted by a particular selector
  • Use the Token Inspector - Use the Token Inspector to "inspect" a particular file and highlight the code elements impacted by a particular selector.
  • If you want to edit the code colors for comments, or adjust the highlighting color of paired tags, see the example code snippets listed in Code customization examples.

Now that you know the selectors that you need to edit, make the changes to the main.less file.

  1. Go to the end of the file until you see the following comment:

    /* Custom code colors or overrides should start after this line */

  2. Type in the selectors for the code elements whose colors you want to edit. Use syntax similar to the following example:

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

    Opomba:

    If you have multiple code languages within a single file, and you want to be able
    to distinguish each language with its own code colors, see Customize code colors for mixed code files.

  3. Group multiple selectors if you want to assign the same color for multiple elements. In the following example, multiple selectors separated by commas, are assigned a single color.

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

  4. To make code coloring customization specific to a file type, enclose the code element selectors within the file type selector as shown in the following example:

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

  5. After making your changes, save the file.

    Dreamweaver refreshes the Code view in all open documents with the new colors.

Opomba:

If there are any syntax errors or undefined variables in your changes, Dreamweaver does not load the custom code changes you have made, and instead reverts to the default Dark code theme.

Customize code colors for mixed code files

If you are working with mixed mode files (one file containing different coding languages) such as HTML/CSS, or HTML/PHP, or HTML/JavaScript, then you can customize code colors in the following way:

  1. Create a custom code theme following the instructions in Customize code themes. Select the new theme and apply it.

  2. Quit Dreamweaver.

  3. Open package.json in a text editor.

    On Windows: %appdata%\Adobe\Dreamweaver CC 2017\en_US\Configuration\Brackets\extensions\user\\

    On Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Brackets/extensions/user//

    Add the following line in theme{}: 

    "addModeClass": true

    Editing the package.json file
    Editing the package.json file

  4. Open Dreamweaver, select Edit > Preferences > Interface, select the new theme, and click the Edit icon.

  5. Add mode specific styles at the end of the main.less file.

    Use the selectors listed in the following table to edit code colors for the corresponding file type.

    Selector Code file type
    .cm-m-clike PHP
    .cm-m-css CSS, Less
    .cm-m-javascript JavaScript
    .cm-m-xml HTML, XML

    For example, to customize the code colors for tag names in CSS and style tags within HTML or PHP, use the following syntax:

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

  6. Save the main.less file. 

    The code color changes are now reflected in your code files.

Code customization examples

Review the following examples to understand how you can customize code colors for different scenarios.

Adjust the color of the highlighting of paired tags

In the main.less file, search for the following code snippet and adjust the color.

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

Opomba:

This code snippet is theme dependent. It may not be present in all themes.

Adjust the color of code comments

In the main.less file, search for the following code snippet and adjust the color.

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

Understanding selectors

To change the colors of your code elements, edit the properties of the selectors in the main.less file.

However, before you jump into modifying the selectors in main.less file, it is important to know what the different selectors mean, and the code elements they impact. Review the following table to understand the code elements in HTML, CSS, JavaScript, and PHP files that are impacted by these selectors.

You can also use the Token Inspector to understand the code elements that are impacted by a particular selector.

Selectors HTML CSS JavaScript PHP
.cm-atom  Entity names such as   Color in hexadecimal, RGB, or HSL format, predefined attribute values such as strong, none, auto, inherit, and so on. true, false, null, undefined, NaN, Infinity True, False, Null and magic constants such as __LINE__, __DIR__, and so on
.cm-attribute  Attribute Name Media types such as all, braille, print, screen, and so on    
.cm-bracket Tag brackets such as <, >, /> and </      
.cm-builtin    ID selector   Built-in functions such as htmlspecialchars, trim, substr, and so on
.cm-comment  Comment Comment Comment Comments
.cm-def    "@ rule" variable, function definition and function parameter  The function name in function definition 
.cm-error  Closing tags without a starting tag
Missing a quotation for a attribute value		 Error because of missing  { or } brackets or missing quotes for a property value or unrecognized property    
.cm-keyword    Color names, !important, keywords in @media like and, only, and so on. Control structure keywords (if, else, …), in, of, from, default, public, private, and so on Keywords like function, if, else, new, echo, isset, and so on
.cm-meta  <!DOCTYPE> Declaration Browser specific prefixes such as -webkit-, -o-, and so on Ellipsis in spread syntax. Example: myFunction(...iterableObj); <!DOCTYPE> Decleration and PHP start and end tags: <?php, ?>
.cm-number    Any number with or without a unit Any number like 12, 2.1, 123e-5, 0x11, 0b11, 0o11, and so on Any number like 12, 2.1, 0x11, 0b11, 0123, 5.0E+19, and so on.
.cm-operator      Operators: +, -, *, +=, !==, &&, >>>, and so on Operators like ===, &&, !, =>, +, -, and so on
.cm-property    Property name Object property or method  
.cm-qualifier    Class selector    
.cm-string  attribute value Regular string, like one passed to a url() call, font name within quotes, and so on. Literal string Literal string
.cm-string-2    Non standard properties like scrollbar-arrow-color, scrollbar-base-color, and so on. Regular expressions  
.cm-tag  Tag name Tag selector    
.cm-variable    Font names without quotes Global variables/functions, class references User defined function names, interface/class references, class properties, casts, 
.cm-variable-2    Custom properties such as main-bg-color Scoped variables/functions references User defined and predefined variables, parameters or attributes
.cm-variable-3   Pseudo-classes such as :hover, and :focus, and pseudo-elements such as ::first-letter, ::selection, and so on    

The following table indicates the Dreamweaver templates and libraries that are affected by the selectors in the main.less file.

Selector Templates (DWT) Library (LBI)
.cm-templateComment Template comments  
.cm-templateAttrVal Attribute values in template comments  
.cm-instanceParam InstanceParam comment and attribute  
.cm-instanceParamAttrVal InstanceParam attribute values  
.cm-libraryItem   Inserted Libraries in a document. Example: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

The following table indicates the selectors to be used when customizing code colors for scenarios where multiple languages exist in a single file.

Selector Code file type
.cm-m-clike PHP
.cm-m-css CSS, Less
.cm-m-javascript JavaScript
.cm-m-xml HTML, XML

Use the Token Inspector

To learn how the selectors in the main.less theme file affect code elements in code files (other than HTML, CSS, JavaScript, and PHP), use the Token Inspector.

  1. Open the Token Inspector using Google Chrome.

    The TokenInspector utility consists of these sections:

    • Code editor, 
    • An option to change modes, and 
    • A list of selectors on the right.
    Using the Token Inspector to understand the selectors
    Using the Token Inspector to understand the selectors

    A. Code Editor B. Change Mode option C. List of selectors 

  2. Copy and paste the contents of a file into the Code Editor.

  3. Change the mode of the file by typing in the filename extension and clicking Change mode.

    For example, if it is an HTML file, then change the filename extension to html. The page updates to reflect the change in mode and states the current mode at the top of the page.

    Mode indication in the Token Inspector
    Mode indication in the Token Inspector

  4. Select the code element whose appearance you want to modify.

    The Token Inspector then highlights the selector.

  5. (Optional) You can also select an individual selector to see what code elements in your code file are affected by that selector.

  6. Note down the selectors that you want to edit and update and close the Token Inspector.

Več podobnih