Wyświetlanie kodu / Code

4 695 0

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.

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

&lt; dla < (less than) oraz &gt; dla > (greather than).

Przykład

Kolor fonta w CSS definiujemy poprzez p { color: #333; }

Klasę do elementu HTML dodajemy poprzez <p class="class-name">...</p>

Kod

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>

Przykład

y = mx + b

Kod

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.

Przykład

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

Kod

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>

Przykład

Komunikat zwrócony przez wykonywany program.

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (17 głosów, średnia: 4,53 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*