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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 /*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"]

1
PUT YOUR CODE HERE ......

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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"]

1
PUT YOUR CODE HERE ......

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

如我的是.single

更多
7 Responses Post a comment
  1. vaman

    我的博客基本无码了~~用不上了

  2. bionno

    我xx,这么快搞好,谢谢了。

  3. 荒野无灯

    是的,如果不需要高亮的话,直接用CSS也是不错的选择。

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS