自定义代码颜色

上次更新日期： 2021年4月29日

Dreamweaver

打开应用程序

了解如何在 Dreamweaver 中自定义代码注释等代码元素的颜色（代码着色）。

在 Dreamweaver 中，您可以使用“编辑”>“首选参数”>“界面”来更改界面颜色首选参数。

您可以选择四种不同的颜色主题，并选择浅色或深色的代码主题。

设置颜色和代码主题后，您可以在 Dreamweaver 中通过编辑内置的 main.less 文件中的选择器，来对代码颜色进行进一步的个性化设置。

设置颜色主题和代码主题

启动 Dreamweaver 时，您可以根据自己的偏好选择颜色主题。您也可以随时更改此首选参数。

选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
从左侧的“类别”列表中选择“界面”。
从颜色主题列表中选择主题。
设置界面主题后，请设置代码主题。

您可以选择浅色代码主题或深色代码主题。然后，您可以用新名称保存此主题并对其进行进一步的自定义。

默认代码主题
单击“应用”保存更改。

自定义代码主题

选择某个代码主题后，请用新名称保存该代码主题并对其进行编辑以自定义代码颜色。

选择“编辑”>“首选参数”(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文档进行更改。

转至文件末尾，直到您看到以下注释：

/* 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 会将所有打开的文档中的代码视图刷新为新的颜色。

注意:

如果您的更改中有任何语法错误或未定义的变量，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

编辑 package.json 文件
打开 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 {
    /* 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	实体名称，例如	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实用程序包含以下部分：
- 代码编辑器、
- 一个用于更改模式的选项以及
- 右侧的选择器列表。
使用 Token Inspector 了解选择器

A. 代码编辑器 B. “更改模式”选项 C. 选择器列表
复制文件的内容并将其粘贴到代码编辑器中。
键入文件扩展名并单击“更改模式”即可更改文件的模式。

例如，如果文件是 HTML 文件，则应将文件扩展名更改为 html。页面将会更新以反映模式更改，并会在页面顶部指明当前模式。

Token Inspector 中的模式指示
选择需要修改外观的代码元素。

然后，Token Inspector会突出显示对应的选择器。
（可选）您也可以选择单个选择器来查看代码文件中哪些代码元素会受到该选择器的影响。
记下要编辑和更新的选择器，然后关闭Token Inspector。

更快、更轻松地获得帮助

新用户？