使用手冊取消

自訂程式碼色彩標示

搜尋

上次更新時間 2021年4月29日

Dreamweaver

開啟應用程式

了解如何在 Dreamweaver 中自訂程式碼元素的顏色 (程式碼色彩標示)，例如程式碼註解。

在 Dreamweaver 中，您可以使用「編輯 > 偏好設定 > 介面」，變更介面顏色偏好設定。

您可以在 4 種不同的顏色主題中選擇，並且可選擇淺色或深色程式碼主題。

設定顏色和程式碼主題之後，您可以在內建的 main.less 檔案中編輯選取器，藉此將 Dreamweaver 中的程式碼顏色進一步個人化。

設定顏色主題和程式碼主題

啟動 Dreamweaver 時，您可以根據自己的偏好選擇顏色主題。您也可以隨時變更這個偏好設定。

選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
從左邊的「類別」清單選取「介面」。
從「顏色主題」清單選擇主題。
設定介面主題後，設定程式碼主題。

您可以選擇淺色或深色程式碼主題。然後，您可以使用新的名稱來儲存這個主題並進一步自訂。

預設程式碼主題
按一下「套用」以儲存變更。

自訂程式碼主題

選取程式碼主題之後，使用新的名稱來儲存程式碼主題並進行編輯，藉以自訂程式碼顏色。

選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
選取淺色或深色程式碼主題，然後按一下加號圖示，並且使用新的名稱來儲存主題。

註解：

預設的淺色和深色程式碼主題無法編輯，因此您必須對這個主題的複本進行變更。您所建立的新主題永遠都可編輯。

建立新主題
使用新的名稱來儲存預設程式碼主題。

根據預設程式碼主題建立程式碼主題
選取新建立的程式碼主題，然後按一下「編輯」圖示。

main.less 檔案會在 Dreamweaver 中開啟，然後您就可以編輯主題中的選取器以自訂您的程式碼顏色。

當您儲存 main.less 檔案之後，「程式碼」檢視就會使用新的顏色重新整理。

在 main.less 檔案中編輯選取器

請先花點時間閱讀主題檔案中的註解和指示，然後再開始編輯 main.less 檔案中的選取器。如果您仍然不確定要編輯哪個選取器，請參考下列資源：

了解選取器 - 參考表格，提供特定選取器所影響之程式碼元素的資訊。
使用 Token Inspector - 使用 Token Inspector「檢查」特定檔案，並反白顯示特定選取器所影響的程式碼元素。
如果您要編輯註解的程式碼顏色，或調整成對標籤的反白顯示顏色，請參閱「程式碼自訂範例」中列出的範例程式碼片段。

現在您知道需要編輯的選取器，就可以開始在 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_TW\Configuration\Brackets\extensions\user\\

在 Mac 上： ~/Library/Application Support/Adobe/Dreamweaver CC 2017/zh_TW/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	實體名稱，例如	採用十六進位、RGB 或 HSL 格式的顏色、預先定義的屬性值，例如 strong、none、auto、inherit 等等。	true、false、null、undefined、NaN、Infinity	True、False、Null 和魔術常數 (magic constants)，例如 __LINE__、__DIR__ 等等
.cm-attribute	屬性名稱	媒體類型，例如 all、braille、print、screen 等等
.cm-bracket	標籤括號，例如 <、>、/> 和 </
.cm-builtin		ID 選取器		內建函式，例如 htmlspecialchars、trim、substr 等等
.cm-comment	註解	註解	註解	註解
.cm-def		"@ 規則"	變數、函式定義和函式參數	函式定義中的函式名稱
.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 等等

下表指出 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。
TokenInspector 公用程式由以下幾個部分構成：
- 程式碼編輯器
- 變更模式的選項
- 右側的選取器清單
使用 Token Inspector 了解選取器

A. 程式碼編輯器 B. 變更模式選項 C. 選取器的清單
將檔案的內容複製並貼到程式碼編輯器中。
輸入副檔名，然後按一下「變更模式」(Change mode) 以變更檔案的模式。

例如，如果它是 HTML 檔案，請將副檔名變更為 html。此頁面便會更新以反映模式的變更，並且會在頁面的頂端指示目前的模式。

Token Inspector 中的模式指示
選取您想要修改其外觀的程式碼元素。

Token Inspector 便會標示該選取器。
(選擇性) 您也可以選取個別的選取器，看看程式碼檔案中的哪些程式碼元素會受到該選取器影響。
記下您想要編輯和更新的選取器，然後關閉 Token Inspector。