<code>

Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.

Wyświetlanie
inline
Znacznik zamykający
Wymagany
Dozwolona zawartość
Treść frazowa (phrasing content)
Na tej stronie

Przykład

#
HTML
<p>Aby wypisać tekst w konsoli, użyj funkcji <code>console.log()</code>.</p>
<p>Główny plik strony zwykle nazywa się <code>index.html</code>, a akapit tworzy znacznik <code>&lt;p&gt;</code>.</p>
Podgląd

Definicja i zastosowanie

#

Element <code> oznacza fragment kodu: nazwę zmiennej, funkcji lub znacznika, nazwę pliku, polecenie albo krótki kawałek programu. Przeglądarki wyświetlają go czcionką o stałej szerokości znaków.

W zdaniu wystarczy sam <code>. Wielolinijkowy listing umieść w <pre><code>…</code></pre>, bo samo <code> skleja spacje i ignoruje przełamania linii, tak jak zwykły tekst.

Znaki < i & zapisuj jako &lt; i &amp;, inaczej przeglądarka potraktuje przykładowy HTML jak prawdziwe znaczniki. Język kodu zwyczajowo podaje się w klasie z przedrostkiem language-, np. class="language-js". Z tej konwencji korzystają biblioteki do kolorowania składni.

Pokrewne elementy to <kbd> (to, co wpisuje użytkownik), <samp> (to, co odpowiada program) i <var> (zmienna we wzorze lub symbol zastępczy).

Składnia

#
Składnia
<code>fragment kodu</code>

Atrybuty

#

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

#
Blok kodu z oznaczeniem języka
HTML
<pre><code class="language-python">for lesson in range(1, 4):
    print("Lekcja", lesson)</code></pre>
Podgląd

Domyślny CSS

#

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS
code {
  font-family: monospace;
}

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Pamiętaj o encjach: &lt; zamiast < i &amp; zamiast &.
  • Blok kodu to <pre><code>, krótki fragment w zdaniu to samo <code>.
  • Jeśli strona koloruje składnię, dodaj klasę z nazwą języka, np. language-css.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.