استایل دادن به تگ pre و تگ code در html و وردپرس

شما میدانید برای پیشنمایش کد های خود html و در وردپرس به صورت پیشفرض از دو تگ زیر استفاده کنید : pre tags

به جای براکت [] ()‌ بگذارید !

[pre]
[code]
.........کد خود را اینجا وارد کنید.........
[/code]
[/pre]

[pre]

[code]

.........کد خود را اینجا وارد کنید.........

[/code]

[/pre]

از طریق css نمایش دو تگ pre tags را تغیر می دهیم : – ( به فایل style.css قالب بیفزایید )

pre {
        direction: ltr;
	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;
}

pre {

direction: ltr;

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;

}

وحالا چیزی که ما داریم :

کد های شما راستچین و بهم ریخته نمی شوند
عرض دو تگ pre صد در صد است
پیمایش افقی نمایش داده می شود اگر محتوای بیش از پیش عریض باشد
اسکرول عمودی نمایش داده نمی شود (پیش جعبه به صورت خودکار اندازه می شود تا متناسب با تمام ارتفاع محتوی بسته باشد)
رنگ پس زمینه به رنگ خاکستری روشن نمایش داده می شود
جعبه پیش نمایش یک مرز نازک دارد
10 پیکسل حاشیه در اطراف محتوای pre وجود دارد.