W celu zwiększenia czytelności programów komputerowych stosowane są cztery rozwiązania:
Najmniej trudności sprawi w HTML-u wykonanie wcięć. Wystarczy wewnątrz elementu pre użyć wielokrotnych spacji, a otrzymamy ładnie wcięty kod. Pozostałe trzy rozwiązania wymagają dodatkowych znaczników.
Kolorowanie składni realizujemy ujmując poszczególne jednostki leksykalne kodu w dodatkowe znaczniki opatrzone klasą lub zawierające atrybut style. Na przykład kod:
...brak dostępu...
po dodaniu elementów span może wyglądać tak:
...brak dostępu...
lub tak:
...brak dostępu...
Oczywiście korzystając z klas kolorystykę kodu definiujemy w stylach CSS.
W celu dodania numeracji oraz kolorowania co drugiego wiersza konieczne jest wprowadzenie znaczników otaczających wszystkie wiersze listingu. Jednym z rozwiązań może być:
...brak dostępu...
innym, opisanym szczegółowo przez Piotra Petrusa na blogu „Perfection or Vanity” (wpis z dnia 16 czerwca 2006 r.):
...brak dostępu...
Stosując listę ol rezygnujemy z elementu pre. Numery wierszy są generowane automatycznie przez przeglądarkę. Zaś w przypadku użycia elementu span należy w każdej linijce dodać numer wiersza.
Różnica w działaniu rozwiązań ol/li/code/span oraz pre/span/span będzie widoczna po wyłączeniu interpretacji stylów CSS w przeglądarce. Lista ol nawet bez stylów będzie zawierała numerację, zaś element pre będzie numeracji pozbawiony. Wprawdzie automatyczną numerację wewnątrz pre możemy dodać wykorzystując liczniki w CSS (por. specyfikacja CSS, punkt 12.5), jednak rozwiązanie takie nie działa w IE.
Bez względu na to, który wariant wybierzemy, kod HTML będzie istotnie różnił się od oryginalnego programu źródłowego. Przedstawiona wcześniej klasa visitsCounter po dodaniu kolorowania składni oraz numeracji wierszy z wykorzystaniem listy ol przyjmie postać:
...brak dostępu...
Powyższy kod HTML pozwala ładnie wizualnie sformatować wygląd przykładu. Otrzymana witryna będzie estetyczna i czytelna. Jednak zarówno autor jak i czytelnik będą potrzebowali narzędzi, które pozwolą im na kopiowanie kodu pomiędzy środowiskiem programistycznym a stroną WWW. Dla autora konieczne będzie narzędzie, które przekonwertuje kod źródłowy do formatu HTML, zaś czytelnik będzie potrzebował konwersji odwrotnej: z formatu HTML do formatu tekstowego (kopiowanie ze źródła strony będzie uwzględniało wszystkie znaczniki, zaś podczas kopiowania z okna przeglądarki wiersze listingu będą zawierały numery).
Osobnym problemem jest rozmiar generowanego HTML-a. Zamiast dwudziestukilku bajtów class visitsCounter { } otrzymujemy niemal 400! Wzrost rozmiaru kodu jest więc ogromny.
