Dziś będzie troszkę nietypowo. W trakcie dyskusji na grupie Jacek zapytał mnie:

Właśnie! Miałem o to zapytać już wczoraj. Jak zrobiłeś ten styl dla
prezentowania kodów źródłowych, itp? Bardzo mi się to podoba.
Dodatkowo przypadło mi do gustu owe „Gdzie warto się udać”.

Pytanie dość interesujące. Ale zacznę od końca. „Gdzie warto się udać” można dodać w następujący sposób:

na początek wybieramy Szablon -> Elementy Strony

Rysunek 1

następnie klikamy na Dodaj element strony i pokazuej się:

Rysunek 2

Potem klikamy „lista linków”:

Rysunek 3

Wpisujemy tytuł, dodajemy linki.

Teraz ciekawsza część, czyli kolorowanie składni. Najpierw trochę teorii.

Kod na stronie – trochę teorii

Blogi poświęcone programowaniu zazwyczaj pełne są przykładowego kodu. Wynika to oczywiście z faktu, że głównym celem takich stron jest prezentacja rozwiązań. Wielu blogerów olewa jednak problem prezentacji kodu. W najlepszym przypadku wstawiają go w znacznik <pre>. W najgorszym próbują go formatować za pomocą <br />. Grupą wyróżniającą się w tym gronie są blogi poświęcone webmasterce i grafice www. Jednak te pamiętniki są pisane przez specjalistów w dziedzinie prezentacji treści na www. Co oczywiście oznacza, że koniecznie trzeba im podprowadzić kilka pomysłów.

Kod umieszczony na stronie www można podzielić na dwie grupy. Pierwsza to listingi zawierające dłuższe partie kodu źródłowego. Stanowią one clou postów i bezwzględnie powinny być wyróżnione. Jest kilka podstawowych metod wyróżnienia takiego kodu. Pierwszą, najprostszą i najlepszą jest użycie odpowiedniego css’a.

Listing 1

.post pre{<br></br>  background-color: rgb(88%, 88%, 78%);<br></br>  border: 1px dotted rgb(18%, 18%, 18%);<br></br>  padding: 5px 8px;<br></br>}<br></br>

Ten jest na żywca zerżnięty z mojego bloga. By go wkleić wystarczy wybrać „Szablon” -> „Edytuj kod HTML”. Gdzie to patrz rys. 1. Drugą metodą, którą obecnie rozważam, jest użycie specjalnego skryptu do podświetlania kodu. Istnieją dwa rodzaje tego typu oprogramowania. Pierwszy działający po stronie serwera i tym nie będę się zajmować oraz drugi oparty o Javascript i działający po stronie przeglądarki. Z rozwiązań javascriptowych testuję obecnie syntaxhighlightera, który ma wsparcie ze strony googla. Jest to ciekawe narzędzie, które może bardzo dużo, ale też zmusza do myślenia i kombinowania. Chodzi tu raczej o dopisywanie swoich dodatków niż samą instalację. Sam skrypt wymaga pewnych niewielkich interwencji w nasz kod przede wszystkim musimy używać atrybutów name=”code” i class=”nazwa\_języka„. Jest to na początku uciążliwe, ale można się przyzwyczaić. Druga sprawa to konieczność dopisania własnego css’a do kolorów. Jednak powiem szczerze da się to zrobić.

Ok. Wspomniałem coś o drugim rodzaju kodu. Chodzi mi tu o wstawki in-line, które powinny być zamykane w tagu <samp>. Warto samego taga opatrzyć jakimś ładnym cssem, choć nie jest to koniecznie ponieważ co do zasady wyświetlany jest z czcionką serif.

Kilka porad jak wstawiać kod.

Od dziś publicznie obiecuję, że będę podpisywał rysunki i listingi. Postaram się też zrefaktoryzować stare posty, by nadać im odpowiednią formę.

Właśnie tyle się wymądrzam może więc jakieś rady? Wstawiając kod na stronę warto trzymać się kilku bardzo prostych zasad:

1. Używać <pre>

Nie jest to może jakoś wybitnie semantyczne, ale na tą zaletę, że trzymane jest formatowanie kodu.

2. Używać stonowanych kolorów

Kod ma być czytelny, ale jego przejaskrawienie na przykład czerwony + zielony spowoduje szybkie zmęczenie w trakcie czytania. Najlepiej używać kolorów zimnych, brązów lub ciemnych pasteli z innej palety barw niż ma strona. Uniwersalną paletą są szarości. Źłym pomysłem jest białe na czarnym. Najlepsze zestawienia moim zdaniem to brązy i niebieski, jasna czerwień i niebieski, zieleń i pomarańcz, żółty i szary.

3. Nie bój się sztucznego łamania wierszy

Jeżeli kod nie mieści się w pojedynczej linii należy ją złamać <br />, a nie zmuszać czytelnika do przewijania strony w bok. Jest to nie wygodne i powoduje że nie widać całości kodu. Pamiętać należy tylko by wiersz zakończyć znakiem ‘/’. To da do zrozumienia, że kolejna linia jest kontynuacją obecnej.

4. Podpisuj fragmenty

Jest to bardzo ważne ponieważ przy nagromadzeniu krótkich listingów, obrazków i tabel stwierdzenia „powyżej”, „zaprezentowany kod”, „na poniższym rysunku” zaczynają tracić sens. Moje szablony to:

Listing 2

<p class="listing">Listing 1</p><br></br>kod<br></br><br></br><p class="pic">tu obrazek<span class="pictit">Rysunek 1</span></p><br></br><br></br><p class="tabtit">Tabla 1</p><br></br><table>...</table>

Tyle na dziś. Najprawdopodobniej w najbliższym czasie zacznę przenosić kolorowanie składni na jakiegoś highligther’a. Mogą się dziać cuda z layoutem