Podręcznik użytkownika Anuluj

Dostosowywanie ustawień kolorowania kodu

Szukaj

Ostatnia aktualizacja May 21, 2021 12:36:39 AM GMT

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.

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.

Dostosowywanie motywów kodu

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

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

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

Tworzenie motywu kodu opartego na motywie domyślnym

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.

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

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.

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.

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:

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.

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;

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

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.

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

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.

Wskaźnik trybu w narzędziu Token Inspector

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.

Więcej zasobów tego rodzaju

Ustawianie preferencji kodowania

Zaloguj się na swoje konto

Informacje prawne | Zasady prywatności online

Dostosowywanie ustawień kolorowania kodu

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

Dostosowywanie motywów kodu

Edytowanie selektorów w pliku main.less

Dostosowywanie kolorów kodu w plikach mieszanych

Przykłady dostosowań kodu

Dostosowywanie koloru podświetlania pary znaczników

Dostosowywanie koloru komentarzy do kodu

Omówienie selektorów

Korzystanie z narzędzia Token Inspector

Więcej zasobów tego rodzaju

Zapytaj społeczność

Skontaktuj się z nami