Prowadząc blog czy wortal w którym czasami wspominamy o programowaniu i udostępniamy choć małe kawałki kodu powinniśmy używać kolorowania jego składni. Wszyscy blogerzy mogą skorzystać z dobrodziejstwa GeSHi, który koloruje za nas składnie, a użytkownicy systemu Joomla! mają go w standardzie. Niestety większości osób dodatek w Joomla! nie działa...

Dlaczego GeSHi nie działa?

Po pierwsze liczba języków, których składnie może pokolorować GeSHi wynosi ponad 130, a w Joomli znalazło się tylko kilka. Po drugie domyślne ustawienia Joomli nie pozwalają na kolorowanie. Poniżej krótki tutorial jak zrobić kolorowanie składni w Joomla.

Jak włączyć GeSHi w systemie Joomla

Na samym początku pobieramy paczkę GeSHi ze wszystkimi wtyczkami. Można ją pobrać ze strony producenta lub z innych serwerów (nie podaję linków, bo często się zmieniają) paczka, którą ja pobrałem nazywała się: GeSHi-1.0.8.3.

Po rozpakowaniu interesuje nas folder GeSHi-1.0.8.3\geshi\geshi gdzie mamy wtyczki kolorujące różne języki. Wybieramy te, których kod będziemy umieszczać na swojej stronie (ja wybrałem css.php, delphi.php, pascal.php i kilka innych) i kopiujemy je do folderu: [nasza_instalacja_joomla]\libraries\geshi\geshi. Pamiętajmy o tym jak nazywały się te pliki php, bo będzie nam to jeszcze w przyszłości potrzebne. np. C++ wstawimy do kodu pisząc cpp(a nie c++) w odpowiednim miejscu.

Konfiguracja Joomli dla GeSHi

Pierwszy etap za nami! Teraz pora na konfigurację Joomli. Logujemy się na zaplecze i wybieramy: Rozszerzenia/Dodatki. Na liście znajdujemy Content - Code Hightlighter (GeSHi) i publikujemy go. Dla tego dodatku nie określa się parametrów i wygląd bloków z kolorowaną składnią możemy ustawić w CSSie templatki, ale o tym później.

GeSHi już w tym momencie działa, ale nadal nie widać tego skutków, dlaczego? Otóż Edytor Tiny MCE (którego większość osób używa) wycina znaczniki definiujące kolorowanie danego języka. Aby temu zaradzić mamy 2 wyjścia: Albo wyłączamy edytor(robimy do w konfiguracji użytkowników - wybieramy dla administratora No Editor) i piszemy w czystym XHTML w artykułach (co bardziej doświadczonym osobom gorąco polecam), albo tuningujemy odpowiednio ten JavaScriptowy edytor:

Zmiana ustawień Tiny MCE

Znów logujemy się na zaplecze Joomla i zmieniamy ustawiania edytora Tiny MCE
Panel administracyjny/Rozszerzenia/Dodatki/Tiny MCE 2.0
Czyść podczas zapisu/Nigdy
I to by było na tyle... Dla pewności opiszę jeszcze jak kolorować kod w artykule, bo wiele osób ma z tym problem.

Wstawianie do artykułu kodu

Wiele zależy od tego czy piszemy w czystym XHTML czy używamy edytora Tiny MCE. Jeżeli nie mamy edytora to piszemy cały kod artykułu (nagłówki, paragrafy, cytaty), a w miejscu gdzie chcemy wstawić kod np. pascala otwieramy znacznik <pre xml:lang="pascal">, wklejamy cały kod i zamykamy </ pre>. Ważne jest, aby w PRE nie zagnieżdżać innych znaczników, bo się nam może całość rozsypać. Nie musimy natomiast do naszego wstawianego kodu dodawać znaczników przełamania linii, nie trzeba też zamieniać znaków specjalnych. Wyjątkiem są trójkątne nawiasy, które obowiązkowo trzeba zamienić na encje. & lt; oraz & gt;.

Jak sprawa wygląda w edytorze? Po konfiguracji, którą przeprowadziliśmy wcześniej nie będzie nam płatał figli. Piszemy cały artykuł (za wyjątkiem kodów które chcemy wstawiać), formatujemy wpis tak jak chcemy i dopiero na końcu przechodzimy do wklejania kodów w odpowiednie miejsca. Wystarczy kliknąć na ikonkę HTML (Edit HTML Source) i w nowo otwartym okienku znaleźć miejsce gdzie chcemy wkleić kod (nie powinniśmy go zagnieżdżać w znaczniku P) i postępujemy analogicznie jak w poprzednim punkcie. Na koniec klikamy na przycisk UPDATE i zapisujemy artykuł.

CSS dla znacznika PRE

Można by już zakończyć, ale miałem wspomnieć o CSSie dla PRE. Jako, że znacznika PRE będziemy używać wyłącznie w treści artykułów można odwołać się do odpowiedniej klasy, którą nadaje GeSHi. Ja zrobiłem to tak:

 
pre{
    font-size:11px;
    background: #fff url(../images/code.jpg) left repeat-y;
    padding-left:15px;
    overflow:auto;
} 
 

Czcionka dla kodu powinna być mała - mało kto będzie czytał to bezpośrednio na stronie, a szerokość dla treści też mamy ograniczoną i warto mieć to na uwadze. Kod pokolorowany z GeSHi najlepiej wygląda na białym tle i tak to zostawmy (ja zrobiłem jeszcze pasek z lewej strony, który informuje, o tym, że mamy kod w danym miejscu). Wcięcie również pomaga nam optycznie rozdzielić treść wpisu od kodu źródłowego. Dzięki ostatniemu parametrowi linia kodu dłuższa niż szerokość naszej kolumny z treścią nie zostanie ucięta, ani nie wyjdzie na prawą kolumnę (jeśli takową mamy), ale pojawią się Scrolle do przesuwania poziomego - myślę, że to najlepsze wyjście. Oczywiście dla klasy PRE możemy dodać inne parametry - zależy to już od indywidualnych potrzeb.

Po długiej walce udało się nam zapanować nad GeSHi. Dopiero na koniec rozwinę ten zagadkowy skrót: GeSHi - Generic Syntax Highlighter. Całe to rozwiązanie jest bardzo dobre, ale ma jedną wadę - generuje gigantyczny kod XHTML. Użyjcie go i sprawdźcie źródło strony - tony kodu, span obok spanu, większość stylów typu inline. Nie wygląda to dobrze od strony SEO (choć nie ma to aż takiego dużego znaczenia), ale nie mamy innego wyjścia: albo czytelny kod na stronie, albo porządek w kodzie - trzeba wybierać.

Wyłączenie Tiny MCE wyraźnie przyspieszyło moją pracę na zapleczu Joomli. Nie muszę czekać na załadowanie się tego gigantycznego kombajnu...

Procek