定义code的CSS样式代码更有型 » 荒野无灯weblog

Keep It Simple, Stupid.

荒野无灯weblog

定义code的CSS样式代码更有型

下面这个风格个人比较喜欢:

 /*CSS by 荒野无灯 http://ihacklog.com/?p=4689 */
div.single code,div.single pre.gray {
    font-family: "Deja Vu Sans Mono",Consolas,Monaco,"Courier New",Courier,monospace;
    color:#000;
    font-size: 14px;
    font-weight: inherit;
    padding: 11px;
  margin: 0 0 20px;
    margin-bottom: 22px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px solid #DADADA;
    overflow-x: auto;
}

使用方法:
[cc lang="html"]

PUT YOUR CODE HERE ......

下面这个漂亮的代码风格来自:http://www.smoothdivscroll.com/

div.single pre.smooth {
    background: url("images/pre_code_bg.gif") repeat-y scroll left top transparent;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    font-family: "Deja Vu Sans Mono",Consolas,Monaco,"Courier New",Courier,monospace;
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    display: block;
    padding: 18px 5px 18px 28px;
    text-align: left;
    /*防止溢出*/
    width: 580px;
    text-align: left;
}

使用方法:
[cc lang="html"]

PUT YOUR CODE HERE ......

注意加上你自己模板的CLASS标签或ID标签,以免对不必要的标签也生效。

如我的是.single

Tagged in : CSS,highlight,style,code

All Comments (0)
Gravatar image
No Comments