word转html <pre>标签,pre标签简单样式

这是介于语法高亮和无样式之间的一种样式，效果如图：

CSS参考

图一

pre {

margin:15px auto;

padding:20px 15px;

border:1px solid #ddd;

border-left:4px solid #58749c;

background:#fbfbfb url(img/prebg.png) repeat;

white-space:pre-wrap;

word-wrap:break-word;

letter-spacing:1.5px;

font:13px/25px 'Comic Sans MS','courier new';

line-height:22px;

background-size:100% 44px

}

图二

pre {

color:#444;

margin:15px auto;

padding:20px 15px;

border:3px dashed #ddd;

border-left:8px solid #bbb;

background:#fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAmCAIAAACphTeFAAAAJElEQVRIx2N4RS5gGNU5qnNU56hOZJ2fyQWjOkd1juoc1YkMAKDL4lkok3p7AAAAAElFTkSuQmCC') repeat;

white-space:pre-wrap;

word-wrap:break-word;

letter-spacing:1.5px;

font:14px/25px 'Comic Sans MS','courier new';

line-height:22px;

background-size:100% 44px

}

需要到图一的背景图片下载：点击这里。图二是base64图片