Kolorowanie składni kodu PHP, CSS, HTML, JavaScript - poznajcie Prism

Fragmenty kodów załącza w swoich wpisach wiele serwisów, warto jednak zadbać o to, by taki kod był czytelny i przejrzysty dla czytelnika odwiedzającego nasz serwis. Jest kilka technik i sposobów na osiągnięcie celu. Początkowo korzystałem z wtyczek do WordPressa, ale nie spełniały moich oczekiwań. Nie mogłem ich w pełni skonfigurować, nie kolorowały składni w pełni lub nie działały w ogóle.\r\n\r\n## Poznajcie Prism\r\n\r\nPo dłuższym czasie szukania znalazłem taki skrypt, z którego jestem bardzo zadowolony. Dlaczego? Bo jest czytelny, pokolorowany, działa z wieloma językami, jest używany przez duże serwisy, jest bezpłatny, lekki, konfigurowalny i zgodny z walidatorem. Tak można długo wymieniać.\r\n\r\nPrism - bo o nim mowa, możemy zaimplementować na naszej stronie bezproblemowo. Piszę tak dlatego, bo cała operacja zajmuje dosłownie kilka minut. Do jego działania wystarczą dwa pliki - JavaScript i CSS.\r\n\r\nZapis w przypadku Prism wygląda następująco:\r\n\r\nhtml\r\n

<code class="language-css">p { color: red }

\r\n\r\n\r\n## Jak zaimplementować Prism na stronie?\r\n\r\nAby "zainstalować" Prism na własnej stronie internetowej należy wejść na stronę [http://prismjs.com](http://prismjs.com "Prism"). Następnie możemy się zapoznać z dokumentacją, bądź bezpośrednio pobrać Prism klikając w przycisk "Download" na samej górze strony.\r\n\r\n\r\n\r\nKolejnym krokiem jest wybranie języków, z których korzystamy - jeśli chcemy kolorować kod HTML, CSS, PHP czy SQL - to takie pozycje zaznaczamy a pozostałe możemy pominąć. Na koniec na dole strony mamy przycisk do pobrania kodu JavaScript i kodu CSS. Kod JavaScript nazwijmy prism.js a kod CSS nazwijmy prism.css.\r\n\r\nNazwy "HTML" nie odnajdziecie na liście. Jeśli jesteście zainteresowani kolorowaniem kodu HTML pozostawcie domyślnie zaznaczone "Markup".\r\n\r\nNa naszej stronie dołączamy pobrane przed chwilą pliki w ten sposób:\r\n\r\nhtml\r\n\r\n\r\n\r\n <link href="prism.css" rel="stylesheet" />\r\n\r\n\r\n <script src="prism.js"></script>\r\n\r\n\r\n\r\n\r\n## Przykłady wykorzystania\r\n\r\nSprawdźmy teraz jak to działa, jakie efekty można osiągnąć. Przykładowy kod CSS:\r\n\r\nhtml\r\n

<code class="language-css">p { color: red }

\r\n\r\n\r\nPowyższy kod da wynik:\r\n\r\ncss\r\np { color: red }\r\n\r\n\r\nPrzykładowy kod PHP:\r\n\r\nphp\r\n

<code class="language-php">

\r\n\r\n\r\nPowyższy kod da wynik:\r\n\r\nphp\r\n\r\n\r\n\r\nDwa lekkie pliki sprawiły, że załączany kod we wpisach naszej strony będzie teraz pokolorowany. Do tego będziemy mieli kontrolę nad tym, jak dokładnie kod ma być pokolorowany i jak mają wyglądać boksy z kodem na stronie. Mam nadzieję, że porada się Wam przyda.\r\n\r\nKod w znaczniku <pre> powininen być sparsowany. Na itporady.pl znajdziesz taki skrypt w narzędziach online.