Podczas ostatnich tygodni szukałem alternatywy dla prezentowania fragmentów kodu na blogu. Od początku stosowałem określoną koncepcję, która w moim przekonaniu była semantyczna i rozwojowa. Niestety urodzaj i skomplikowanie (szereg funkcjonalności) dostępnych wtyczek dla WordPressa spowodował konieczność dokładniejszych poszukiwań. Potrzebowałem lekkiego, elastycznego, aktualnego, wręcz na miarę skrojonego rozwiązania. Gdyby wystarczyło kliknięcie i zainstalowanie jednej z kilkudziesięciu najpopularniejszych wtyczek to byłbym w niebie.
Nie ma idealnego rozwiązania
Oczywiste było sprawdzenie strony wtyczek WP, które niestety pokazało mi 159 wyników dla hasła syntax highlighting. Kolejne znalezione zestawienia w sieci prezentowały przestarzałe lub niekompatybilne pluginy, a zdecydowanie zależało mi na nowoczesnym, lekkim i zgodnym z moim podejściem rozwiązaniem.
Często jest tak, że pierwotne poszukiwania nie dają satysfakcjonujących wyników. Podczas spontanicznego czytania SM, zaintrygowało mnie formatowanie i prezentowanie kodu. Sprawdziłem źródło strony i znalazłem informacje o skrypcie używanym przez nich do podświetlania składni. Skoro taki gigant używa tego skryptu, coś w tym jest. Dalsze drążenie tematu i trafiłem na , które wyglądało na rozwiązanie idealne.
Blisko ideału
Prism.js jest lekki, nowoczesny, elastyczny i łatwy w konfiguracji. Autorka tego skryptu to Lea Verou, znana z zamiłowania do CSS i standardów sięciowych. Pamiętam ją z konferencji FrontTrends w 2010 roku.
Wersja dla WordPress znaleziona przeze mnie to Prism Syntax Highlighter. Autorem tego kodu jest z kolei Gilbert Pellegrom, ten sam, którego znacie z Dev7studios.
Kwestia konfiguracji i dostosowania skryptu do własnych potrzeb jest łatwa. Poza dołączeniem do strony arkuszy stylów i skryptu JS nie musisz nic więcej. Jeszcze prościej wygląda to w przypadku, wtyczki WordPressa. Ściągamy, uruchamiamy i działamy.
Bardzo ważne było dla mnie łatwe i szybkie dostosowanie nowego podświetlania składni w istniejących wpisach. Wystarczyło kilkadziesiąt minut do znalezienia wszystkich wystąpień typu <pre><code> w bazie wpisów i rozszerzenie ich o intuicyjne class="language-css", class="lang-markup" lub podobne w znaczniku <pre>.