Kolorowanie składni w WordPress – CodeColorer

Ci którzy już wcześniej zaglądali na tego bloga być może zauważyli, że zmienił się format prezentowanych w artykułach fragmentów kodu. Wcześniej używałam prymitywnej metody, polegającej na otoczeniu fragmentu kodu podwójnym blokiem <blockquote><code>. Prawdę mówiąc nie było to ani wygodne ani szczególnie estetyczne. Postanowiłam zainwestować czas w zainstalowanie i skonfigurowanie wtyczki do kolorowania składni, póki nie ma zbyt wielu artykułów do poprawienia. Pierwszym serwisem na którym postanowiłam poszukać wskazówek był naturalnie Polski support WordPress. Nie zawiodłam się informację znalazłam szybko (wszak funkcja serach dobra rzecz) okazało się przy tym, że jest klęska urodzaju i trzeba zrobić uczciwy ‘przetarg’ , żeby wybrać coś odpowiedniego z dość długiej listy wtyczek umożliwiających między innymi kolorowanie składni znajdujących się na stronie głównej WordPress.

Z dość długiej listy wstępnie wybrałam następujące wtyczki:

• CodeColorer,
• Highlight Source Pro,
• SyntaxHighlighter,
• SyntaxHighlighter Plus,
• WP-CodeBox,
• WP-Syntax.

Następnie opierając się na opisach i ocenach postanowiłam wypróbować wtyczkę CodeColorer którą stworzył Dmytro Shteflyuk. Oczywiście nie twierdzę, że jest ona najlepsza, ale z jakichś powodów wzbudziła moje zainteresowanie.

Opis pakietu CodeColorer

Rozszerzenie powstało w oparciu o GeSHi stworzony dla forum phpBB. W opisie umieszczonym na stronie WordPress możemy znaleźć następujące informacje o następujących możliwościach pakietu:

• numerowanie linii,
• automatyczne generowanie linków do dokumentacji języka,
• obliczanie rozmiaru bloków w zależności od długości zamieszczonego w nim kodu z możliwością włączania pasków przewijania po przekroczeniu zadanych rozmiarów maksymalnych,
• ustawienie domyślnych wartości parametrów bloku w panelu administracji,
• ustawienie kolorów dla każdego języka osobno w pliku stylów css,
• zabezpieczenie kodu przed interpretowaniem i wykonaniem przez WordPress (nie ma konieczności używania znaków specjalnych w miejsce np < czy >).

Lista obsługiwanych języków jest naprawdę imponująca, według autorów, obejmuje 81 pozycji, w tym również te, które mnie interesowały. Co więcej dla każdego z tych języków można zaprogramować zupełnie inny komplet kolorów.

Instalacja wtyczki CodeColorer

Instalacja tej wtyczki niczym nie różni się od instalacji innych rozszerzeni WordPressa. Wystarczy kilka kroków:

1. Pobrać paczkę i rozpakowac ja do katalogu wp-content/plugins/codecolorer.
2. Nazwę pliku wp-content/plugins/codecolorer/codecolorer.css.in
   zmienić na wp-content/plugins/codecolorer/codecolorer.css .
3. Aby zacząć używać wtyczki wystarczy już tylko aktywować ją w panelu administracyjnym w zakładce [Wtyczki].

Sposób użycia

Składnia bloku kodu jest bardzo prosta. Wystarczy kod otoczyć znacznikami:
[cc lang="lang"]code[/cc] lub <code lang="lang">code</code>. W miejsce ‘lang’ należy wpisać wartość zdefiniowaną dla wybranego języka. Po szczegóły odsyłam na stronę projektu. Tam też można znaleźć opis innych atrybutów znacznika.

Aby zmienić domyślne kolory należy edytować plik wp-content/plugins/codecolorer/codecolorer.css . Znajdziemy w nim komplet domyślnych koloró, który będzie używany dla każdego języka dla którego nie zostały zdefiniowane kolory indywidualne. Kolorować można niezależnie 11 różnych elementów. Aby wprowadzić dla wybranego języka kolor inny niż domyślny trzeba skopiować cały blok znaczników i na początku każdej linii dodać selektor odpowiedni dla języka, który chcemy kolorować inaczej niż kolorami domyślnymi. Na przykład dla języka php powinien pojawić się następujący blok:

.php .codecolorer .kw1 { color: #FF6600; font-weight: bolder; }
.php .codecolorer .kw2 { color: #339999; }
.php .codecolorer .kw3 { color: #FF6600; }
.php .codecolorer .kw4 { color: #DDE93D; }
.php .codecolorer .kw5 { color: #999966; }
.php .codecolorer .st0 { color: #66FF00; }
.php .codecolorer .es0 { color: #42A500; }
.php .codecolorer .br0 { color: Olive; }
.php .codecolorer .nu0 { color: #CCFF33; font-weight: bolder; }
.php .codecolorer .re0 { color: #339999; }
.php .codecolorer .re1 { color: #FFCC00; }
.php .codecolorer .re3 * { color: #FFFFFF; }
.php .codecolorer .re4, .php .codecolorer .re4 * { color: #64A2FF; }
.php .codecolorer .co1, .php .codecolorer .co2, .php .codecolorer .coMULTI { color: #9933CC; }


W moich artykułach poszłam o krok dalej. Postanowiłam, że wszystkie bloki będa się rozciągać na 98% szpalty, będą miały szare tło a na dodatek dla każdy używany język będzie wyróżniony innym kolorem lewego marginesu. W tym celu najpierw zmieniłam, w edytorze wtyczki, wartość zmiennej:

var $DEFAULT_STYLE = 'border: 1px solid #ccc; background: #eee; padding: 5px; margin: 10px auto 10px auto; width: 98%;font-size: 12px;';

Ustawiając odpowiednie wartości domyślnej szerokości bliku, tła, marginesów obramowania, czcionki itd. Oczywiście nic nie stoi na przeszkodzie, aby dokonać tu innych modyfikacji.

Następnie dodałam dla każdego języka selektor opisujący wygląd lewego obramowania. Poniżej przykład dla języka php, który w publikowanych tu artykułach ma czerwoną linię po lewej stronie bloku:

div.php{
border-left:red solid 2px;
}


Problemy o których nikt nie pisze

Na pierwszy problem napotkałam, kiedy musiałam stworzyć blok jedno-linijkowy. Skrypt nie radził sobie z tą sytuacją i tworzył wąski pasek w którym nie było tekstu, bo się on nie mieścił. Na szczęście znalazłam szybko lekarstwo. Należy w takim bloku wykorzystać atrybut line_height. W moim przypadku nadałam mu wartość 10 i jestem uratowana. Najwyraźniej autor nie wziął pod uwagę, że ktoś będzie chciał prezentować jedno-linijkowy blok i nie przetestował tego należycie.

Drugi błąd odkryłam w trakcje pisanie tego posta. Jeśli tylko w kodzie pojawi się tabulator skrypt zgłasza błąd. Okazuje się, że we wtyczce nie została zdefiniowana domyślna wartość atrybutu tab_size. Ratunkiem jest użycie w znaczniku bloku tego atrybutu i nadanie mu jakiejś wartości.

Mam nadzieję, że nie natknę się na większą ilość bugów, choć zdaję sobie sprawę, że odkrywanie możliwości tej wtyczki (w dziedzinie jej konfiguracji) jeszcze przede mną.