Kolorowanie składni na stronie www
Ponieważ blog ten z założenia ma być o tematyce programistycznej, nie wyobrażam sobie pisania postów bez dobrego kolorowania składni przedstawianych przykładów. Postanowiłem poszukać kilka ogólnie znanych metod uzyskania kolorowej składni popularnych języków. Postanowiłem zawęzić horyzont do najbardziej mnie interesujących GeSHi, SyntaxHighlighter oraz Highlight.js.
Wystarczy CSS
Oczywiście nie zawsze musimy korzystać z osobnych skryptów, aby osiągnąć zadowalające efekty. Czasami wystarczy użyć czystego CSS oraz tagów <pre> oraz <code>. Poniżej przedstawiłem przykładowy sposób ostylowania tych znaczników.
pre {
background: #f0f0f0;
border-left: 2px solid #ccc;
font-size: 12px;
line-height: 20px;
margin: 0 auto;
overflow: auto;
overflow-Y: hidden;
width: 600px;
}
pre code {
color:#333;
display: block;
font-family: "Courier New",Courier,monospace;
margin: 0 0 0 20px;
padding: 15px 0;
}Jest to bardzo prosty sposób dzięki któremu osiągamy przyzwoite efekty, w zupełności wystarczające do przedstawienia mało skomplikowanego kodu jak style CSS czy fragmenty HTML. Metoda taka jest używana miedzy innymi przez Css Globe oraz CSS-Tricks.
GeSHi
Czyli Generic Syntax Highlighter to działający po stronie serwera skrypt zwracający ostylowany kod gotowy do prezentacji na stronach internetowych. Skrypt przy wersji 1.0.8.3 obsługuje 132 języki programowania! Liczba ta jest imponująca, podobnie jak opcje, dzięki którym możemy w bardzo elastyczny sposób dostosować wygląd kodu do naszych wymagań. Dodawanie kolejnych języków nie jest skomplikowane, jednak nie wyobrażam sobie osoby, która nie znajdzie w skrypcie lub na forum interesującego go języka.
GeSHi po rozpakowaniu zajmuję prawie 2MB (bez katalogów contrib i docs, które dokumentacja zaleca usunąć) co jest zdecydowanie za dużo, wiec warto na samy początku usunąć z katalogu geshi wszystkie języki których nie zamierzamy używać. Mnie udało się odchudzić katalog do 500kB. Samo używanie skryptu jest bardzo proste:
if (!class_exists('GeSHi', FALSE))
{
require_once DOCROOT.'plugins/php/geshi/geshi.php';
}
/**
* Inicjacja skryptu. Zmienna $data jest ciąg znaków, który
* chcemy ostylować, drugi parametr określa język.
*/
$geshi = new GeSHi($data,'php');
// otacza ciąg znacznikiem pre
$geshi->set_header_type(GESHI_HEADER_PRE_VALID);
// numeruje linie
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 5);
// wykonanie skryptu
echo $geshi->parse_code();Przykład zwracanego kodu możesz zobaczyć tutaj. Według mnie wadą tego rozwiązania jest fakt, iż aby ostylować kod, trzeba jego zawartość sparsować co w przypadkach systemów CMS będzie wiązało się z odpowiednim otagowaniem kodu (np. [geshi](kod)[/geshi]). Możliwe, że istnieje wtyczka do TinyMCE i FCK, które wspomagają ten proces, ewentualnie jeżeli ktoś sie bedzie decydował na GeSHi może sobie taka wtyczke napisać. Osoby te napewno z chęcia skorzystają z solidnej i całkiem obszernej dokumentacji.
Highlight.js
Użycie skryptu Highlight.js jest kolejnym sposobem na prezentacje kodu na swojej stronie. Tym razem odbywa się to po stronie użytkownika przy wykorzystaniu JavaScript. Skrypt jest niezwykle prosty w użyciu, właściwie jest w stanie sam znaleźć i pokolorować blok kodu. Prosty przykład użycia przedstawiam poniżej:
//dodajemy pliki js oraz wybrany przez nas styl w formie pliku css
<script src="plugins/js/highlight/highlight.js" type="text/javascript"></script>
<script src="plugins/js/highlight/languages/php.js" type="text/javascript"></script>
// uruchamiamy skrypt i zawartosc tagow code bedzie podświetlona
<script type="text/javascript">
hljs.initHighlightingOnLoad('php');
</script>
Działanie skryptu można zobaczyć w kodach zamieszczonych na naszym serwisie. Wadą tego rozwiązania jest stosunkowa mała możliwość ingerowania w wygląd kodu, brak opcji numerowania linii oraz stosunkowo niewielka liczba obsługiwanych języków. Oczywiście i tak biblioteka ma swoich zwolenników, ich listę możemy znaleźć na stronie głównej skryptu.
SyntaxHighlighter
Chyba najpopularniejszy skrypt do kolorowania kodu na stronach www, niezwykle często spotkany na blogach poświęconych programowaniu. Jego opcje, możliwości konfiguracyjne pozostawiają swoich poprzedników daleko w tyle. Banalnie prosty sposób użycia z możliwości ustawienia indywidualnych opcji dla każdego bloku kodu. Po odpowiednim podlinkowaniu stylów i plików JavaScript wystarczy:
<pre class="brush:html">
<p>Przykładowy paragraf</p>
</pre>Nie chcemy numerowania linii, prosze bardzo:
<pre class="brush: html; gutter: false;">
<p>Przykładowy paragraf</p>
<p>Przykładowy paragraf2</p>
</pre>
Dla większej ilości przykładów i opcji zachęcam do odwiedzenia strony autora SyntaxHighlighter, gdzie znajdziemy bardzo dobra dokumentacje i wszystkie informacje potrzebne do użytkowania skryptu. Właściwie biblioteka ta nie pozostawił mi wyboru, musiałem ją zastosować u siebie. Warto zauważyć że pełna biblioteka zajmuje lekko ponad 120 KB.
DyskusjaKomentarze: 2
Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]