2.1 Tag <pre>
Tegi <code> i <pre> są używane w HTML do prezentacji fragmentów kodu i wstępnie sformatowanego tekstu.
Pozwalają one poprawić czytelność i zachować formatowanie oryginalnego tekstu, co jest szczególnie przydatne do wyświetlania
przykładów kodu i innych materiałów technicznych.
Tag <pre> (skrót od "preformatted text") jest używany do wyświetlania tekstu w HTML w takiej formie, w jakiej jest napisany,
zachowując wszystkie spacje, nowa linie i tabulacje. To jest szczególnie przydatne do przedstawiania dużych
fragmentów kodu lub innego wstępnie sformatowanego tekstu.
Składnia:
<pre>
tekst
</pre>
Przykład:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
W tym przykładzie tekst wewnątrz tagu <pre> będzie wyświetlany z zachowaniem wszystkich spacji i nowa linie,
tak jak jest napisany w kodzie źródłowym.
Cecha tagu <pre>:
- Tag
<pre>zachowuje wszystkie spacje i przeniesienia linii w tekście - Wyświetla tekst w czcionce o stałej szerokości
- Często używany razem z tagiem
<code>do wyróżnienia kodu
2.2 Tag <code>
Tag <code> jest używany do oznaczania fragmentów kodu lub innych danych maszynowo czytelnych wewnątrz tekstu. Zwykle
stosuje się go do wyróżniania linii kodu, zmiennych, funkcji i innych elementów programowania.
<code>kod</code>
Przykład:
<p>Aby wyświetlić wiadomość w konsoli, użyj funkcji <code>console.log()</code>.</p>
W tym przykładzie tekst "console.log()" będzie wyróżniony jako kod.
Cecha tagu <code>:
- Tag
<code>wyświetla tekst w czcionce o stałej szerokości (zwykle Courier lub Consolas) - Nie zachowuje formatowania, takiego jak przeniesienia linii czy wcięcia
- Tag
<code>często jest używany wewnątrz innych tagów, takich jak<p>,<li>lub<pre>
2.3 Używanie <pre> i <code>
Do wyróżniania i formatowania dużych bloków kodu często używa się tagów <pre> i <code> razem.
To pozwala zachować formatowanie i wyróżnić tekst jako kod.
Przykład:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
W rezultacie przeglądarka wyświetli tekst z zachowaniem formatowania i wyróżnieniem kodu.
2.4 Podświetlenie składni
Do podświetlania składni można używać zewnętrznych bibliotek, takich jak Prism.js lub Highlight.js, które automatycznie rozpoznają i podświetlają składnię kodu na stronie internetowej.
Przykład użycia Highlight.js:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
W rezultacie blok kodu będzie automatycznie podświetlony zgodnie ze składnią JavaScript.
Tegi <code> i <pre> w HTML to potężne narzędzia do wyświetlania i formatowania
kodu i innych tekstów z zachowaniem oryginalnego formatowania. Korzystajcie z przyjemnością.
GO TO FULL VERSION