Prowadząc stronę o tematyce webmasterskiej było oczywiste, że nadejdzie taki moment w którym będę chciał przedstawić użytkownikowi listing kodu/składni w jakimkolwiek języku, czy to xHTML, PHP lub CSS. Na początku postanowiłem ambitnie podejść do sprawy, pisząc swój własny, autorski skrypt, jednak głównie z powodu małej ilości wolnego czasu (czyt. brakiem chęci) poczynania te zakończyły się fiaskiem.
Po przeszukaniu kilku, kilkunastu for internetowych, oraz po zasięgnięciu informacji na kilku grupach dyskusyjnych doszedłem do wniosku, że w zupełności wystarczy mi gotowy system kolorowania składni – GeSHi. Było to rozwiązanie idealne, ponieważ mój serwis oparty jest na CMS’ie Joomla!, do którego wbudowano już wspomniane „kolorki”. Kilka prostych czynności pozwoli je uaktywnić.
Jednak zanim rozpoczniemy jakiekolwiek działania, krótko o samym GeSHi. Zobaczmy co mówi nam o tym Wikipedia:
GeSHi (Generic Syntax Highlighter) – biblioteka (klasa w PHP) umożliwiająca kolorowanie składni ponad 100 języków (skryptowych, programowania itp.), w tym tak popularnych jak PHP, CSS, C++, Java, JavaScript, XML, HTML, MySQL, Visual Basic, C#,ASP i wielu innych.
Tak więc stoi przed nami dość potężne narzędzie, dzięki któremu nasze listingi nie będą już szare i niezauważalne w gąszczu zdań na naszej stronie. Zabierzmy się więc do pracy.
Jak wiemy, w Joomli, przy zapisie artykułów zostają usunięte niektóre znaczniki HTML, PHP, czy JS, a to wszystko ze względów bezpieczeństwa (niekontrolowane przejęcie strony). Tak więc na samym początku powinniśmy wyłączyć tę opcję dla konta Super Administratora. Wybieramy w menu: Artykuły >> Wszystkie artykuły, a następnie klikamy w ikonkę Preferencje. Zaznaczamy na liście wszystkich użytkowników (oprócz konta Super Administrator) i wybieramy: Czarna Lista.
Kolejną czynnością jest włączenie dodatku GeSHi na naszej kopii Joomla!. Wybieramy: Rozszerzenia >> Dodatki i tam szukamy pozycję Content – Code Highlighter (GeSHi), a następnie włączamy ją.
Na koniec powinniśmy ustawić dodatek Content – Code Hightlighter (GeSHi) powyżej Content – Email Cloaking.
Aby wstawić pokolorowany kod, musimy umieścić go pomiędzy znacznikami:
<pre xml:lang=”atrybut„>kod</pre>
Dokonujemy tego w edytorze WYSIWYG po uaktywnieniu opcji Przełącz edytor (tak aby widoczny był kod xhtml).
W miejscu lang=”atrybut” wpisujemy odpowiednią składnię, w zależności od wybranego przez nas rodzaju kodu:
- CSS – wpisz parametr z atrybutem: lang=”css”
- Html – wpisz parametr z atrybutem: lang=”html4strict”
- JavaScript ? wpisz parametr z atrybutem: lang=”javascript”
- PHP – wpisz parametr z atrybutem: lang=”php”
- SQL – wpisz parametr z atrybutem: lang=”sql”
- XML – wpisz parametr z atrybutem: lang=”xml”
