简单更改CSS显示醒目的代码块

作者:半瓶墨水   链接:http://www.2maomao.com/blog/css-code-pre/

写上篇文章的时候,发现这儿的代码块,黑底绿字,没有代码加色,也很好。coolcode适合于显示某个语言的代码块,这个适合于shell脚本,或者命令行操作等内容的显示,比较醒目。

firebug 看了一下,很简单。在我的主题的style.css后面添了一句如下:

.mycode {
color:lime;background-color:black
}

然后在使用的时候,简单的用pre模块(class=”mycode”)把要显示的内容包括进去即可

<pre class="mycode">
要显示的内容
</pre>

手工加这个还是比较麻烦,我在wordpress后台用的是简单的Quicktags编辑器,自己曾经改过,加上下面这段:

edButtons[edButtons.length] =
new edButton('ed_code'
    ,
'code'
    ,
'<pre class="mycode">\n'
    ,
'</pre>\n'
    ,
'c'
);

现在用起来很方便,在后台选中一块文字,点击编辑器上面的”code”按钮,就一切OK了。

留下回复