2.1 Тег <pre>
Теги <code> та <pre> використовуються в HTML для представлення фрагментів коду і попередньо відформатованого тексту. Вони дозволяють покращити читабельність і зберегти форматування вихідного тексту, що особливо корисно для відображення прикладів коду й інших технічних матеріалів.
Тег <pre> (скорочення від "preformatted text") використовується для відображення тексту в HTML у тому вигляді, в якому він був написаний, зберігаючи всі пробіли, переноси рядків та табуляції. Це особливо корисно для представлення великих фрагментів коду або іншого попередньо відформатованого тексту.
Синтаксис:
<pre>
текст
</pre>
Приклад:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
В цьому прикладі текст всередині тега <pre> буде відображатися із збереженням всіх пробілів та переводу рядків, як він написаний у вихідному коді.
Особливості тега <pre>:
- Тег
<pre>зберігає всі пробіли і переноси рядків в тексті - Він відображає текст у моноширинному шрифті
- Часто використовується разом з тегом
<code>для виділення коду
2.2 Тег <code>
Тег <code> використовується для позначення фрагментів коду або інших машинно-читабельних даних всередині тексту. Він зазвичай застосовується для виділення рядків коду, змінних, функцій та інших елементів програмування.
<code>код</code>
Приклад:
<p>Щоб вивести повідомлення в консоль, використовуйте функцію <code>console.log()</code>.</p>
В цьому прикладі текст "console.log()" буде виділений як код.
Характеристики тега <code>:
- Тег
<code>відображає текст в моноширинному шрифті (зазвичай Courier або Consolas) - Він не зберігає форматування, таке як переноси рядків або відступи
- Тег
<code>часто використовується всередині інших тегів, таких як<p>,<li>або<pre>
2.3 Використання <pre> і <code>
Для виділення та форматування великих блоків коду часто використовуються теги <pre> та <code> разом. Це дозволяє зберегти форматування та виділити текст як код.
Приклад:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
В результаті браузер відобразить текст з усіма збереженими форматуваннями та виділенням коду.
2.4 Підсвітка синтаксису
Для підсвітки синтаксису можна використовувати зовнішні бібліотеки, такі як Prism.js або Highlight.js, які автоматично розпізнають і підсвічують синтаксис коду на веб-сторінці.
Приклад використання 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>
У результаті блок коду буде автоматично підсвічений відповідно до синтаксису JavaScript.
Теги <code> і <pre> в HTML — це потужні інструменти для відображення і форматування коду та інших текстів зі збереженням вихідного форматування. Користуйся із задоволенням.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ