Guia do Usuário Cancelar

Personalizar a codificação por cores

Pesquisar

Última atualização em 13 de fev de 2023

Saiba como personalizar as cores de seus elementos de código (codificação por cores), como os comentários, no Dreamweaver.

No Dreamweaver, você pode alterar as preferências de cor da interface em Editar > Preferências > Interface.

Você pode escolher entre quatro temas de cor diferentes e um tema de código claro ou escuro.

Após configurar seu tema de cores e de código, personalize as cores do código no Dreamweaver editando os seletores no arquivo main.less.

Definir temas de cores e temas de código

Você pode escolher um tema de cores de acordo com as suas preferências ao iniciar o Dreamweaver. Você também pode alterar essa preferência a qualquer momento.

Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (macOS).
Selecione Interface na lista Categoria à esquerda.
Escolha um tema na lista Temas de cores.
Após definir o tema da interface, defina o tema do código.

Você pode escolher um tema de código claro ou escuro. Depois, salve o tema com um novo nome e personalize-o ainda mais.

Temas de código padrão
Clique em Aplicar para salvar as alterações.

Personalizar temas de código

Após selecionar um tema de código, personalize as cores do código salvando-o com um novo nome e editando-o.

Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (macOS).
Selecione um tema claro ou escuro, clique no ícone de adição e salve o tema com um novo nome.

Observação:

Os temas padrão claro e escuro não são editáveis, portanto, faça alterações em uma cópia destes temas. Os novos temas que você cria podem ser editados sempre.

Criar um tema
Salve o tema de código padrão com um novo nome.

Criar um tema de código baseado em um tema de código padrão
Selecione o tema de código recém-criado e clique no ícone Editar.

O arquivo main.less é aberto no Dreamweaver e você pode editar os seletores no tema para personalizar as cores do código.

A Visualização de código é atualizada com as novas cores assim que você salvar o arquivo main.less.

Editar seletores no arquivo main.less

Antes de ir para a seção Editar seletores no arquivo main.less, dedique alguns minutos para ler os comentários e instruções no arquivo de tema. Se ainda não tiver certeza sobre qual seletor editar, consulte os seguintes recursos:

Compreender seletores – tabelas de referência que fornecem informações sobre os elementos de código impactados por um seletor específico
Usar o Token Inspector – use o Token Inspector para “inspecionar” um arquivo específico e realçar os elementos de código impactados por um seletor específico.
Se quiser editar as cores de código dos comentários ou ajustar a cor do realce em tags emparelhadas, consulte os exemplos de snippets de código listados em Exemplos de personalização de código.

Agora que você sabe quais seletores precisa editar, faça as alterações no arquivo main.less.

Vá até o final do arquivo até encontrar o comentário a seguir:

/* Custom code colors or overrides should start after this line */
Insira os seletores dos elementos de códigos para os quais você deseja editar as cores. Use uma sintaxe similar a do exemplo a seguir:

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

Observação:

Se um único arquivo tiver várias linguagens de programação e você quiser
distinguir cada linguagem pelas cores de código, consulte Personalizar cores de código em arquivos de código misto.
Agrupe vários seletores se desejar atribuir a mesma cor a vários elementos. No exemplo a seguir, uma única cor foi atribuída a vários seletores separados por vírgula.

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
Para deixar a personalização de cores específica para um tipo de arquivo, coloque os seletores dos elementos de códigos dentro do seletor do tipo de arquivo, como mostrado no exemplo a seguir:
```
.HTML{
.cm-tag{ color: #00D0D0;}
}
```
Após fazer as alterações, salve o arquivo.

O Dreamweaver atualiza a Visualização de código em todos os documentos abertos com as novas cores.

Observação:

Se houver erros de sintaxe ou variáveis indefinidas em suas alterações, o Dreamweaver não carrega as alterações do código personalizado e o reverte para o tema de código padrão escuro.

Personalizar cores de código em arquivos de código misto

Se estiver trabalhando com arquivos em modo misto (um arquivo contendo linguagens de programação diferentes) como HTML/CSS, HTML/PHP ou HTML/JavaScript, você pode personalizar as cores do código da seguinte maneira:

Crie um tema de código personalizado seguindo as instruções em Personalizar temas de código. Selecione o novo tema e aplique-o.
Saia do Dreamweaver.
Abra o package.json em um editor de texto.

No Windows: %appdata%\Adobe\Dreamweaver CC 2017\pt_BR\Configuration\Brackets\extensions\user\\

No Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/pt_BR/Configuration/Brackets/extensions/user//

Adicione a linha a seguir em theme{}:

"addModeClass": true

Editar o arquivo package.json
Abra o Dreamweaver, selecione Editar > Preferências > Interface, selecione o novo tema e clique no ícone Editar.

Adicione estilos mais específicos no final do arquivo main.less.

Use os seletores listados na tabela a seguir para editar as cores de código no tipo de arquivo correspondente.

Seletor	Tipo de arquivo de código
.cm-m-clike	PHP
.cm-m-css	CSS, Less
.cm-m-javascript	JavaScript
.cm-m-xml	HTML, XML

Por exemplo, para personalizar as cores de código para nomes de tags no CSS e tags de estilo em HTML ou PHP, use a sintaxe a seguir:

.cm-tag {color: #BD46BD;} 
.cm-m-css.cm-tag {color: #38D08B;}

Salve o arquivo main.less.

As alterações das cores de código agora são refletidas nos arquivos de código.

Exemplos de personalização de código

Revise os exemplos a seguir para entender como personalizar as cores do código em diferentes cenários.

Ajustar a cor do realce em tags emparelhadas

No arquivo main.less, procure o seguinte snippet de código e ajuste a cor.

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #B53A3A;
    color: #fff!important;

Observação:

Esse snippet de código é dependente do tema. Pode não estar presente em todos os temas.

Ajustar a cor dos comentários de código

No arquivo main.less, procure o seguinte snippet de código e ajuste a cor.

.cm-comment {color: #717171; font-style: italic;}

Compreender seletores

Para alterar as cores de seus elementos de códigos, edite as propriedades dos seletores no arquivo main.less.

No entanto, antes de você começar a modificar os seletores no arquivo main.less, é importante saber o que significa cada seletor e qual elemento de código ele afeta. Revise a tabela a seguir para entender os elementos de código em HTML, CSS, JavaScript e arquivos PHP que são impactados por esses seletores.

Você também pode usar o Token Inspector para entender quais elementos de código são impactados por um seletor específico.

Seletores	HTML	CSS	JavaScript	PHP
.cm-atom	Nomes de entidades, como	Cores em formato hexadecimal, RGB ou HSL, valores de atributos predefinidos como strong, none, auto, inherit e assim por diante.	true, false, null, undefined, NaN, Infinity	Constantes True, False, Null e magic, como __LINE__, __DIR__ e assim por diante
.cm-attribute	Nome do atributo	Tipos de mídia como all, braille, print, screen e assim por diante
.cm-bracket	Brackets de tag, como <, >, /> e </
.cm-builtin		Seletor de ID		Funções integradas, como htmlspecialchars, trim, substr e assim por diante
.cm-comment	Comentário	Comentário	Comentário	Comentários
.cm-def		"@ rule"	Variável, definição de função e parâmetro de função	O nome da função na definição da função
.cm-error	Tags de finalização sem uma tag de abertura Aspas ausentes em um valor de atributo	Erro devido a ausência de delimitadores {} ou aspas em um valor de propriedade ou propriedade não reconhecida
.cm-keyword		Nomes de cores, palavras-chave importantes em @media, como and, only etc.	Palavras-chave de estruturas de controle (if, else, …), in, of, from, default, public, private e assim por diante	Palavras-chave, como function, if, else, new, echo, isset e assim por diante
.cm-meta	Declaração <!DOCTYPE>	Prefixos específicos do navegador, como -webkit-, -o- e assim por diante	Reticências em sintaxe Spread. Exemplo: myFunction(...iterableObj);	<!DOCTYPE> Declaração e tags PHP de início e fim: <?php, ?>
.cm-number		Qualquer número com ou sem uma unidade	Qualquer número, como 12, 2.1, 123e-5, 0x11, 0b11, 0o11 e assim por diante	Qualquer número, como 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 e assim por diante
.cm-operator			Operadores: +, -, *, +=, !==, &&, >>> e assim por diante	Operadores, como ===, &&, !, =>, +, - e assim por diante
.cm-property		Nome da propriedade	Propriedade ou método de objeto
.cm-qualifier		Seletor de classe
.cm-string	Valor do atributo	String regular, como uma informada em uma chamada url(), nome de fonte entre aspas e assim por diante.	String literal	String literal
.cm-string-2		Propriedades não-padrão, como scrollbar-arrow-color, scrollbar-base-color e assim por diante.	Expressões regulares
.cm-tag	Nome da tag	Seletor de tags
.cm-variable		Nomes de fontes sem aspas	Variáveis/funções globais, referências de classe	Nomes de funções definidas pelo usuário, referências de interface/classe, propriedades de classe, projeções,
.cm-variable-2		Propriedades personalizadas, como main-bg-color	Referências de variáveis/funções de escopo	Variáveis, parâmetros ou atributos predefinidos ou definidos pelo usuário
.cm-variable-3		Pseudo-classes, como :hover e :focus e pseudo-elementos, como ::first-letter, ::selection e assim por diante

A tabela a seguir indica os modelos e bibliotecas do Dreamweaver afetados pelos seletores no arquivo main.less.

Seletor	Modelos (DWT)	Biblioteca (LBI)
.cm-templateComment	Comentários do modelo
.cm-templateAttrVal	Valores de atributo nos comentários do modelo
.cm-instanceParam	Comentário e atributo do InstanceParam
.cm-instanceParamAttrVal	Valor de atributo do InstanceParam
.cm-libraryItem		Bibliotecas inseridas em um documento. Exemplo: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

A tabela a seguir indica quais seletores devem ser usados ao personalizar cores de código em cenários nos quais há várias linguagens em um único arquivo.

Seletor	Tipo de arquivo de código
.cm-m-clike	PHP
.cm-m-css	CSS, Less
.cm-m-javascript	JavaScript
.cm-m-xml	HTML, XML

Usar o Token Inspector

Para saber mais sobre como os seletores no arquivo de tema main.less afetam os elementos de código nos arquivos de código (diferentes de HTML, CSS, JavaScript e PHP), use o Token Inspector.

Abra o Token Inspector usando o Google Chrome.
O utilitário TokenInspector é composto por estas seções:
- Editor de código,
- Uma opção para alternar modos e
- Uma lista de seletores à direita.
Usar o Token Inspector para entender os seletores

A. Editor de código B. Opção Alternar modo C. Lista de seletores
Copie e cole o conteúdo de um arquivo no Editor de código.
Altere o modo do arquivo inserindo a extensão do nome do arquivo e clicando em Alterar modo.

Por exemplo, se for um arquivo HTML, altere a extensão do nome do arquivo para html. A página é atualizada para refletir a alteração no modo e informa o modo atual no topo da página.

Indicação de modo no Token Inspector
Selecione o elemento de código cuja aparência você deseja modificar.

O Token Inspector destaca o seletor.
(Opcional) Você também pode escolher um seletor específico para ver quais elementos de código no arquivo de código são afetados por aquele seletor.
Anote os seletores que você deseja editar e atualizar e feche o Token Inspector.