Prism.js jako nowoczesne podświetlanie składni

prism-advantages 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>.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *