<pre>
Tekst sformatowany wstępnie: zachowuje spacje, tabulatory i przełamania linii dokładnie tak, jak w kodzie.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<pre><code>function greet(name) {
return 'Cześć, ' + name + '!';
}
console.log(greet('Ola'));</code></pre>Definicja i zastosowanie
#Zwykle przeglądarka skleja kilka spacji w jedną i ignoruje przełamania linii w kodzie HTML. Element <pre> wyłącza to zachowanie: tekst wyświetla się dokładnie tak, jak wygląda w kodzie, z każdą spacją, tabulatorem i nową linią. Domyślnie używa czcionki o stałej szerokości znaków.
Najczęściej zawiera listingi kodu, wyniki poleceń z terminala, drzewa katalogów albo rysunki ze znaków ASCII. Kod programu umieszczaj w parze <pre><code>…</code></pre>: <pre> dba o formatowanie, a <code> mówi, że to kod.
Znaki < i & nadal mają w środku specjalne znaczenie, więc zapisuj je jako < i &. Długie linie nie zawijają się same i mogą wystawać poza kontener, dlatego zwykle dodaje się overflow-x: auto. Pojedyncze przełamanie linii tuż po znaczniku otwierającym parser pomija, więc treść możesz spokojnie zacząć od nowej linii.
Składnia
#<pre>
tekst, który zachowa
wszystkie odstępy
</pre>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<pre>
moja-strona/
├── index.html
├── css/
│ └── style.css
└── js/
└── app.js
</pre><pre><code><a href="/kursy">Kursy & ścieżki</a></code></pre>W kodzie źródłowym stoją encje, a w podglądzie widać zwykłe znaki <, > i &.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
pre {
display: block;
font-family: monospace;
white-space: pre;
margin-block: 1em;
}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
#- Blok kodu zapisuj jako
<pre><code>, a krótki fragment w zdaniu jako samo<code>. - Dodaj
overflow-x: auto, żeby długie linie przewijały się w poziomie, zamiast rozpychać stronę na telefonie. - Rysunek ze znaków ASCII umieść w
<figure>z opisem w<figcaption>, bo czytnik ekranu odczyta go jako ciąg przypadkowych symboli.
Powiązane hasła
#- <code>Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.
- <samp>Przykładowy wynik działania programu: komunikat, odpowiedź konsoli albo treść błędu.
- <kbd>Dane wprowadzane przez użytkownika: klawisze, skróty klawiszowe i polecenia do wpisania.
- <p>Akapit tekstu.
- <br>Przełamanie linii w miejscu wstawienia, bez zaczynania nowego akapitu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.