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 в соответствии с вашими потребностями.