CSS стили тега pre

Мне нравится писать о тегах pre. В этой статье я расскажу о стилях CSS, которые помогут стилизовать теги pre, как для экранных, так и для печатных медиа.

HTML-код

Это нормально использовать теги <pre> сами по себе, но если вы применяете теги <code>, например, так (обратите внимание, что угловые скобки заменены квадратными, чтобы подсветить синтаксис):

[pre][code]

… здесь включено содержимое pre

[/pre][/code]

.., это обеспечивает больше гибкости в плане определения стилей с помощью CSS. Рассмотрим некоторые примеры.

CSS для отображения на экране

Одно замечание в отношении тегов pre в HTML — они сохраняют пустое пространство (пробелы и разрывы строк) для любого содержимого, которое в них включено. Поэтому идеально подходят для отображения фрагментов кода. Вот некоторые основные стили, которые обеспечивают, чтобы теги <pre> отлично смотрелись при отображении на веб-странице:

pre {
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
}
pre code {
	padding: 10px;
	color: #333;
}

Приведенный выше CSS-код задает стили для всех тегов <pre> таким образом, что:

  • Содержимое тегов pre занимает 100% ширины;
  • Горизонтальная полоса прокрутки отображается, если ширина содержимого превышает ширину блока элемента <pre>;
  • Вертикальная полоса прокрутки не отображается (блок <pre> будет автоматически установлен на всю высоту его содержимого);
  • Цвет фона будет отображаться как светло-серый;
  • В блоке <pre> появится тонкая рамка;
  • Код будет включать повторяющиеся / чередующиеся полосы (смотрите примечание);
  • Вокруг содержимого тегов <pre> будет отступ в 10 пикселей.

Примечание: Приведенный выше код использует свойство background для отображения повторяющегося изображения. Фоновое изображение должно быть несколько пикселей в ширину и 40 пикселей в высоту (равное двойной высоте строки). Верхние 20 пикселей должны быть более темного сплошного цвета, а нижние 20 пикселей — светлого прозрачного. Это создаст эффект полосатого фона, который улучшит читаемость содержимого тега <pre>. Можно удалить свойство background, если предпочитаете использовать сплошной однотонный фон.

Также обратите внимание, что мы задаем отступы и цвет через тег <code>. Чтобы сделать это проще, можно добавить в селектор тега pre в HTML box-sizing: border-box;, а затем объединить все таким образом:

pre {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
	padding: 10px;
	color: #333;
}

Это лишь основные стили, которые помогут выбрать правильное направление. Вы обязательно должны настроить CSS в соответствии с вашими предпочтениями и дизайном веб-страниц.

CSS для печати

В данный момент ваши теги стилизованы под отображение на экране (веб-странице). Но как сделать так, чтобы они хорошо выглядели на распечатанной странице? Вот некоторые CSS-стили, которые можно использовать, чтобы сделать содержимое тега pre отлично читаемым на печатной странице:

@media print {
	pre {
		overflow-x: auto;
		white-space: pre-wrap;
		white-space: -moz-pre-wrap !important;
		white-space: -pre-wrap;
		white-space: -o-pre-wrap;
		word-wrap: break-word;
		background: #fff;
	}
}

Мы используем запрос @media только для печати. Поэтому, когда кто-то захочет распечатать страницу, содержимое тега <pre> будет автоматически помещено в контейнер таким образом, чтобы поместиться на лист бумаги. Кроме этого оно будет отображаться темным текстом на белом фоне для лучшей читаемости.

Помните, что это лишь основные стили. Настоятельно рекомендую экспериментировать и настроить CSS в соответствии с вашими потребностями.

Пожалуйста, опубликуйте свои отзывы по текущей теме материала. За комментарии, подписки, лайки, отклики, дизлайки низкий вам поклон!

Пожалуйста, опубликуйте свои отзывы по текущей теме статьи. За комментарии, лайки, дизлайки, подписки, отклики низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «CSS Style Pre Tags»