新浪博客如何显示高亮代码，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中复制代码进行粘贴，效果如下：

 

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

 

 

<br/><br/>br/>
 

 

然后在返回，看看，是不是跳出盒子了？

 

附：如果你只是写一行或者说代码行数很少，那么你只要一行一行将eclipse里的代码复制到Word中然后直接再复制到博客上就可以了（不用放在div盒子里），代码会自动连eclipse里的背景色一起拾起。

 

如果有疑问，我很乐意回答，我的邮箱是1993zzo@163.com