Podświetlanie składni przy użyciu CSS – bez zewnętrznych bibliotek


SyntaxHighlighter Podświetlanie składni przy użyciu CSS bez zewnętrznych bibliotek

Obowiązek stylizacji kodu źródłowego powinien być wpisany w Kodeks Karny.

Poważnie!

Są różne strony i różni ludzie je piszą. Nawet mnie się to kiedyś zdarzało – niestety.

Ale…

Uczmy się na błędach.

Lubię gdy udostępniony kod jest czytelny i  zawarty w jakieś sensowne ramy a jego skopiowanie jest dziecinnie proste.

Tak bym chciał, żeby było zawsze jednak nie zawsze tak jest.

Buszując po internecie napotyka się na różne cuda. Kod nie wyróżnia się specjalnie od reszty tekstu a najgorsze są te wystające poza dany element blokowy, nachodząc na pasek boczny i zlewając się z jego treścią.

Ehhh

Napewno wiesz o tym, że jak w edytorze WP wkleisz jakiś kod HTML (cokolwiek co zawiera niedozwolone znaczniki), WP zamienia je na bezpieczne encje. I teraz udostępnij taki wpis i spróbuj się w nim odnaleźć.

Nie bez powodu powstały edytory kodu, które wyróżniają jego specyficzne części. Jeżeli nadal nie wiesz o co chodzi, otwórz sobie jakikolwiek plik PHP lub HTML w notatniku i spróbuj tak pracować przez całe życie.

Gwarantuje Ci że w końcu dostanie oczopląsu! ;)

Hej, zaraz zaraz. Ale to jest program komputerowy?! Więc?

Tak

Chodzi o efekt

Sposób działania programów na komputerze różni się od sposobu działania przeglądarki. Stylizacja kodu nie jest więc taka prosta.  Zauważ, że aby wyglądał on jak w Notepadzie++, każdy z jego elementów musi być formatowany osobno, według swojego typu, żeby zachować przynajmniej pozory odmienności. Robienie tego wszystkiego ręcznie to sporo pracy. Oczywiście zawsze możesz użyć poczciwego znacznika <code> ale…

Ale to nie o to chodzi. Chodzi o wygodę. Jak można inaczej to dlaczego by nie zkorzystac?

Dlatego

Dla nas developerów powstały specjalne biblioteki jQuery jak np.: SyntaxHighlighter, który robi całą robotę za Nas.

Jednak to już wiemy

Wiemy też, że im więcej tym ciężej. Z każdym dodatkowym skryptem nasza strona rośnie w kilobajtach.

I tego właśnie nie chcemy.

Osobiście nie lubię gdy jest coś więcej niż znacznik <link> dla stylów i mogę jeszcze ścierpieć, że WordPress sam sobie dodaje jQuery, ale każde dodatkowe skrypty tępię niemiłosiernie z nagłówka.

Dlatego, że chwasty trzeba systematycznie wyrywać, dziś zobaczysz jak podświetlać składnie przy użyciu tylko CSS i to bez zewnętrznych bibliotek.

Jeżeli zatem

Rozmiar ma dla Ciebie znaczenie.
Jeżeli jesteś przeciwnikiem używania na stronie JavaScriptu.
Jeżeli odchudzasz stronę ze zbędnych kilobajtów a pomimo tego zależy Ci na podświetleniu składni w schludny sposób z jednoczesnym zachowaniem stylu typu: 
SyntaxHighlighter,
to czytaj dalszą część tego artykułu.

Do rzeczy

Natknąłem się na tę stronę. Przejdź do niej teraz, na chwile i zobacz o co chodzi.

Ja to działa?

Każda z linii kodu jest elementem listy, zawartej pomiędzy znaczniki <ol></ol>. Dlaczego ol?

Z racji tego, że mamy do czynienia z liniami kodu, w których kolejność ma znacznie,  ol – ordered list czyli lista uporządkowana (numerowana) – najlepiej się do tego nadaje a do tego jest obsługiwana przez większość przeglądarek identyczne.

Spróbujmy zatem poeksperymentować.

Najpierw zaczniemy sobie od tego przykładu:

  1. pierwszy element listy
  2. drugi element listy

Jeżeli zbadasz sobie to teraz Inspektorem, zobaczysz dwa interesujące nas obszary:

Podświetlanie kodu - tylko CSS

Zielony, po lewej – to jest nasza lista numerowana (ol) i niebieski po prawej – to są nasze elementy listy (li). Czyli idealnie się składa, bowiem potrzebujemy numerowanej kolumny dla kolejnych wierszy i oczywiście samych wierszy. Można powiedzieć, że osiągnęliśmy efekt tabeli bez tabeli!

Zacznijmy sobie to pomału udoskonalać. Najpierw znacznik ol. Lewa kolumna musi się jakoś wyróżniać od reszty. Spróbujmy więc ją jakość sformatować. Nadajemy jej tło i kolor tekstu:

ol {
background: #284690;
color: #FFF;
outline: #FFF !important; /* tymczasowo */
}

  1. pierwszy element listy
  2. drugi element listy

 

Mamy jednolite tło na całej „powierzchni”. Żeby stworzyć efekt dwóch oddzielnych kolumn, znacznikowi <li> znów nadajemy tło:

ol li {
background: #F5F5DC;
}

  1. pierwszy element listy
  2. drugi element listy

 

I przesuwamy trochę w prawo całą tę kolumnę, zmieniając kolor tekstu dla lepszej widoczności:

ol li {
background: #FFC;
padding-left: 20px;
color: #666;
}

  1. pierwszy element listy
  2. drugi element listy

 

Jak widzisz, element ol przejął kolor od swojego dziecka i teraz nie widać numerów. Trzeba by było zmienić wartość koloru dla selektora li, ale wtedy znów tekst w prawej kolumnie nie będzie widoczny.

Jak zatem z tego wybrnąć?

Zapomnieliśmy przecież, że budujemy obudowę dla naszego kodu. A w czym się umieszcza kod? Z znaczniku <code>. Spróbujmy:

ol li code {
color: #666;
background: #FFC;
display: block;
border-radius: 0px;
padding-left: 20px;
}

 

W tym przypadku musiałem zastosować nieco więcej cech, żeby nadpisać style motywu.

 

  1. pierwszy element listy
  2. drugi element listy

 

Właściwie to tło i pozostałe style z selektora li przeszły na code.

Czego nam jeszcze brakuje?

Przy takim kontraście tabela jest nieczytelna. Jednym ze sposobów poprawy czytelności dużych tabel jest kolorowanie naprzemiennych wierszy. Idealnie nadają się do tego pseudo-klasy odd i even:

ol li:nth-child(even) code {background: #CCC}
ol li:nth-child(odd) code {background: #E6FFFF;}

  1. pierwszy element listy
  2. drugi element listy

 

Praktycznie do pełni szczęścia potrzeba nam jeszcze jednej rzeczy czyli obramowania.

ol {
border: 1px dotted #ccc;
}
ol li {
border-bottom: 2px solid #ececec;
}

  1. pierwszy element listy
  2. drugi element listy

 

Właściwie to by było już wszystko.

Mógłbyś się jeszcze pobawić z tymi stylami długo, w zależności od tego jak lubisz, albo dostosować kolory do ogólnie przyjętych. W tym przypadku nie korzystałem z tła obrazkowego jak w oryginalnym przykładzie (co pewnie dałoby inny efekt) a jedynie użyłem czystego CSS. Jak pewnie zauważyłeś, każda z linijek kodu musi być wstawiona pomiędzy znacznik <code>.

Jest więc z tym trochę zachodu, ale zakładamy, że do tak spreparowanego kodu nie wrócimy już nigdy.

Jeżeli jakieś elementy zawartej funkcji chciałbyś pokolorować, wystarczy, że użyjesz znacznika <span> lub <strong> i nadasz im osobną klasę z osobnym kolorem:

Na koniec, aby podsumować całą pracę przedstawiam Ci kawałek gotowego kodu i jego efekt w postaci podświetlonej. Najpierw kod HTML:

<ol class="efekt">
<li><code>ol.<span class="class">efekt</span> { </code></li>
<li><code> background: #284690; </code></li>
<li><code> color: #FFF; </code></li>
<li><code> outline: #FFF !<strong class="red">important</strong>;</code></li>
<li><code> border: 1px dotted #ccc; </code></li>
<li><code>} </code></li>
<li><code>.<span class="class">efekt</span> li {</code></li>
<li><code> border-bottom: 2px solid #ececec; </code></li>
<li><code>} </code></li>
<li><code>.<span class="class">efekt</span> <span class="code">code</span> {</code></li>
<li><code> color: #666; </code></li>
<li><code> display: block; </code></li>
<li><code> border-radius: 0px; </code></li>
<li><code> padding-left: 20px; </code></li>
<li><code>} </code></li>
<li><code>.<span class="class">efekt</span> li:nth-child(odd) <span class="code">code</span> {</code></li>
<li><code> background: #E6FFFF; </code></li>
<li><code>} </code></li>
<li><code>.<span class="class">efekt</span> li:nth-child(even) <span class="code">code</span> {</code></li>
<li><code> background: #E6FFFF; </code></li>
<li><code>} </code></li>
</ol>

 

A teraz CSS:

  1. ol.efekt {
  2. background: #284690;
  3. color: #FFF;
  4. outline: #FFF !important;
  5. border: 1px dotted #ccc;
  6. }
  7. .efekt li {
  8. border-bottom: 2px solid #ececec;
  9. }
  10. .efekt code {
  11. color: #666;
  12. display: block;
  13. border-radius: 0px;
  14. padding-left: 20px;
  15. }
  16. .efekt li:nth-child(odd) code {
  17. background: #E6FFFF;
  18. }
  19. .efekt li:nth-child(even) code {
  20. background: #E6FFFF;
  21. }

Proste i ładne, nieprawdaż?

Zastanawiasz się pewnie: Po co to wszystko?

Ludzie podkręcają procesory, tuningują samochody, robią wszystko, żeby zmienić świat. Po co?

Mam nadzieje, że tym artykułem Cię do czegoś zainspirowałem.

Pozdrawiam.

 

P. S.

A na koniec niespodzianka dla osób, które myślały, że nie można z tego już nic więcej wycisnąć.

Gotowa wtyczka, którą możesz użyć w swoim WordPressie podczas edycji strony.

Obsługa wtyczki jest prosta.

Najpierw instalujesz wtyczkę. Po instalacji, w pasku narzędziowym edytora pojawi Ci się przycisk. Służy on do szybkiego wstawiania kodu. Możesz też zaznaczyć tekst i przycisnąć przycisk. Efekt jest ten sam.

Wtyczkę możesz pobrać z tej strony:

Wtyczka: Podświetlanie składni CSS


Otagowano:, , , , ,


Napisz odpowiedź lub dodaj komentarz


Twój adres e-mail nie będzie opublikowany. Pola oznaczone gwiazdką * są wymagane

Możesz używać tych znaczników HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>