niedziela, 18 września 2011

Kolorowanie składni kodu źródłowego na blogu.

   Aby uzyskać ładne kolory we wstawianych listingach kodów źródłowych i za bardzo się nie namęczyć z własnoręczną edycją napisów korzystam z
  http://google-code-prettify.googlecode.com
Usługa ta automatycznie rozpoznaje jaki język programowania został wybrany i odpowiednio go formatuje.
   Instalacja takiego cudka na stronie jest banalna.
W szablonie strony (w przypadku bloggera Projekt->Edytuj kod HTML) wstawiamy między tagami <head> i </head>
<script src='http://google-code-prettify.googlecode.com/ svn/trunk/src/prettify.js' type='text/javascript'/>
<link href='http://google-code-prettify.googlecode.com/ svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
Natomiast w tagu <body > dodajemy onload='prettyPrint()'
Część mojego szablonu po tych operacjach wygląda następująco:

...
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
</head> 
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='prettyPrint()'>

...

Teraz wystarczy we wpisywanych notkach użyć:
<code class="prettyprint"> …… </code>
Albo aby kod był w ramce:
<pre class="prettyprint"> …… </pre>
W miejsce kropek wstawiając kod źródłowy.

Oczywiście istnieje dużo możliwości konfiguracyjnych naszego formatowania ale na początek wystarczy to.


Plik README projektu znajduje się tutaj

Brak komentarzy:

Prześlij komentarz