Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
Последнее обновление
25 апр. 2024 г.
Узнайте, как настроить цвета элементов кода (цветовое оформление кода, например комментарии кода) в Dreamweaver.
Чтобы изменить параметры цветового оформления интерфейса в Dreamweaver, выберите «Правка» > «Установки» > «Интерфейс».
Можно выбрать одну из четырех цветовых тем, а также светлую или темную тему кода.
После установки цветовой темы и темы кода можно дальше персонализировать цвета кода в Dreamweaver, редактируя селекторы во встроенном файле main.less.
Установка цветовых тем и тем кода
Можно выбрать цветовую тему в соответствии с настроенными параметрами при запуске Dreamweaver. Можно также изменить эту настройку в любое время.
В списке категорий слева выберите «Интерфейс».
Выберите тему из списка цветовых тем.
После настройки темы интерфейса задайте тему кода.
Можно выбрать светлую или темную тему кода. Затем можно сохранить эту тему с новым именем и настроить ее дальше.
Нажмите кнопку «Применить», чтобы сохранить изменения.
Настройка тем кода
После выбора темы кода настройте цвета кода, сохранив тему кода с новым именем и отредактировав ее.
Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
Выберите темную или светлую тему кода, а затем щелкните значок «плюс» и сохраните тему с новым именем.
Примечание
Стандартные светлую и темную темы кода нельзя редактировать, поэтому необходимо внести изменения в копию этой темы. Новые создаваемые темы можно свободно редактировать.
Сохраните стандартную тему кода с новым именем.
Выберите новую созданную тему кода и щелкните значок «Правка».
Файл main.less откроется в Dreamweaver, и можно будет отредактировать селекторы в теме, чтобы настроить цвета кода.
Новые цвета установятся в представлении кода при сохранении файла main.less.
Редактирование селекторов в файле main.less
Прежде чем начать редактирование селекторов в файле main.less file, посвятите несколько минут ознакомлению с комментариями и инструкциями в файле темы. Если вы не знаете точно, какой селектор нужно отредактировать, ознакомьтесь со следующими ресурсами.
- Общие сведения о селекторах — справочные таблицы, содержащие информацию об элементах кода, затрагиваемых определенным селектором.
- Использование Token Inspector — Token Inspector служит для проверки отдельного файла и выделения элементов кода, затрагиваемых определенным селектором.
- Если нужно изменить цветовое оформление кода для комментариев или настроить цвет выделения для парных тегов, см. примеры кода, представленные в разделе Примеры настройки кода.
Теперь, когда известно, какие селекторы нужно отредактировать, внесите изменения в файл 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\ru_RU\Configuration\Brackets\extensions\user\\
В Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/ru_RU/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 | Селектор идентификатора | Встроенные функции, например «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 и т. д. |
В следующей таблице представлены шаблоны и библиотеки Dreamweaver, на которые влияют селекторы в файле main.less.
|
Селектор |
Шаблоны (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.
Откройте Token Inspector с помощью Google Chrome.
Программа TokenInspector включает следующие разделы:
- редактор кода,
- команда изменения режимов и
- список селекторов справа.
A. Редактор кода B. Команда изменения режима C. Список селекторов
Скопируйте и вставьте содержимое файла в редактор кода.
Чтобы изменить режим файла, введите расширение файла и нажмите кнопку Change mode (Изменить режим).
Например, если это HTML-файл, измените расширение имени файла на html. Страница обновится, чтобы отразить изменение режима, и текущий режим установится в верхней части страницы.
Выберите элемент кода, внешний вид которого нужно изменить.
После этого Token Inspector выделит селектор.
Кроме того, можно выбрать отдельный селектор, чтобы увидеть, на какие элементы кода в файле кода он влияет (необязательно).
Запишите селекторы, которые нужно отредактировать и обновить, и закройте Token Inspector.
Связанные материалы
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
