修改完善本博客的代码高亮框功能

2011年05月18日 Wordpress 评论 3 条 阅读 7,015 views 次

以前一直是用span标记来实现的,具体方法请参考这里http://www.opsers.org/wordpress/formally-launched-a-new-theme-a-record-of-what-changes-the-new-theme-areas.html#toc-12。但其中会有一此BUG,当代码中出现段落标记<p>的时候,就会自动把span截断,导致下面的代码失去效果,苦于找不到解决办法一直未解决。今天在学习网站代码的时候,发现一个比较好的解决方案,所以就迅速修改完善我的代码框功能。


<pre>...</pre>:使文本中的回车、空格等控制符有效,不需要再用<p>标记、<br>标记等设置段落,且不影响各种标记的使用。所以,用了这个标记,一切问题都解决,目前我测试了一个页面,linux服务器安全加固shell脚本,效果还不错,至于后面会不会遇到问题,那后面再来慢慢完善吧。

实现方法:

1、把下面的代码写入CSS

pre {
background: #0D0D14;
border: 1px solid #9A9A9A;
color: #3DFF3D;
font-size: 1em;
font-family: Verdana, Tahoma, sans-serif, "Times Neo Roman", "Lucida Sans Unicode", Georgia, Arial, "\5b8b\4f53";
margin: 10px;
padding: 10px;
width: 97%;
/* position:relative;*/
white-space:pre-wrap;
word-wrap:break-word;
}

2、使用方法
在需要插入代码的前后加入<pre> 代码 </pre>

3 条留言  访客:2 条  博主:1 条

  1. 5顶~~~ 哈哈

  2. 这个高亮显示,改哪个css文件

给我留言

Copyright © 羽飞博客 保留所有权利.   Ality主题 皖ICP备14013844号-1

用户登录