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.

Sobre a codificação por cores no Dreamweaver CC 2017

A codificação por cores no Dreamweaver CC 2017 é controlada pelos seletores presentes no arquivo de tema main.less.

Para personalizar a codificação por cores no Dreamweaver CC 2017, faça o seguinte:

  1. Defina sua cor padrão e as preferências do tema de cores no Dreamweaver. 
  2. Crie um tema de código usando um código existente como base.
  3. Edite o novo tema de código.
  4. Entenda os seletores que você precisa modificar e seu impacto em outros elementos de código.
  5. Edite os seletores no arquivo de tema main.less e salve as alterações.

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.

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).

  2. Selecione Interface na lista Categoria à esquerda.

  3. Escolha um tema na lista Temas de cores. 

  4. 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
    Temas de código padrão

  5. 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.

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).

  2. 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.

    Copiar um tema e editá-lo
    Copiar um tema e editá-lo

  3. 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
    Criar um tema de código baseado em um tema de código padrão

  4. 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.

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.

Seletores HTML CSS JavaScript PHP
.cm-atom  Nomes de entidades, como   Cor 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  Fechar tags sem uma tag inicial
Aspas ausentes em um valor de atributo
Erro devido a ausência de brackets { or } ou aspas em um valor de propriedade ou nome de propriedade não reconhecido    
.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 etc Palavras-chave, como function, if, else, new, echo, isset etc
.cm-meta  <!DOCTYPE> Declaração Prefixos específicos do navegador, como -webkit-, -o- etc 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 etc Qualquer número, como 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 etc
.cm-operator      Operadores: +, -, *, +=, !==, &&, >>> etc Operadores, como ===, &&, !, =>, +, - etc
.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, :focus etc e pseudo-elementos, como ::first-letter, ::selection etc    

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

Classe 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; }

Como os seletores afetam outros arquivos de código

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), baixe e use o Token Inspector.

Download

  1. Baixe e descompacte o Token Inspector.

  2. Acesse e abra o arquivo TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html 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
    Usar o Token Inspector para entender os seletores

    A. Editor de código B. Opção Alternar modo C. Lista de seletores 
  3. Copie e cole o conteúdo de um arquivo no Editor de código.

  4. 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
    Indicação de modo no Token Inspector

  5. Selecione o elemento de código cuja aparência você deseja modificar.

    O Token Inspector destaca o seletor.

  6. (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.

  7. Anote os seletores que você deseja editar e atualizar e feche o Token Inspector.

Editar seletores no arquivo main.less

Agora que você conhece os seletores que precisa editar, pode fazer as alterações no arquivo main.less.

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

    /* Custom code colors or overrides should start after this line */

  2. 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; }

  3. 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;}

  4. 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;}
    }
  5. 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.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online