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

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

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

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

關於 Dreamweaver CC 2017 中的程式碼色彩標示

Dreamweaver CC 2017 中的程式碼色彩標示是由 main.less 主題檔案中的選取器所控制。

若要自訂 Dreamweaver CC 2017 中的程式碼色彩標示,請執行下列動作:

  1. 在 Dreamweaver 中設定預設的顏色和程式碼主題偏好設定。 
  2. 使用現有的程式碼主題做為基礎,建立程式碼主題。
  3. 編輯新的程式碼主題。
  4. 了解您需要修改的選取器,以及該選取器對於其他程式碼元素的影響。
  5. 在 main.less 主題檔案中編輯選取器並且儲存您的變更。

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

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

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。

  2. 從左邊的「類別」清單選取「介面」。

  3. 從「顏色主題」清單選擇主題。 

  4. 設定介面主題後,設定程式碼主題。

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

    預設程式碼主題
    預設程式碼主題

  5. 按一下「套用」以儲存變更。

自訂程式碼主題

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

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。

  2. 選取淺色或深色程式碼主題,然後按一下加號圖示,並且使用新的名稱來儲存主題。

    註解:

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

    複製主題並進行編輯
    複製主題並進行編輯

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

    根據預設程式碼主題建立程式碼主題
    根據預設程式碼主題建立程式碼主題

  4. 選取新建立的程式碼主題,然後按一下「編輯」圖示。

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

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

了解選取器

若要變更程式碼元素的顏色,請在 main.less 檔案中編輯選取器的屬性。

不過,在您進入 main.less 檔案中修改選取器之前,請務必先了解各種選取器所代表的意義,以及其所影響的程式碼元素。請檢閱下表以了解 HTML、CSS、JavaScript 和 PHP 檔案中受這些選取器所影響的程式碼元素。

選取器 HTML CSS JavaScript PHP
.cm-atom  實體名稱,例如   採用 Hex、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; }

了解選取器如何影響其他程式碼檔案

若要了解 main.less 主題檔案中的選取器如何影響程式碼檔案 (HTML、CSS、JavaScript 和 PHP 以外) 中的程式碼元素,請下載並使用 Token Inspector。

下載

  1. 下載並解壓縮 Token Inspector。

  2. 使用 Google Chrome,瀏覽並開啟 TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html 檔案。

    TokenInspector 公用程式由以下幾個部分構成:

    • 程式碼編輯器
    • 變更模式的選項
    • 右側的選取器清單
    使用 Token Inspector 了解選取器
    使用 Token Inspector 了解選取器

    A. 程式碼編輯器 B. 變更模式選項 C. 選取器的清單 
  3. 將檔案的內容複製並貼到程式碼編輯器中。

  4. 輸入副檔名,然後按一下「變更模式」(Change mode) 以變更檔案的模式。

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

    Token Inspector 中的模式指示
    Token Inspector 中的模式指示

  5. 選取您想要修改其外觀的程式碼元素。

    Token Inspector 便會標示該選取器。

  6. (選擇性) 您也可以選取個別的選取器,看看程式碼檔案中的哪些程式碼元素會受到該選取器影響。

  7. 記下您想要編輯和更新的選取器,然後關閉 Token Inspector

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

在知道您需要編輯的選取器後,您就可以開始在 main.less 檔案中進行變更了。

  1. 前往檔案結尾,直到您看見下列註解為止:

    /* Custom code colors or overrides should start after this line */ (自訂程式碼顏色或覆寫應該在這一行之後開始)

  2. 針對您想要編輯顏色的程式碼元素,輸入選取器。請使用類似下列範例的語法:

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

  3. 如果您想要針對多個元素指派相同的顏色,請將多個選取器組成群組。在下列範例中,以逗號分隔的多個選取器會被指派單一顏色。

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

  4. 若要將程式碼色彩標示自訂設為某個檔案類型專用,請用括號括住該檔案類型選取器中的程式碼元素選取器,如下列範例所示:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. 在完成變更後,請儲存檔案。

    Dreamweaver 就會使用新的顏色來重新整理所有已開啟文件中的「程式碼」檢視。

註解:

如果您的變更有任何語法錯誤或未定義的變數,Dreamweaver 不會載入您已進行的自訂程式碼變更,而是回復成預設的深色程式碼主題。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策