Informacje o dostosowywaniu kolorów poszczególnych elementów kodu (kolorowaniu kodu), np. komentarzy do kodu, w programie Dreamweaver.

W programie Dreamweaver można zmieniać ustawienia kolorów interfejsu, korzystając z okna dialogowego Edycja > Preferencje > Interfejs.

Do wyboru są cztery różne motywy kolorów oraz ciemny lub jasny motyw dla kodu. 

Po ustawieniu motywu kolorów i kodu można w jeszcze większym stopniu spersonalizować kolory kodu w programie Dreamweaver, edytując selektory we wbudowanym pliku main.less.

Informacje o kolorowaniu kodu w programie Dreamweaver CC 2017

Kolorowaniem kodu w programie Dreamweaver CC 2017 sterują selektory zdefiniowane w pliku motywu main.less.

Aby dostosować sposób kolorowania kodu w programie Dreamweaver CC 2017, wykonaj następujące czynności:

  1. Ustaw preferencje domyślnego motywu kolorów i kodu w programie Dreamweaver. 
  2. Utwórz motyw dla kodu na podstawie istniejącego motywu.
  3. Edytuj ten nowy motyw kodu.
  4. Poznaj selektory, które trzeba zmodyfikować, oraz ich wpływ na inne elementy kodu.
  5. Edytuj selektory w pliku motywu main.less i zapisz wprowadzone zmiany.

Ustawianie motywów kolorów i motywów kodu

Podczas uruchamiania programu Dreamweaver można wybrać preferowany motyw kolorystyczny. Można również zmienić te preferencje w dowolnej chwili.

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).

  2. Z listy Kategoria po lewej stronie wybierz pozycję Interfejs.

  3. Wybierz motyw z listy Motywy kolorów. 

  4. Po ustawieniu motywu interfejsu określ motyw kodu.

    Można wybrać motyw jasny albo ciemny. Tak ustawiony motyw można następnie zapisać pod nową nazwą i dostosowywać dalej.

    Domyślne motywy kodu
    Domyślne motywy kodu

  5. Kliknij przycisk Zastosuj, aby zapisać wprowadzone zmiany.

Dostosowywanie motywów kodu

Po wybraniu motywu kodu dostosuj kolory, zapisując motyw pod nową nazwą i edytując go.

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).

  2. Wybierz jasny lub ciemny motyw kodu, a następnie kliknij ikonę plusa i zapisz motyw pod nową nazwą.

    Uwaga:

    Domyślnych motywów kodu (jasnego i ciemnego) nie można edytować, dlatego trzeba wprowadzić zmiany w kopii motywu. Nowo utworzone, własne motywy zawsze można edytować.

    Kopiowanie motywu i edytowanie go
    Kopiowanie motywu i edytowanie go

  3. Zapisz domyślny motyw kodu pod nową nazwą.

    Tworzenie motywu kodu opartego na motywie domyślnym
    Tworzenie motywu kodu opartego na motywie domyślnym

  4. Wybierz nowo utworzony motyw kodu i kliknij ikonę Edytuj.

    Plik main.less zostanie otwarty w programie Dreamweaver i będzie można zmodyfikować selektory motywu, aby dostosować kolory kodu.

    Po zapisaniu pliku main.less widok Kod zostanie odświeżony i wyświetli nowe kolory.

Omówienie selektorów

Aby zmienić kolory elementów kodu, edytuj właściwości selektorów w pliku main.less.

Jednak zanim zaczniesz plik main.less, poznaj poszczególne selektory i elementy kodu, którymi sterują. W poniższej tabeli podano informacje na temat elementów kodu w plikach HTML, CSS, JavaScript i PHP, które zmieniają wygląd pod wpływem tych selektorów.

Selektory HTML CSS JavaScript PHP
.cm-atom  Nazwy encji, takie jak   Kolory w formacie hex, RGB lub HSL, predefiniowane wartości atrybutów, takie jak strong, none, auto, inherit itd. true, false, null, undefined, NaN, Infinity True, False, Null oraz stałe magiczne, takie jak __LINE__, __DIR__ itd.
.cm-attribute  Nazwa atrybutu Typy nośników, takie jak all, braille, print, screen itd.    
.cm-bracket Nawiasy otaczające znaczniki, np. <, >, /> oraz </      
.cm-builtin    Selektor ID   Funkcje wbudowane, takie jak htmlspecialchars, trim, substr itd.
.cm-comment  Komentarz Komentarz Komentarz Komentarze
.cm-def    Reguły typu „@” zmienna, definicja funkcji oraz parametr funkcji Nazwa funkcji w definicji funkcji
.cm-error  Znaczniki zamykające, dla których nie istnieje znacznik otwierający
Brak cudzysłowu w wartości atrybutu
Błąd spowodowany brakiem klamry { lub }, brakiem cudzysłowów w wartościach właściwości lub nieznaną nazwą właściwości    
.cm-keyword    Nazwy kolorów, !important, słowa kluczowe w regule @media, and, only itp. Słowa kluczowe struktury sterowania (if, else, …), in, of, from, default, public, private itd. Takie słowa kluczowe, jak function, if, else, new, echo, isset itd.
.cm-meta  Deklaracja <!DOCTYPE> Prefiksy przeglądarek, np. -webkit-, -o- itd. Wielokropek w składni rozciągniętej. Przykład: mojaFunkcja(...iterableObj); Deklaracja <!DOCTYPE> oraz znacznik początkowy i końcowy PHP: <?php, ?>
.cm-number    Dowolna liczba z jednostką lub bez jednostki Dowolna liczba, np. 12, 2.1, 123e-5, 0x11, 0b11, 0o11 itd. Dowolna liczba, np. 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 itd.
.cm-operator      Operatory: +, -, *, +=, !==, &&, >>>, itp Operatory takie jak ===, &&, !, =>, +, - itd.
.cm-property    Nazwa właściwości Właściwość obiektu lub metoda  
.cm-qualifier    Selektor Class    
.cm-string  wartość atrybutu Zwykły łańcuch, np. przekazywany do wywołania url(), nazwy czcionek w cudzysłowach itd. Łańcuch literału Łańcuch literału
.cm-string-2    Właściwości niestandardowe, np. scrollbar-arrow-color, scrollbar-base-color itd. Wyrażenia regularne  
.cm-tag  Nazwa znacznika Selektor znacznika    
.cm-variable    Nazwy czcionek bez cudzysłowów Globalne zmienne i funkcje, odniesienia do klas Nazwy funkcji zdefiniowanych przez użytkownika, odniesienia do interfejsu/klasy, właściwości klasy, rzutowania. 
.cm-variable-2    Właściwości niestandardowe, np. main-bg-color Odniesienia do zakresowych zmiennych/funkcji Zmienne, parametry lub atrybuty zdefiniowane przez użytkownika albo predefiniowane
.cm-variable-3   Pseudoklasy, takie jak :hover, :focus itd., a także pseudoelementy, takie jak ::first-letter, ::selection itd.    

W poniższej tabeli podano, które szablony i biblioteki programu Dreamweaver zmieniają wygląd pod wpływem selektorów w pliku main.less.

Class Szablony (DWT) Biblioteka (LBI)
.cm-templateComment Komentarze do szablonu  
.cm-templateAttrVal Wartości atrybutów w komentarzach do szablonu  
.cm-instanceParam Komentarz i atrybut InstanceParam  
.cm-instanceParamAttrVal Wartości atrybutu InstanceParam  
.cm-libraryItem   Biblioteki wstawione w dokumencie. Przykład: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; }

Sprawdzanie wpływu selektorów na inne pliki z kodem

Aby sprawdzić, w jaki sposób selektory w pliku motywu main.less wpływają na elementy kodu w plikach innych niż HTML, CSS, JavaScript i PHP, należy pobrać i uruchomić narzędzie Token Inspector.

Pobierz

  1. Pobierz i rozpakuj narzędzie Token Inspector.

  2. Odszukaj i otwórz plik TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html w przeglądarce Google Chrome.

    Narzędzie TokenInspector zawiera następujące sekcje:

    • edytor kodu,
    • opcja zmiany trybów,
    • lista selektorów (po prawej stronie).
    Skorzystaj z narzędzia Token Inspektor, aby zapoznać się z selektorami
    Skorzystaj z narzędzia Token Inspektor, aby zapoznać się z selektorami

    A. Edytor kodu B. Opcja Zmiana trybu C. Lista selektorów 
  3. Skopiuj i wklej zawartość pliku do edytora kodu.

  4. Zmień tryb pliku, wpisując jego rozszerzenie i klikając opcję Zmień tryb.

    Na przykład jeśli pracujesz z plikiem HTML, zmień rozszerzenie na html. Strona zostanie zaktualizowana zgodnie ze zmianą trybu. Bieżący tryb jest wskazywany na górze strony.

    Wskaźnik trybu w narzędziu Token Inspector
    Wskaźnik trybu w narzędziu Token Inspector

  5. Zaznacz element kodu, którego wygląd chcesz zmienić.

    Token Inspector wyróżni wówczas odpowiedni selektor.

  6. (Opcjonalnie) Można także zaznaczyć pojedynczy selektor, aby sprawdzić, jakie elementy kodu są przez niego modyfikowane.

  7. Zapisz selektory, które chcesz zmienić, a następnie zamknij narzędzie Token Inspector.

Edytowanie selektorów w pliku main.less

Znając już selektory, które wymagają edycji, możesz rozpocząć wprowadzanie zmian w pliku main.less.

  1. Przejdź na koniec pliku i odszukaj następujący komentarz:

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

  2. Wpisz selektory odpowiadające elementom kodu, których kolory chcesz edytować. Użyj następującej składni:

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

  3. Jeśli chcesz przypisać ten sam kolor wielu elementom, możesz zdefiniować ich selektory jako jedną grupę. W poniższym przykładzie poszczególne selektory, rozdzielone przecinkami, otrzymują ten sam kolor.

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

  4. Aby zmiany kolorowania kodu dotyczyły tylko plików wybranego typu, należy otoczyć selektory elementów kodu selektorem typu pliku, tak jak w poniższym przykładzie:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. Po wprowadzeniu zmian zapisz plik.

    Program Dreamweaver odświeży widok Kod we wszystkich otwartych dokumentach, wyświetlając nowe kolory.

Uwaga:

Jeśli we wprowadzonych zmianach były błędy składniowe lub niezdefiniowane zmienne, program Dreamweaver nie załaduje zmian kodu, lecz powróci do domyślnego motywu „Ciemny”.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online