Podręcznik użytkownika Anuluj

Dostosowywanie ustawień kolorowania kodu

 

 

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.

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

    Tworzenie nowego motywu
    Tworzenie nowego motywu

  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.

Edytowanie selektorów w pliku main.less

Zanim zaczniesz edytować selektory w pliku main.less, zapoznaj się z komentarzami i instrukcjami w pliku motywu. Jeśli nie masz pewności, które selektory edytować, skorzystaj z następujących zasobów:

  • Omówienie selektorów — tabele referencyjne z informacjami o elementach kodu, na które wpływają poszczególne selektory.
  • Narzędzie Token Inspector — skorzystaj z narzędzia Token Inspector, aby „zbadać” konkretny plik i podświetlić elementy kodu, które są modyfikowane przez dany selektor.
  • Jeśli chcesz edytować kolory kodu w komentarzach lub zmienić kolor podświetlenia par znaczników, przejrzyj przykładowe urywki kodu podane w sekcji Przykłady dostosowywania kodu.

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:

    /* Za tym wierszem powinny się zaczynać definicje własnych kolorów lub przesłonięć */

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

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

    Uwaga:


    Jeśli jeden plik zawiera kod w wielu językach programowania, a dla każdego z nich mają być stosowane odrębne motywy kolorowania, zobacz Dostosowywanie kolorów kodu w plikach mieszanych.

  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;}
    }
    .HTML{ .cm-tag{ color: #00D0D0;} }
    .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”.

Dostosowywanie kolorów kodu w plikach mieszanych

Pracując nad plikami zawierającymi różne typy kodu (pochodzące z różnych języków programowania) — na przykład kombinację kodu HTML/CSS, HTML/PHP lub HTML/JavaScript — można dostosować jego kolory w następujący sposób:

  1. Utwórz niestandardowy motyw kodu, wykonując instrukcje podane w sekcji Dostosowywanie motywów kodu. Wybierz nowy motyw i zastosuj go.

  2. Zamknij program Dreamweaver.

  3. Otwórz plik package.json w edytorze tekstu.

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

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

    Dodaj następujący wiersz w bloku theme{}: 

    "addModeClass": true

    Edytowanie pliku package.json
    Edytowanie pliku package.json

  4. Otwórz program Dreamweaver i wybierz polecenie Edycja > Preferencje > Interfejs. Wybierz nowo utworzony motyw i kliknij ikonę Edytuj.

  5. Dodaj style specyficzne dla danego typu kodu na końcu pliku main.less.

    Użyj selektorów podanych w poniższej tabeli, aby zmienić kolory kodu dla odpowiednich typów plików.

    Selektor

    Typ pliku

    .cm-m-clike

    PHP

    .cm-m-css

    CSS, Less

    .cm-m-javascript

    JavaScript

    .cm-m-xml

    HTML, XML

    Na przykład w celu dostosowania kolorów nazw znaczników w kodzie CSS oraz znaczników „style” w kodzie HTML lub PHP należy użyć następującej składni:

    .cm-tag {color: #BD46BD;}
    .cm-m-css.cm-tag {color: #38D08B;}
    .cm-tag {color: #BD46BD;} .cm-m-css.cm-tag {color: #38D08B;}
    .cm-tag {color: #BD46BD;} 
    .cm-m-css.cm-tag {color: #38D08B;}
  6. Zapisz plik main.less. 

    Zmiany kolorów będą teraz widoczne w plikach z kodem.

Przykłady dostosowań kodu

Poniżej przedstawiono przykłady ułatwiające dostosowanie kolorów kodu w różnych sytuacjach.

Dostosowywanie koloru podświetlania pary znaczników

W pliku main.less wyszukaj następujący fragment kodu i dostosuj kolor.

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

Ten fragment kodu jest uzależniony od motywu. W niektórych motywach może nie występować.

Dostosowywanie koloru komentarzy do kodu

W pliku main.less wyszukaj następujący fragment kodu i dostosuj kolor.

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

Omówienie selektorów

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

Jednak zanim zaczniesz modyfikować 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.

Można także skorzystać z narzędzia Token Inspector, aby poznać elementy kodu modyfikowane przez poszczególne selektory.

Selektory HTML CSS JavaScript PHP
.cm-atom  Nazwy encji, takie jak   Kolory w formacie szesnastkowym (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 „@” Zmienne, definicje funkcji oraz parametry 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 klamer { }, brakiem cudzysłowów w wartościach właściwości lub nieznaną 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: +, -, *, +=, !==, &&, >>> itd. Operatory, np. ===, &&, !, =>, +, - 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 i :focus, 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.

Selektor

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

W poniższej tabeli wymieniono selektory, które umożliwiają dostosowywanie kolorów kodu w przypadku plików zawierających wiele języków programowania.

Selektor

Typ pliku

.cm-m-clike

PHP

.cm-m-css

CSS, Less

.cm-m-javascript

JavaScript

.cm-m-xml

HTML, XML

Korzystanie z narzędzia Token Inspector

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 uruchomić narzędzie Token Inspector.

  1. Otwórz narzędzie Token Inspector 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 

  2. Skopiuj i wklej zawartość pliku do edytora kodu.

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

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

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

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

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

Więcej zasobów tego rodzaju

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?