WP-syntax(Wordpress代码高亮插件)的使用及简单美化
在Wordpress里发表一些代码,估计是各位大大们经常碰到的事,相关的插件也很多,这里就简单说一下本站在用的WP-syntax插件吧,安装很简单,相信会玩Wordpress的都知道哈(插件--搜索--安装--启用),下面来说说简单的使用办法吧。担心代码冲突,所以下面“(”和“)”在使用时换成“<“和”>“即可。
<pre lang="html" line="1" escaped="true"> //这里添加代码…… </pre>
注释:lang="html"表示代码语言为html,请根据自己需要修改; line="1" 表示显示行号,如果不需要,去掉即可;escaped="true" 是为了防止代码转义,如果不需要,去掉即可。 注意:在wordpress后台使用 WP-Syntax 等代码高亮插件,需要在html模式下添加代码,不要随意切换到可视化模式,否则代码就容易转义!! 由于插件本身的CSS不是很美观,建议修改一下,本站用的CSS代码如下(覆盖该插件的 wp-syntax/wp-syntax.css 的代码):
.wp_syntax { color:#100; background-color:#f9f9f9; border:1px solid #EBEBEB; margin:0 0 1.5em 0; overflow:auto; } .wp_syntax { overflow-x:auto; overflow-y:hidden; padding-bottom:expression(this.scrollWidth > this.offsetWidth ? 15:0); width:99%; } .wp_syntax table { border:none; border-collapse:collapse; margin:0; padding:0; width:100% !important } .wp_syntax caption { padding:2px; width:100%; background-color:#def; text-align:left; font-family:Monaco; font-size:13px; line-height:20px; } .wp_syntax caption a { color:#1982d1; text-align:left; font-family:Monaco; font-size:13px; line-height:20px; text-decoration:none; } .wp_syntax caption a:hover { color:#1982d1; text-decoration:underline; } .wp_syntax div,.wp_syntax td { border:none; text-align:left; padding:0; vertical-align:top; } .wp_syntax td.code { background:none; line-height:normal; white-space:normal; padding-left:10px; } .wp_syntax pre { background:transparent; margin:0; padding:0; width:auto; float:none; clear:none; overflow:visible; font-family:Monaco; font-size:13px; line-height:20px; white-space:pre; } .wp_syntax td.line_numbers pre { border-right:3px solid #6CE26C; background-color:#E7E5DC; color:gray; width:20px; padding:0 5px; text-align:right; }
写的简单了点,有空再来补充一下哈,各位看官多多见谅哈。