Az előző bejegyezésemhez kerestem egy WordPress bővítményt, mellyel a példában szereplő kódrészleteket olvashatóbbá lehet tenni.
Jó néhány bővítményt végig néztem, de a SyntaxHighlighter Evolved bizonyult a legjobbnak. Letölthető a plugin saját weboldaláról és a WordPress plugin gyűjtemény oldaláról is.
A Javascripttel történő kódszínezés alapját Alex Gorbatchev által készített SyntaxHighlighter JavaScript csomag adja. Magát a plugint Alex Mills, a neten Viper007Bond néven megtalálható fejlesztő készítette sok más egyéb bővítmény mellett. Bemutatkozó oldalán kiderül hogy az Automattic nevű cégnél dolgozik, melynek egyik projektje a WordPress.com.
Telepítés után, a bővítmény beállításai között a következőket találjuk:
- színséma választása
- összes programnyelvhez tartozó javascript fájl betöltődjön-e, vagy csak az aktuális oldalon megjeleníteni kívánt programkódhoz tartozó fájl
Alapbeállításként meghatározhatjuk többek között a következő lényegesebb paramétereket:
- Számok megjelenítése a sorok elején
- Toolbar megjelenítése – a kódrészlet jobb felső sarkában megjelenő ikonsor, melyek segítségével a rész forráskódja megtekinthető, nyomtatható, vágólapra másolható.
- A kódrészletben szereplő hivatkozások kattinthatóak
- A kódrészlet “összecsukva” jelenik meg, a helyén csak 1 soros tájékoztató szöveg jelenik meg, melyre rákattintva láthatóvá válik a kódrészlet
- Light mód – a sorszámozás és a toolbar nem jelenik meg
- Hosszú sorok tördelése, a görgetősáv elkerülése érdekében
Ezen beállítások a bejegyzéseken belül, a kódrészletek beillesztése során is definiálhatóak, de ha a kód beillesztéskor nem adunk meg egyéb paramétereket, akkor az itt beállítottakat fogja figyelembe venni. Némely beállítás egymást “kioltja”, például ha a default értékeknél a Light módot bekapcsoljuk, és a sorszámozást is, akkor a Light mód lesz az erősebb, a sorszámozás nem fog megjelenni, és a bejegyzésnél is hiába adjuk meg a gutter=”true” paramétert.
Példa egy HTML kód részlet beillesztésére:
A beillesztett eredmény:
<input type="checkbox" id="DisableDate" name="DisableDate">szűrés dátum szerint
Példa egy Javascript kód részlet beillesztésére, az 5. sor kiemelésével, sorszámozás nélkül.
function OpenHelpWindow(queryString)
{
var compingImageUrl = queryString;
var windowFeatures = "width=800,height=700,scrollbars=1,resizable=1";
window.open(compingImageUrl, "Help", windowFeatures);
}
A beillesztett eredmény:
function OpenHelpWindow(queryString)
{
var compingImageUrl = queryString;
var windowFeatures = "width=800,height=700,scrollbars=1,resizable=1";
window.open(compingImageUrl, "Help", windowFeatures);
}
A támogatott programnyelvek és a különböző formázásra vonatkozó paraméterek listája itt megtalálható.