Не знаю кто как, а я использую тег <pre>. Потому что это просто и быстро. Конечно, есть разные скрипты для подсветки кода на сайтах. Но, как я уже говорил, не люблю без надобности использовать нестандартные решения. Да и кусочки кода, которые я привожу на своих сайтах, обычно небольшие. Так что в них легко можно разобраться и без подсветки. В крайнем случае можно выложить картинку с кодом. Поэтому на сайтах я и применяю <pre> для выделения блока кода или для текста, где нужны буквы одинаковой ширины (например, при выводе простых таблиц).
Тег <pre> - это парный тег. И, в отличие от некоторых других парных тегов (таких как тег <p>), он должен обязательно иметь закрывающий тег </pre>.
С помощью этого тега можно вывести текст “как есть”, то есть без автоматического форматирования браузером. При этом обычное расположение текста и заполнение абзацев отключается, и выводятся все пробелы, имеющиеся в тексте. Кроме того, текст внутри тегов <pre> и </pre> выводится моноширинным шрифтом (шрифт с одинаковой шириной символов). Раньше по умолчанию это часто был шрифт Courier New, сейчас это могут быть и другие моноширинные шрифты.
Но здесь надо помнить, что браузер внутри этих тегов также перестаёт автоматически переводить строки. Поэтому, если строка будет слишком длинной, то она выйдет за пределы блока, отведённого для текста (например, за пределы блока <div>).
Символы табуляции внутри блока <pre> действуют как обычно (8 символов). Однако разные браузеры могут по разному интерпретировать табуляцию. Поэтому я, например, никогда табуляцию не использую. Всегда использую необходимое количество пробелов вместо табуляции, в том числе и в редакторах исходного кода (кроме случаев, когда это делается автоматически), хотя это и отнимает немного больше времени.
Также нежелательно использовать тег <p> внутри блока <pre>. Хотя большинство браузеров в этом случае просто переведут строку, гарантий такого поведения нет.
Пример:
В первом случае мы поместили код в параграф. Как видите, результат неудобочитаемый. Хотя это всего-навсего программа “Hello, World” на C#.
Во втором случае мы использовали тег <pre>, и жизнь заиграла новыми красками.
Ну и для наглядности покажу, как это выглядит в HTML-коде:
Как видите, в редакторе текст выглядит одинаково, а браузером отображается по разному. С чего бы это )))
На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.