Wyświetlanie kodu / Code

Jeśli chcecie prowadzić technicznego bloga to z pewnością przyjdzie taki moment w którym będziecie musieli wyświetlić kawałki kodu. Twórcy Bootstrapa ostylowali dla nas podstawowe znaczniki, które do tego służą. Dzięki temu wyświetlą się nam one w innym kolorze, otoczone ramką i z „maszynowym” fontem. Z resztą czytając moje wpisy niejednokrotnie spotykacie się z takim wyświetlaniem kodu.

Rozszerzoną dokumentację wyświetlania kodu znajdziesz tutaj.

Wstawianie kodu liniowo

Pierwszy ze znaczników to znacznik <code>...</code>, który służy do umieszczenia liniowo krótkiego kawałka kodu. Musimy pamiętać, że jeśli chcemy użyć ostrych nawiasów wewnątrz tego znacznika to musimy je zapisywać jako

<p>Kolor fonta w CSS definiujemy poprzez <code>p { color: #333; }</code></p>
<p>Klasę do elementu HTML dodajemy poprzez <code><p class="class-name">...</p></code>

Wstawianie bloków kodu

Aby wstawić cały blok kodu, razem z formatowaniem tj. „wcięciami” skorzystamy ze znacznika <pre>blok kodu</pre>. Ja we wpisach akurat korzystam z pluginu, który wyświetla kod razem z kolorowaniem ale przetestujcie ten znacznik u siebie.

Wyświetlanie wzorów

Gdybyśmy musieli umieścić na naszej stronie jakiś wzór to symbole w nim zawarte możemy otoczyć znacznikiem <var>x</var>

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Wprowadzanie z klawiatury

Tworząc tutorial w którym opisujecie jakich kombinacji klawiszy musi użyć użytkownik aby wywołać jakąś akcję można otoczyć ją znacznikiem <kbd;>Esc</kbd>. Uzyskamy wtedy ładne formatowanie przypominające przyciski klawiatury. Znacznika tego można również używać gdy podajemy polecenia, które należy wpisać w konsoli.

By w Linuksie przejść do katalogu domowego wpisz <kbd>cd</kbd> w oknie terminala.<br>
Aby skopiować tekst, użyj kombinacji <kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd>

Wyświetlanie komunikatów

Tutaj znów przykład z komputerami. Gdy chcemy pokazać co pojawi się w oknie konsoli po wykonaniu jakiejś komendy możemy ją otoczyć znacznikiem <samp></samp>

<samp>Komunikat zwrócony przez wykonywany program.</samp>