Tworzenie schematu kolorowania dla Pajączka – krok po kroku

Kolorowanie składni pozwala na lepszą orientację w kodzie, czyni go znacznie bardziej przejrzystym. Pajączek posiada kilkadziesiąt schematów kolorowania (w tym różne konfiguracje języków znaczników i skryptowych itp. – obsługuje praktycznie wszystkie popularne języki używane na potrzeby www i nie tylko).

Może się jednak zdarzyć, że będziesz potrzebował utworzyć nowy schemat kolorowania dla języka, dla którego Pajączek nie dostarcza schematu, lub też chciałbyś zmienić i dostosować istniejący schemat do własnych preferencji i upodobań. W tym celu powstał Edytor schematów kolorowania.

Domyślnie Edytor schematów kolorowania jest dostępny za pomocą skrótu Ctrl+Shift+F8, a także z poziomu okna Ustawienia programu i z menu Narzędzia.

Sposób tworzenia nowego schematu przedstawiony zostanie na uproszczonym kolorowaniu dla języka HTML.

Przygotowania do utworzenia schematu kolorowania

Na początku pracy najlepiej jest zebrać jak najwięcej informacji o języku, dla którego będzie tworzony schemat, spisać wszystkie słowa kluczowe.

Najwygodniej będzie, jeśli lista słów kluczowych będzie miała postać pliku tekstowego, w którym każde słowo musi zawierać się w pojedynczej linii. Poszczególne grupy słów kluczowych powinny znaleźć się w osobnych plikach – później bardzo to ułatwi pracę.

Dla uproszczenia przyjęte zostaje, iż będą cztery grupy słów kluczowych języka HTML, a w każdej grupie tylko kilka wybranych pozycji (aby nie komplikować w tej chwili pracy). Przy większej ilości słów kluczowych wszystko przebiega identycznie:

• znaczniki HTML: DIV , IMG , A – zapisujemy w pliku tags.txt
• atrybuty znaczników: CLASS , SRC , HREF – zapisujemy w pliku attrs.txt
• zdarzenia JavaScript: onMouseOver , onClick – zapisujemy w pliku events.txt
• encje:   – zapisujemy w pliku entities.txt

Z zebranych informacji wynika również, że kod HTML może zawierać też komentarze.

Utworzenie nowego schematu kolorowania

Aby utworzyć nowy schemat kolorowania, otwórz edytor (domyślnie skrót Ctrl+Shift+F8). Jeśli edytor już jest otwarty, a w nim edytowany jest już jakiś schemat, skorzystaj z ikonki Nowy schemat kolorowania (w lewym górnym rogu).

Po utworzeniu nowego schematu kolorowania od razu dostępny jest podstawowy blok o nazwie 'Default’. Nie można zmieniać jego nazwy, ani go usunąć. Można natomiast edytować jego ustawienia. W bloku tym będą zagnieżdżane kolejne bloki tworzone podczas edycji schematu kolorowania.

Wpisanie tekstu podglądu

Pierwszą czynnością po utworzeniu schematu będzie wpisanie przykładowego tekstu, na którym można zaobserwować wyniki pracy i ewentualne błędy. W tym celu kliknij ikonę Umożliwiaj modyfikację tekstu podglądu (w prawym dolnym rogu). Następnie wpisz tam poniższy kod HTML:

<a href="site.html">Link</a>
<div class="classname">Marek&nbsp;i&nbsp;Jarek</div>
<img src="img.gif" onMouseOver="mouseover()" onClick="click()">
<!-- Comment -->

Utworzenie stylu kolorowania zwykłego tekstu

Zwykły tekst to wszystko, co nie zostało w schemacie zdefiniowane inaczej (jako słowo kluczowe, komentarz, liczba itd.).

W celu utworzenia stylu kolorowania zwykłego tekstu kliknij w ikonę Utworzenie nowego stylu (wielkie A na złotym tle). W oknie, które się pojawi, wpisz nazwę stylu (będziemy operowali nazwami angielskimi – w tym wypadku Default text, bez cudzysłowów), a następnie za pomocą dostępnych opcji określ kolor tła i czcionki oraz styl tekstu (pogrubiona, pochylona itp.).

Po wykonaniu ww. czynności możesz zatwierdzić zmiany za pomocą kliknięcia w OK. Jeśli po zamknięciu okna zajdzie potrzeba zmian w stylu kolorowania, możesz to zrobić w zakładce Style w lewej górnej części głównego okna Edytora.

Utworzenie pierwszej listy słów kluczowych – kolorowanie encji

W celu utworzenia listy słów kluczowych przejdź do zakładki Słowa kluczowe (nad okienkiem podglądu, na prawo) i zaznacz opcję Włącz kolorowanie słów kluczowych.

Następnie kliknij w ikonę z plusem z prawej strony okienka Zbiory. W okienku, które się pojawi, wpisz nazwę zbioru (Entities). Nie zamykaj okienka!

Kolejnym krokiem będzie utworzenie stylu kolorowania encji. Kliknij w ikonę tworzenia nowego stylu kolorowania – identycznie jak dla zwykłego tekstu.

Następnie zatwierdź wybór nazwy zbioru i przypisanego do niego stylu kolorowania.

Nadszedł czas na podanie słów kluczowych, które będą należały do zbioru ’Entities’. Można je po kolei wpisywać klikając na ikonę ’Dodaj słowo kluczowe’ z prawej strony listy ’Bieżący zbiór słów kluczowych’ (ikona z plusem). Jednak znacznie wygodniejszym rozwiązaniem (szczególnie gdy zbiór słów kluczowych jest bogaty), jest wczytanie go z pliku tekstowego (ikona a otwartym skoroszytem). Pamiętaj, iż każde słowo w tym pliku musi występować w osobnej linii! Dla zbioru ’Entities’ wczytaj słowa z utworzonego wcześniej pliku entities.txt.

Zmiana ustawień w zakładce 'Identyfikatory’ w celu poprawnego kolorowania encji

Niestety – mimo poprawnego wykonania powyższych kroków, encje nie chcą się poprawnie kolorować. Odpowiedzialne za to są ustawienia w zakładce 'Identyfikatory’.

Aby encje poprawnie były kolorowane, należy zdefiniować, jakie znaki mogą się znaleźć w kolorowanych słowach. W tym przypadku w okienku otwieranym za pomocą ikony ’Pierwszy symbol’ wpisujemy znak &, ’Inne symbole’ definiują zakres innych znaków, jakie mogą wystąpić w encji (pozostawiamy domyślne 0-9A-Z_a-z).

Następnie podaj sufiks (znak na końcu słowa), jakim będą się kończyły encje. Tu sufiksem jest średnik ;. Aby dodać sufiks należy w sekcji Specjalne wybrać opcję ’z sufiksami’ i zaznaczyć opcję ’z sufiksami’ u dołu listy sufiksów. Teraz kliknij w ikonę ’Dodaj identyfikator’ i wpisz w okienku znak ;.

Po wykonaniu tych czynności możesz odznaczyć opcję ’Włącz kolorowanie identyfikatorów’ – nie ma potrzeby kolorowania identyfikatorów nie będących słowami kluczowymi.

Od tej chwili encje powinny się kolorować wg zadanych w stylu ustawień.

Utworzenie nowego bloku, zdefiniowanie separatorów – konstrukcja znacznika HTML

Aby móc kolorować znacznik HTML należy utworzyć nowy blok, w którym umieszczone zostaną dane potrzebne do kolorowania nazwy i zawartości znacznika.

W celu utworzenia bloku przejdź do zakładki ’Bloki składniowe’ (z lewej strony okna) i kliknij w ikonę ’Dodaj blok’ (ikona z plusem). W okienku, które się otworzy, podaj nazwę bloku (w tym wypadku ’HTML tag’). Jeśli w schemacie istniałyby już inne bloki, można wskazać blok, w którym nowy blok mógłby zostać zagnieżdżony.

Pierwszą czynnością, jaką należy wykonać jest zdefiniowanie separatorów bloku w zakładce ’Bloki’.

Aby utworzyć nową parę separatorów kliknij na ikonę ’Dodaj separatory’ (ikona z plusem z prawej strony okienka ’Separatory bloku’). Separatory te będą określać odkąd – dokąd będą obowiązywać ustawienia zdefiniowane w tym bloku.

Na pierwszy rzut oka, dla znacznika HTML mogłyby to być znaki < (lewy separator) i > (prawy). Zdefiniujemy jednak pary separatorów składających się ze znaków:

• < + nazwa znacznika (lewy), np. <DIV
• > prawy

Jest to lepsze rozwiązanie, gdyż w tym wypadku kolorowane będą wyłącznie prawidłowe znaczniki HTML. Jeśli lewym separatorem byłby wyłącznie znak <, to każdy ciąg następujący po tym znaku byłby rozpoznawany jako znacznik HTML, a także między znakiem < a nazwą znacznika mogłyby się znaleźć jakieś znaki, np. spacje itp. Oczywiście byłoby błędem z punktu widzenia specyfikacji HTML.

W okienku ’Edycja separatora’ znajduje się także opcja ’Ograniczniki są częścią bloku’. Należy ją zaznaczyć. Spowoduje to kolorowanie separatorów według reguł ustawionych w edytowanym bloku. Gdyby została odznaczona, separatory byłyby kolorowane wg reguł bloku nadrzędnego.

Znów słowa kluczowe – nazwy znaczników, atrybuty i zdarzenia

Kolejnym krokiem będzie utworzenie zbiorów słów kluczowych mających zastosowanie w konstrukcji znacznika HTML – ’HTML tags’, ’HTML attributes’, ’HTML events’ (nazwy znaczników, nazwy atrybutów, nazwy zdarzeń). Postępuj tak samo, jak w przypadku tworzenia zbioru dla encji – utworzenie nowego zbioru, nadanie mu nazwy i utworzenie stylu kolorowania, wpisanie lub wczytanie z pliku zbioru słów kluczowych.

W tym miejscu drobna uwaga – aby kolorowanie nazw znaczników było jak najbardziej poprawne, nazwy znaczników (słowa kluczowe) muszą być w zbiorze ’HTML tags’ poprzedzone znakiem <. Lista słów będzie więc wyglądała tak:

<DIV
<IMG
<A

Oczywiście słowa kluczowe dla nazw atrybutów i zdarzeń będą już podane normalnie, bez żadnych znaków poprzedzających.

Identyfikatory – zmiana ustawień w bloku znacznika

Podobnie jak w przypadku encji, tak i w znaczniku trzeba zmienić domyślne ustawienia w Identyfikatorach. Jednak tym razem słowa kluczowe będą rozpoczynały się w większości od dowolnej litery. Dlatego też pozostaną bez zmian ustawienia ’Pierwszego symbolu’ i ’Innych symboli’. Trzeba natomiast dodać prefiks '<’, który jest używany w nazwach znaczników.

Aby dodać prefiks, postępuj podobnie jak przy dodawaniu sufiksu w przypadku encji

Włączenie kolorowania symboli – znak zamykający znacznik >

Znak < otwierający znacznik HTML jest kolorowany poprawnie (wraz z nazwą znacznika). Jednak znak >, który oznacza zakończenie znacznika, pozostaje kolorowany jak ’zwykły tekst’.

Żeby zmienić ten stan rzeczy, przejdź do zakładki ’Bloki’ i po zaznaczeniu opcji ’koloruj symbole’ wybierz dla symboli styl, jaki został utworzony dla znaczników HTML.

Ciągi znaków – kolorowanie wartości atrybutów

Schemat jest prawie gotowy. Brakuje jeszcze kolorowania wartości atrybutów znacznika. Zostanie to zrealizowane w zakładce Ciągi znaków.

Aby włączyć kolorowanie ciągów, kliknij na ’Włącz kolorowanie ciągów znaków’ w zakładce 'Ciągi znaków’, a następnie wybierz opcję ’Wieloliniowe ciągi znaków’.

Teraz można definiować ciągi. kliknij ikonę ’Dodaj łańcuch znaków’ (ikona z plusem). Otworzy się okno, w którym można dodać znaki początku i końca ciągu. Będą do znaki ’ i ” (dla początku i końca ciągu). W tym samym oknie można utworzyć styl, jaki będzie stosowany do ciągów. Można go nazwać ’String’.

Utworzenie nowego bloku dla znaczników zamykających html

Znaczniki otwierające są już w zasadzie poprawnie kolorowane. Jednak znaczniki zamykające np. </DIV> i </A> nie są kolorowane.

Aby włączyć kolorowanie znaczników zamykających utwórz nowy blok, jako separatory podaj ciągi zbudowane wg schematu:

'</+nazwa znacznika' (lewy) i '> (prawy), na przykład '<DIV' (lewy) i '>' (prawy).

Przy okazji definiowania separatorów, możesz w tej samej zakładce zdefiniować kolorowanie symboli (jak dla znaczników otwierających HTML)

Następnie utwórz zbiór słów kluczowych zawierających znaczniki zamykające. W tym celu przejdź do zakładki ’Słowa kluczowe’. Zbiór w tym wypadku będzie wyglądał następująco:

<DIV 
<A 

Może pojawić się pytanie: „Dlaczego nie ma tu znacznika </IMG”? Jest tak dlatego, że specyfikacja HTML nie przewiduje dla znacznika <IMG odpowiadającego mu znacznika zamykającego, więc nie może on również być kolorowany. Jeśli wpiszesz w kodzie znacznik </IMG>, to nie będzie on poprawnie kolorowany. W ten sposób już podczas tworzenia kodu, możesz ocenić wzrokowo, czy nie ma w nim błędów.

Kolorowanie zbioru – to samo jak dla znaczników HTML

W zakładce identyfikatory utwórz prefiks '</’ (postępuj identycznie, jak przy tworzeniu prefiksu w poprzednim bloku).

W znaczniku zamykającym nie ma atrybutów, zdarzeń itp. więc nie musisz ich ustawiać.

Zdefiniowanie kolorowania komentarzy

Ostatnią rzeczą, jaką należy (wg. uproszczonych założeń) zrobić, jest wykonanie kolorowania komentarzy.

Aby zdefiniować kolorowanie komentarzy, przejdź do bloku ’Default’, a następnie do zakładki ’Komentarze’. W zakładce tej zaznacz opcję ’Włącz kolorowanie komentarzy’, a następnie ’Komentarze wieloliniowe’.

Teraz można zdefiniować znaki początku i końca komentarza. W tym celu kliknij na ikonę ’Dodaj komentarz’ (ikona z plusem) z prawej strony okna. W oknie, które się pojawi, wpisz w przypadku HTML <!– (początek) i –> (koniec). W tym samym oknie można utworzyć nowy styl kolorowania dla komentarzy.

Korzystanie ze schematu w edytorze

Po zapisaniu schematu kolorowania, jest od od razu dostępny w edytorze.

Aby użyć danego schematu do kolorowania składni aktualnego dokumentu, użyj przycisku ’Wybór schematu kolorowania składni’ na 'Mini pasku edytora’ (z lewej strony okna edytora).