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 — это мощные инструменты для отображения и форматирования кода и других текстов с сохранением исходного форматирования. Пользуйтесь с удовольствием.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ