Google Code: Prettify

W zeszłym roku zainteresowałam się Syntax Highlighter'em, którego zadaniem jest przedstawiać na stronach internetowych kod (html, css, js, c, itd.) w sposób czytelny. Na Google Code możemy znaleźć alternatywę, która jest o tyle wygodniejsza, że nie trzeba za każdym razem zaznaczać jaki język wyświetlamy - wykonuje się to automatycznie.

Sekcja HEAD

Przed zamknięciem znacznika </head> linkujemy do odpowiedniego skryptu, wstawiając:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Jeżeli chcemy skorzystać z szablonu innego niż domyślny (galeria szablonów), wówczas wpisujemy odpowiednią nazwę (w przykładzie - Sunburst):

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script>

I to tyle! Właściwie ta jedna linijka załatwia nam całą sprawę.

HTML

Teraz wystarczy nasz kod, który chcemy przedstawić na stronie, umieścić między znacznikami <pre></pre>, <code></code> lub <xmp></xmp>, pamiętając o dodaniu klasy class="prettyprint"

a skrypt wykona resztę pracy za nas. <pre class="prettyprint"> Tutaj wstawiamy nasz kod HTML, CSS, lub inny Wiele linii kodu </pre>

Jeśli w powyższym przykładzie brakuje Wam numeracji każdej linii, wystarczy dodać jedną klasę.

CSS

<style> .prettyprint ol.linenums > li { list-style-type: decimal; } </style>

HTML

<pre class="prettyprint linenums">Tutaj wstawiamy nasz kod HTML, CSS, lub inny Wiele linii kodu </pre>

Koniec :)

Linki: Galeria styli, Getting started (eng.)
Download: code.google.com