新浪博客如何显示高亮代码,DIY

新浪博客对代码的支持功能不尽完美,或者说一点都不好,可是对于一个追求完美的技术痴而言,代码不能够完美的显示,心里总有那么一些不爽,那么如何在新浪中显示那些带颜色的代码呢?经过探究,可以如下设置:

 
 
为了将代码与正文分开,我们可以在写博客的时候,点击左下角的显示源代码选项,进入源代码编辑界面,然后
插入一个div作为盛放代码的容器,我的设置非常简单,如下:
--------------------------------------------------------------------------------------------------
<br />
<div style="background-color: #669;">
The place to  place your codes......
</div>
<br/>
--------------------------------------------------------------------------------------------------
 
效果如下:
 
The place to place your codes......
【注意这里的文字不能少,你可以随便先填写上一些,然后在粘贴代码的时候删去。】
至于背景色完全取决于与你代码颜色的搭配。
 
然后我们可以找一个书写代码的编辑器,比如说eclipse等,在里面书写代码可以自动高亮。
 
加入我们书写完了代码,接下来,打开Word,然后将书写好的代码复制粘贴到Word中,你会发现,Word中的代码是高亮的。由于复制的代码没有行号,这时候,我们可以借助Word的编号功能,然后为每一行代码进行编号(当然你也可以不用编号),不过这里有一点需要注意,必须先手动为第一行代码编号,然后选中其余行,再用Word的编号功能进行编号。这一步稍微拐了一个弯,就属于Word排版的只是了,如果不清楚就自己摸索一下,在这里就不再说了。
 
接下来,在我们已经建立好的div盒子中,我们多敲击几次回车键,把div盒子扩大一些(以防止代码溢出),然后从Word中复制代码进行粘贴,效果如下:

新浪博客如何显示高亮代码,DIY

可是这种情况下,仍然会出现div盒子分裂的情况,这是候,我们可以将鼠标指针放到没有代码的盒子中,然后删除掉分裂的div盒子,然而又有麻烦来了,那就是你会发现鼠标的光标在第一个div盒子中出不来了,没有关系,可以解决掉的。你点解右下方的【显示源代码】,然后进入代码编辑界面,你在界面的最下方填上以下代码:

 
 
<br/><br/>br/>
 
 
然后在返回,看看,是不是跳出盒子了?
 
附:如果你只是写一行或者说代码行数很少,那么你只要一行一行将eclipse里的代码复制到Word中然后直接再复制到博客上就可以了(不用放在div盒子里),代码会自动连eclipse里的背景色一起拾起。
 
如果有疑问,我很乐意回答,我的邮箱是1993zzo@163.com
上一篇:Mess it up!搞乱代码


下一篇:【ASP.NET MVC】jqGrid 增删改查详解