Meer informatie over het aanpassen van de kleuren van de code-elementen (codekleuren) in Dreamweaver, zoals code-opmerkingen.

In Dreamweaver kunt u de interfacekleuren wijzigen via Bewerken > Voorkeuren > Interface.

U kunt kiezen uit vier verschillende kleurenthema's en een licht of donker codethema selecteren. 

Nadat u de gewenste kleur en het gewenste codethema instelt, kunt u verdere aanpassingen maken in uw codekleuren in Dreamweaver door de kiezers in het geïntegreerde main.less-bestand te bewerken.

Informatie over codekleuren in Dreamweaver CC 2017

De codekleuren in Dreamweaver CC 2017 worden bepaald door de huidige kiezers in het main.less-themabestand.

Om codekleuren in Dreamweaver CC 2017 aan te passen, gaat u als volgt te werk:

  1. Stel de standaardkleur en voorkeuren voor het codethema in in Dreamweaver. 
  2. Maak een codethema op basis van een bestaand codethema.
  3. Bewerk het nieuwe codethema.
  4. Bekijk met welke kiezers u iets kunt wijzigen en hoe die andere code-elementen beïnvloeden.
  5. Bewerk de kiezers in het main.less-themabestand en sla uw wijzigingen op.

Kleurthema's en codethema's instellen

U kunt een kleurenthema dat uw voorkeur heeft, kiezen wanneer u Dreamweaver start. U kunt deze voorkeur ook op elk gewenst moment wijzigen.

  1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

  2. Selecteer Interface in de lijst Categorie aan de linkerkant.

  3. Kies een thema in de lijst met kleurenthema's.  

  4. Nadat u het interfacethema hebt ingesteld, stelt u het codethema in.

    U kunt kiezen tussen een licht of donker codethema. U kunt dit thema vervolgens met een nieuwe naam opslaan en het verder aanpassen.

    Standaard codethema's
    Standaard codethema's

  5. Klik op Toepassen om de wijzigingen op te slaan.

Codethema's aanpassen

Na het selecteren van een codethema, kunt u de codekleuren aanpassen door het codethema met een nieuwe naam op te slaan en het te bewerken.

  1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).

  2. Selecteer een licht of donker codethema, klik vervolgens op het plusteken en sla het thema op met een nieuwe naam.

    Opmerking:

    De standaard lichte en donkere codethema's kunnen niet worden bewerkt. Eventuele wijzigingen moet u daarom aanbrengen in een kopie van het thema. De nieuwe thema's die u maakt, kunnen altijd worden bewerkt.

    Een thema kopiëren en bewerken
    Een thema kopiëren en bewerken

  3. Sla het standaardcodethema op met een nieuwe naam.

    Een codethema maken op basis van een standaardcodethema
    Een codethema maken op basis van een standaardcodethema

  4. Selecteer het nieuwe codethema en klik op het pictogram Bewerken.

    Het main.less-bestand wordt geopend in Dreamweaver en u kunt de kiezers in het thema nu bewerken om uw codekleuren aan te passen.

    De Codeweergave wordt vernieuwd met de nieuwe kleuren wanneer het main.less-bestand opslaat.

Werken met kiezers

Als u de kleuren van uw code-elementen wilt wijzigen, bewerkt u de eigenschappen van de kiezers in het main.less-bestand.

Voordat u echter begint met het wijzigen van de kiezers in het bestand main.less, is het belangrijk om te weten wat de verschillende kiezers inhouden en hoe die de code-elementen beïnvloeden. Raadpleeg de volgende tabel om te zie welke code-elementen in HTML-, CSS-, JavaScript- en PHP-bestanden door deze kiezers worden beïnvloed.

Kiezers HTML CSS JavaScript PHP
.cm-atom  De namen van entiteiten zoals   De kleur in Hex-, rgb- of HSL-indeling, vooraf gedefinieerde kenmerkwaarden zoals strong, none, auto, inherit, enzovoort. true, false, null, undefined, NaN, Infinity True, False, Null en magic-constanten zoals __LINE__, __DIR__, enzovoort
.cm-attribute  Kenmerknaam Mediatypen zoals alles, braille, afdrukken, scherm, enzovoort    
.cm-bracket Taghaakjes zoals <, >, /> en </      
.cm-builtin    ID-kiezer   Geïntegreerde functies zoals htmlspecialchars, trim, substr, enzovoort.
.cm-comment  Commentaar Commentaar Commentaar Commentaren
.cm-def    “@ regel” variabele, functiedefinitie en functieparameter  De functienaam in functiedefinitie 
.cm-error  Afsluitende tags zonder een starttag
Een citaat voor een kenmerkwaarde ontbreekt
Fout wegens ontbrekende {- of }- haakjes of ontbrekende aanhalingstekens voor een eigenschapswaarde of een niet erkende eigenschapsnaam    
.cm-keyword    Kleurnamen, !important, trefwoorden in @media als and, only, enz. Control-structuurtrefwoorden (if, else…), in, of, from, default, public, private, enz. Trefwoorden zoals function, if, else, new, echo, isset, enz.
.cm-meta  <!DOCTYPE> declaratie Browserspecifieke voorvoegsels zoals -webkit, o, enz. Weglatingsteken in gespreide syntaxis. Voorbeeld: myFunction(...iterableObj); <!DOCTYPE> Declaratie en PHP-starttags en afsluitende tags: <?php, ?>
.cm-number    Een getal met of zonder een eenheid Een getal zoals 12, 2.1, 123e-5, 0x11, 0b11, 0o11, enz Een getal zoals 12, 2,1, 0x11, 0b11, 0123, 5.0e+19, enz.
.cm-operator      Operatoren: +, -, *, +=, !==, &&, >>>, enz. Operatoren zoals ===, &&, !, =>, +, -, enz.
.cm-property    Eigenschapsnaam Objecteigenschap of -methode  
.cm-aanduiding    Klassenkiezer    
.cm-string  kenmerkwaarde Standaard tekenreeks, zoals doorgegeven aan een url()-aanroep, lettertypenaam binnen aanhalingstekens, enzovoort. Letterlijke tekenreeks Letterlijke tekenreeks
.cm-string-2    Niet-standaardeigenschappen zoals scrollbar-arrow-color, scrollbar-base-color, enzovoort. Reguliere expressies  
.cm-tag  Tagnaam Tagkiezer    
.cm-variable    Lettertypenamen zonder aanhalingstekens Globale variabelen/functies, klasseverwijzingen De door de gebruiker gedefinieerde functienamen, interface-/klasseverwijzingen, klasseneigenschappen, zwemen,
.cm-variable-2    Aangepaste eigenschappen zoals main-bg-color Scoped-variabelen/functieverwijzingen Door gebruiker gedefinieerde en vooraf gedefinieerde variabelen, parameters of kenmerken
.cm-variable-3   Pseudoklassen als :hover, :focus, enz. en pseudo-elementen zoals ::first-letter, ::selection, enz    

In de volgende tabel staan de Dreamweaver-sjablonen en de bibliotheken die door de kiezers in het main.less-bestand worden beïnvloed.

Klasse Sjablonen(DWT) Bibliotheek(LBI)
.cm-templateComment Sjabloonopmerkingen  
.cm-templateAttrVal Kenmerkwaarden in sjabloonopmerkingen  
.cm-instanceParam InstanceParam-opmerking en -kenmerk  
.cm-instanceParamAttrVal InstanceParam-kenmerkwaarden  
.cm-libraryItem   Bibliotheken die in een document zijn ingevoegd. Bijvoorbeeld: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

Informatie over hoe kiezer andere codebestanden beïnvloeden

Voor meer informatie over hoe kiezers in het main.less-themabestand code-elementen in codebestanden beïnvloeden (behalve voor HTML, CSS, JavaScript en PHP), kunt u de Token Inspector downloaden en gebruiken.

Downloaden

  1. Download de Token Inspector en pak dit hulpprogramma uit.

  2. Navigeer met Google Chrome naar het bestand TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html en open het bestand.

    Het hulpmiddel TokenInspector bestaat uit de volgende secties:

    • Code-editor, 
    • Een optie om de modus te wijzigen en
    • Een lijst met kiezers aan de rechterkant.
    Inzicht krijgen in de kiezers met de Token Inspector
    Inzicht krijgen in de kiezers met de Token Inspector

    A. Code-editor B. Optie voor het wijzigen van de modus C. Lijst met kiezers 
  3. Kopieer en plak de inhoud van een bestand in de code-editor.

  4. Wijzig de modus van het bestand door de bestandsnaamextensie te typen en op Modus wijzigen te klikken.

    Als het bestand bijvoorbeeld een HTML-bestand is, wijzigt u de bestandsnaamextensie in HTML. De pagina wordt bijgewerkt na een wijziging in de modus en geeft boven aan de huidige modus de pagina weer.

    Modusaanduiding in Token Inspector
    Modusaanduiding in Token Inspector

  5. Selecteer het code-element waarvan u de weergave wilt bewerken.

    De Token Inspector markeert vervolgens de selectie.

  6. (Optioneel) U kunt een ook afzonderlijke kiezer selecteren om te zien welke code-elementen in uw codebestand worden beïnvloed door die kiezer.

  7. Noteer de gewenste kiezers die u wilt bewerken en bijwerken en sluit vervolgens Token Inspector.

Kiezers bewerken in het bestand main.less

Nu u weet welke kiezers u moet bewerken, kunt u de wijzigingen aanbrengen in het bestand main.less.

  1. Ga naar het einde van het bestand tot u de volgende opmerking ziet:

    /* Aangepaste codekleuren of overschrijvingen moeten na deze regel beginnen */

  2. Voer de kiezers in voor de code-elementen waarvan u de kleuren wilt bewerken. Gebruik een syntaxis zoals in het volgende voorbeeld:

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

  3. Als u meerdere elementen dezelfde kleur wilt geven, groepeer dan meerdere kiezers. In het volgende voorbeeld worden meerdere kiezers, gescheiden door komma's, toegewezen aan een enkele kleur.

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

  4. Als u wilt dat codekleuraanpassingen gelden voor een specifiek bestandstype, plaats de code-elementkiezers dan binnen de bestandtypekiezer, zoals weergegeven in het volgende voorbeeld:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. Sla het bestand op nadat u de wijzigingen hebt aangebracht.

    Dreamweaver vernieuwt de Codeweergave in alle geopende documenten met de nieuwe kleuren.

Opmerking:

Als uw wijzigingen syntaxisfouten of ongedefinieerde variabelen bevatten, zal Dreamweaver deze codewijzigingen niet laden en wordt in plaats daarvan het standaard donkere thema gebruikt.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid