RSS

zapisz się: RSS Artykuły

szukaj

Kolorowe kody źródłowe na stronie od Google

Komentarze 0

Kolorowy kodJeśli używasz na stronie, tak jak ja kodów źródłowych np. HTML, PHP, JavaScript czy inne, to ten dodatek sprawi, że będą one wyróżnione - kolorowe, tak jak w popularnych edytorach różnych języków programowych. Jest to wygodne dla czytelnika. Kolorowe kody źródłowe są przejrzystsze i oczywiście ładniejsze :)

Uwaga! Dodatek ten nie współgra w pełni z sNews. Podczas edycji artykułu/strony nie ma możliwości podglądu wpisu. Pliki dodatku kolidują z plikami sNews. A tak po za tym to wszystko działa. Nie znalazłem nic lepszego. Także jeśli koniecznie potrzebujesz opcji podglądu wpisu to niestety nie jest to ulepszenie dla Ciebie.

Ok, potrzebujemy kilku plików zewnętrznych. Całość została opracowana przez Google. Najpierw ściągamy paczkę z plikami z tej strony. Najważniejsze pliki ze ściągniętej paczki znajdują się w folderze "src". Kopiujemy stamtąd pliki "prettify.js" oraz "prettify.css" i umieszczamy na naszym serwerze. Następnie dodajemy te pliku w sekcji "head" pliku "index.php" naszego CMSa. Może to być przed samym znacznikiem zamykającym </head> jak niżej (zaznaczone fragmenty są ścieżkami do plików):

<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/prettify.js"></script>
</head>

Następnie w znaczniku "body" pliku "index.php" dodajemy fragment, jak niżej (zaznaczony kod):

<body onload="prettyPrint()">

Wszystko już gotowe. Teraz wystarczy edytując artykuły dodać do znaczników "pre" lub "code" klasę "prettyprint". Przykładowo:

<pre class="prettyprint">
<h1>Nagłówek</h2>
<p>Przykładowy tekst</p>
</pre>

Kolory można dopasować do własnych upodobań. Wystarczy wyedytować do tego celu plik CSS "prettify.css".

Z kolei gdy nie chcemy, aby jakaś część naszego kodu była pokolorowana wystarczy umieścić ją w znaczniku "span" o klasie "nocode".

Skrypt ten z reguły rozpoznaje język kodu, ale do niektórych przypadków ma osobne pliki w folderze "src". Ja używam jeszcze dodatkowo pliku "lang-sql.js" oraz "lang-css.js". Pierwszy odpowiada za kod SQL a drugi za style CSS. Aby je użyć należy je załączyć do pliku "index.php" - podobnie jak pliki "prettify.js" i "prettify.css". W przypadku użycia niestandardowego języka, jak te 2, które przytoczyłem, należy oznajmić skrypt o jego użyciu. Przykładowo, gdy użyję kodu CSS to należy dodać klasę "prettyprint lang-css", a jeśli SQl, to klasę "prettyprint lang-sql". Analogicznie z innymi dodatkowymi kodami.

Podziel się

Bookmark and Share

Komentowanie zostało zablokowane