新浪博客如何显示高亮代码,DIY
2013-08-04 08:51
197 查看
新浪博客对代码的支持功能不尽完美,或者说一点都不好,可是对于一个追求完美的技术痴而言,代码不能够完美的显示,心里总有那么一些不爽,那么如何在新浪中显示那些带颜色的代码呢?经过探究,可以如下设置:
为了将代码与正文分开,我们可以在写博客的时候,点击左下角的显示源代码选项,进入源代码编辑界面,然后
插入一个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中复制代码进行粘贴,效果如下:
![](http://images.cnitblog.com/blog/553942/201308/04135353-c671987cf29445af9858ec15a795c071.jpg)
可是这种情况下,仍然会出现div盒子分裂的情况,这是候,我们可以将鼠标指针放到没有代码的盒子中,然后删除掉分裂的div盒子,然而又有麻烦来了,那就是你会发现鼠标的光标在第一个div盒子中出不来了,没有关系,可以解决掉的。你点解右下方的【显示源代码】,然后进入代码编辑界面,你在界面的最下方填上以下代码:
<br/><br/>br/>
然后在返回,看看,是不是跳出盒子了?
附:如果你只是写一行或者说代码行数很少,那么你只要一行一行将eclipse里的代码复制到Word中然后直接再复制到博客上就可以了(不用放在div盒子里),代码会自动连eclipse里的背景色一起拾起。
如果有疑问,我很乐意回答,我的邮箱是1993zzo@163.com
为了将代码与正文分开,我们可以在写博客的时候,点击左下角的显示源代码选项,进入源代码编辑界面,然后
插入一个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中复制代码进行粘贴,效果如下:
![](http://images.cnitblog.com/blog/553942/201308/04135353-c671987cf29445af9858ec15a795c071.jpg)
可是这种情况下,仍然会出现div盒子分裂的情况,这是候,我们可以将鼠标指针放到没有代码的盒子中,然后删除掉分裂的div盒子,然而又有麻烦来了,那就是你会发现鼠标的光标在第一个div盒子中出不来了,没有关系,可以解决掉的。你点解右下方的【显示源代码】,然后进入代码编辑界面,你在界面的最下方填上以下代码:
<br/><br/>br/>
然后在返回,看看,是不是跳出盒子了?
附:如果你只是写一行或者说代码行数很少,那么你只要一行一行将eclipse里的代码复制到Word中然后直接再复制到博客上就可以了(不用放在div盒子里),代码会自动连eclipse里的背景色一起拾起。
如果有疑问,我很乐意回答,我的邮箱是1993zzo@163.com
相关文章推荐
- 如何在sublime text 中高亮显示你的.vue代码?
- Jquery如何实现点击时高亮显示代码
- 如何解决eclipse中代码拷贝到word文档中高亮显示的问题
- Excel-如何将含有对应值得单元格高亮显示的代码摘抄
- 如何在Latex中高亮显示R语言代码
- 如何在UltraEdit中高亮显示PB代码
- csdn如何高亮显示代码和插入图片
- Jquery如何实现点击时高亮显示代码
- UltraEdit32查看代码时,代码都没有高亮或变颜色显示,如何调整?
- 如何让页面里面的java代码高亮显示
- sublime中如何安装vue.js插件,并使代码高亮显示
- 如何用syntaxhighlighter显示高亮代码
- wireshark小技巧一(如何使UDP校验错误的包高亮显示)
- css的兼容性:IE6不支持max-width和min-height,应该如何写代码才能正常显示
- php代码视图高亮显示
- jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
- 基于.net技术的代码高亮显示组件
- 如何在代码中设置ImageView的全屏幕显示
- CSDN粘贴代码显示行号,并实现代码高亮
- 用js查找法实现当前栏目的高亮显示的代码