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

相关文章推荐

干练的煎饼果子 · 本市首座地下立交桥建设正酣——土桥立交“变形 ...· 5 月前 ·

玩足球的炒粉 · 《幸福三重奏》大S问"送命题&qu ...· 6 月前 ·

深沉的金鱼 · 理财平台爆发式增长八成受访者认为投资必须警惕 ...· 1 年前 ·

温柔的楼梯 · 硅谷大公司校友势力排行榜| ...· 2 年前 ·

大鼻子的大熊猫 · 妇产科_苏州大学附属第二医院_苏大附二院· 2 年前 ·

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.

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.

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.

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; }

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;}

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{}:

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

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.

.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

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.