选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
上次更新日期：
2024年4月25日
了解如何在 Dreamweaver 中自定义代码注释等代码元素的颜色（代码着色）。
在 Dreamweaver 中，您可以使用“编辑”>“首选参数”>“界面”来更改界面颜色首选参数。
您可以选择四种不同的颜色主题，并选择浅色或深色的代码主题。
设置颜色和代码主题后，您可以在 Dreamweaver 中通过编辑内置的 main.less 文件中的选择器，来对代码颜色进行进一步的个性化设置。
设置颜色主题和代码主题
启动 Dreamweaver 时，您可以根据自己的偏好选择颜色主题。 您也可以随时更改此首选参数。
从左侧的“类别”列表中选择“界面”。
从“颜色主题”列表中选择主题。
设置界面主题后，请设置代码主题。
您可以选择浅色代码主题或深色代码主题。 然后，您可以用新名称保存此主题并对其进行进一步的自定义。
单击“应用”保存更改。
自定义代码主题
选择某个代码主题后，请用新名称保存该代码主题并对其进行编辑以自定义代码颜色。
选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
选择一个浅色代码主题或深色代码主题，然后单击加号图标，并用新名称保存该主题。
注释
默认的浅色代码主题和深色代码主题是不可编辑的，因此您必须更改此主题的副本。 您创建的新主题始终可以编辑。
用新名称保存默认代码主题。
选择新创建的代码主题，然后单击“编辑”图标。
Dreamweaver 会打开 main.less 文件，您现在可以通过编辑主题中的选择器来自定义代码颜色。
当您保存 main.less 文件时，代码视图将刷新为新的颜色。
编辑 main.less 文件中的选择器
在您开始编辑 main.less 文件中的选择器之前，请花费数分钟通读主题文件中的备注与指示。 若您仍不确定需编辑的选择器，参见下列源：
- Understanding selectors — 参考表，提供受特定选择器影响的代码元素的信息。
- Use the Token Inspector — 使用Token Inspector 以“检查”特定的文档并突出受特定选择器影响的代码元素。
- 若您想要编辑备注的代码颜色或调整成对标签的突出颜色，参见列于 Code customization examples中的代码片段示例。
现在您已经了解了需要编辑的选择器，可对main.less文档进行更改。
转至文件末尾，直到您看到以下注释：
/* 自定义代码颜色或重写项应从此行后开始 */
键入要编辑颜色的代码元素的选择器。 使用类似于以下示例的语法：
.cm-tag {color: #00D0D0; }
注释
如果您在单个文件中有多种代码语言，并且希望能够
用各自的代码颜色区分每种语言，请参阅为混合代码文件自定义代码颜色。
如果要为多个元素分配相同颜色，请将多个选择器组合在一起。 在以下示例中，为用逗号分隔的多个选择器分配了同一种颜色。
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
要进行特定于某个文件类型的代码颜色自定义，请在文件类型选择器中包含代码元素选择器，如以下示例中所示：
.HTML{
.cm-tag{ color: #00D0D0;}
}
在进行更改后，保存文件。
Dreamweaver 会将所有打开的文档中的代码视图刷新为新的颜色。
注释
如果您的更改中有任何语法错误或未定义的变量，Dreamweaver 将不会加载您所做的自定义代码更改，而是还原到默认的深色代码主题。
自定义混合代码文件的代码颜色
如果使用混合模式文件（一个文件中包含多种编码语言，如 HTML/CSS、HTML/PHP 或 HTML/JavaScript），那么您可以通过以下方式自定义代码颜色：
按照自定义代码主题中的说明创建一个自定义代码主题。 选择新主题并应用该主题。
退出 Dreamweaver.
在文本编辑器中打开 package.json。
在 Windows 中：%appdata%\Adobe\Dreamweaver CC 2017\zh_CN\Configuration\Brackets\extensions\user\\
在 Mac 中：~/Library/Application Support/Adobe/Dreamweaver CC 2017/zh_CN/Configuration/Brackets/extensions/user//
在主题 {} 中添加以下行：
"addModeClass": true
打开 Dreamweaver，选择“编辑”>“首选参数”>“界面”，选择新主题，然后单击“编辑”图标。
在 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 {
/* 确保在灰色内联编辑器背景下的可见性 */
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 | 实体名称，如 | Hex/RGB 或 HSL格式的颜色，预定义属性值（例如 strong、none、auto、inherit 等）。 | true、false、null、undefined、NaN、Infinity | True、False、Null 和魔术常量，例如 __LINE__、__DIR__ 等。 |
| .cm-attribute | 属性名称 | 媒体类型，例如全部、盲文、打印、屏幕等 | ||
| .cm-bracket | 标签括号，例如 <、>、/> 和 </ | |||
| .cm-builtin | ID 选择器 | 内置函数，例如 htmlspecialchars、trim、substr 等 | ||
| .cm-comment | 注释 | 注释 | 注释 | 注释 |
| .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-等 | spread 语法中的省略号。 示例：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 等） |
下表显示受 main.less 文件中的选择器影响的 Dreamweaver 模板和库。
|
选择器 |
模板 (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。
使用Google Chrome 打开 Token Inspector。
Token Inspector 实用程序包含以下部分：
- 代码编辑器、
- 一个用于更改模式的选项以及
- 右侧的选择器列表。
A. 代码编辑器 B. “更改模式”选项 C. 选择器列表
复制文件的内容并将其粘贴到代码编辑器中。
键入文件扩展名并单击“更改模式”即可更改文件的模式。
例如，如果文件是 HTML 文件，则应将文件扩展名更改为 html。 页面将会更新以反映模式更改，并会在页面顶部指明当前模式。
选择需要修改外观的代码元素。
然后，Token Inspector 会突出显示对应的选择器。
（可选）您也可以选择单个选择器来查看代码文件中哪些代码元素会受到该选择器的影响。
记下要编辑和更新的选择器，然后关闭 Token Inspector。
