Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
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.
Podczas uruchamiania programu Dreamweaver można wybrać preferowany motyw kolorystyczny. Można również zmienić te preferencje w dowolnej chwili.
Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
Z listy Kategoria po lewej stronie wybierz pozycję Interfejs.
Wybierz motyw z listy Motywy kolorów.
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.
Kliknij przycisk Zastosuj, aby zapisać wprowadzone zmiany.
Po wybraniu motywu kodu dostosuj kolory, zapisując motyw pod nową nazwą i edytując go.
Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
Wybierz jasny lub ciemny motyw kodu, a następnie kliknij ikonę plusa i zapisz motyw pod nową nazwą.
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ć.
Zapisz domyślny motyw kodu pod nową nazwą.
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.
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:
Znając już selektory, które wymagają edycji, możesz rozpocząć wprowadzanie zmian w pliku main.less.
Przejdź na koniec pliku i odszukaj następujący komentarz:
/* Za tym wierszem powinny się zaczynać definicje własnych kolorów lub przesłonięć */
Wpisz selektory odpowiadające elementom kodu, których kolory chcesz edytować. Użyj następującej składni:
.cm-tag {color: #00D0D0; }
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.
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;}
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;} }
Po wprowadzeniu zmian zapisz plik.
Program Dreamweaver odświeży widok Kod we wszystkich otwartych dokumentach, wyświetlając nowe kolory.
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”.
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:
Utwórz niestandardowy motyw kodu, wykonując instrukcje podane w sekcji Dostosowywanie motywów kodu. Wybierz nowy motyw i zastosuj go.
Zamknij program Dreamweaver.
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
Otwórz program Dreamweaver i wybierz polecenie Edycja > Preferencje > Interfejs. Wybierz nowo utworzony motyw i kliknij ikonę Edytuj.
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;}
Zapisz plik main.less.
Zmiany kolorów będą teraz widoczne w plikach z kodem.
Poniżej przedstawiono przykłady ułatwiające dostosowanie kolorów kodu w różnych sytuacjach.
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;
Ten fragment kodu jest uzależniony od motywu. W niektórych motywach może nie występować.
W pliku main.less wyszukaj następujący fragment kodu i dostosuj kolor.
.cm-comment {color: #717171; font-style: italic;}
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 |
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.
Otwórz narzędzie Token Inspector w przeglądarce Google Chrome.
Narzędzie TokenInspector zawiera następujące sekcje:
A. Edytor kodu B. Opcja Zmiana trybu C. Lista selektorów
Skopiuj i wklej zawartość pliku do edytora kodu.
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.
Zaznacz element kodu, którego wygląd chcesz zmienić.
Token Inspector wyróżni wówczas odpowiedni selektor.
(Opcjonalnie) Można także zaznaczyć pojedynczy selektor, aby sprawdzić, jakie elementy kodu są przez niego modyfikowane.
Zapisz selektory, które chcesz zmienić, a następnie zamknij narzędzie Token Inspector.
Zaloguj się na swoje konto