sobota, 15 listopada 2008

kolorowanie kodu źródłowego na blogu

Już od moich pierwszych spotkań z blogspotem brakowało mi możliwości ładnej prezentacji kodu źródłowego na jego stronach. Inne serwisy, takie jak wikidot.com pozostawiały (i pozostawiają) go daleko w tyle. W końcu jednak mi się udało coś na to poradzić...

Dokładnie nie mi, tylko twórcom projektu syntaxhighlighter. To narzędzie, to nic więcej jak zestaw skryptów JavaScript, które kolorują i ozdabiają kod źródłowy.

Aby skorzystać z tego wynalazku dołączyłem do swojego bloga dedykowany widget. Na stronie http://fazibear.googlepages.com/blogger.html kliknąłem w ikonkę Add to Blogger. Pasek tytułowy pozostawiłem pusty, dzięki temu widget pozostaje niewidoczny.

Jeśli chodzi o instalację skryptów syntaxhighlighter, to by było na tyle. Uźycie ich, jest równie proste. Kod źródłowy wystarczy otoczyć tagami pre lub textarea o parametrach name="code" class="kod-języka". Obsługiwane języki to:

język kod języka
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt


efekt jest mniej więcej taki:



Niezłe... ale to jeszcze nie koniec. Takie bloki kodu można konfigurować. W tym celu kod języka należy uzupełnić opcjami rozdzielonymi dwukropkiem. Dostępnych jest 5 parametrów konfiguracyjnych:



nogutter Ukrywa boczny pasek z numerami linii.
nocontrols Ukrywa górne kontrolki.
collapse Automatycznie wcięcia.
firstline[value] Ustawia numer pierwszej linii value. Domyślna wartość to 1.
showcolumns Pokaże numery kolumn


i tak na przykład


<pre name="code" class="java:nocontrols:firstline[76]"">
public class Hello {
private static final String HELLO_MSG = "Dzień dobry, cześć i czołem!"
}
</pre>


wyświetli blok kodu bez kontrolek, w dodatku pierwsza linia kodu będzie miała numer 76.

No po prostu rewelacja. Niestety nie zupełnie. Syntaxhighlighter nie jest też pozbawiony bugów. Jeden z nich można podziwiać na przykładzie mojego poprzedniego posta "Uprowadzenie sesji". Prezentuję tam klasę:


public class UserManager {

private List users;

public UserManager() {
users = new ArrayList(3);
User user1 = new User();
user1.setLogin("user1");
user1.setPassword("pass1");
user1.setBalance(54321);
User user2 = new User();
user2.setLogin("user2");
user2.setPassword("pass2");
user2.setBalance(65354);
User user3 = new User();
user3.setLogin("user3");
user3.setPassword("pass3");
user3.setBalance(91254);
users.add(user1);
users.add(user2);
users.add(user3);
}

public boolean check(String login, String password) {
User user = loadUser(login);
return user != null && user.getPassword().equals(password);
}

public User loadUser(String login) {
for (User user : users) {
if (user.getLogin().equals(login)) {
return user;
}
}
return null;
}

public void setUsers(List users) {
this.users = users;
}
}


która po upiększeniu przez syntaxhighlighter wygląda tak:



public class UserManager {

private List users;

public UserManager() {
users = new ArrayList(3);
User user1 = new User();
user1.setLogin("user1");
user1.setPassword("pass1");
user1.setBalance(54321);
User user2 = new User();
user2.setLogin("user2");
user2.setPassword("pass2");
user2.setBalance(65354);
User user3 = new User();
user3.setLogin("user3");
user3.setPassword("pass3");
user3.setBalance(91254);
users.add(user1);
users.add(user2);
users.add(user3);
}

public boolean check(String login, String password) {
User user = loadUser(login);
return user != null && user.getPassword().equals(password);
}

public User loadUser(String login) {
for (User user : users) {
if (user.getLogin().equals(login)) {
return user;
}
}
return null;
}

public void setUsers(List users) {
this.users = users;
}
}


Skąd na końcu </user></user></user>?
Nie wiadomo...

5 komentarzy:

Krzysiek pisze...

http://toolsmatter.blogspot.com/2008/07/blogger-i-syntax-highlighter.html

Pozdrawiam,
Krzysiek :)

Jacek pisze...

ja polecam także "google code prettify" - link: http://code.google.com/p/google-code-prettify/
napisałem kilka słów o tym u siebie:
http://jacekciereszko.pl/2008/08/formatowanie-kodu-w-blogger.html

Pozdro,
JAcek Ciereszko

MZ pisze...

dzięki za informacje. Przy najbliższej okazji obczaję też google code prettify.

Unknown pisze...

Ostatnie <user> są dodatkiem/zakończeniem typu szablonowego user, który użyłeś w kodzie, chociaż pewnie później go usunąłeś. <user> dla parsera html to kolejny, nieznany znacznik, podczas gdy dla parsera javy 1.5+ to wskazanie na użycie konstrukcji określenia typu w liście.

Anonimowy pisze...

dobry poczatek