CSDN 博客排版技巧
2014-04-27 21:13
676 查看
CSDN的博客排版采用的编辑器是xhEditor,官方介绍是:能实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,不丢失任何细节效果。但是,实际使用中不丢失任何细节是不可能的,word -> html 感觉样式或多或少都会有一些改变。
我对CSDN博客的在线编辑的使用感受:
使用默认的在线编辑,行间距略大,段间距略小,再加上无首行缩进,感觉排出来的段落层次不够清晰;
复制粘贴其他网页的内容和富文本格式的内容,会一并粘贴过来格式,嵌套在 <span style="...">...</span>中;
在线可视化编辑时,如果有自定义的样式想切换回去,常常只能先切换到源代码编辑,输入一些字符后再切换到可视化编辑;
一、利用文本编辑器:
先使用自己习惯的文本编辑器(sublime or vim)等编辑,在这些编辑器里复制粘贴时会自动去掉样式留下纯文本;
需要粘贴代码的地方留下一行标注,最后在 可视化在线编辑 中插入代码;
需要特殊样式的地方,如标题、列表、文字颜色等先选中,然后利用可视化编辑即可;
需要自定应样式的地方,可以自己复制粘贴一下自己写好的样式,然后改里面的内容;
最后不满意的地方切换到源代码编辑状态下进行修改,删除可视化在线编辑自动生成的一些无用HTML代码;
二、利用Markdown,Word 或 Windows live writer:
利用Markdown编辑器编辑,这也是Github的默认文档编辑语言,可生产HTML推荐,不足之处图片和表格还是要自己再插;
利用word排版好,复制过来,然后切换到源代码编辑状态进行调整,修改自己不满意的地方;
利用windows live writer进行排版好,然后粘贴过来,有样式偏差仍然在源代码编辑状态下调整;
我自己再写博客的时候,常常需要一个样式来显示写程序运行结果什么的,但是却没有很好的现成的样式,这时只好自己动手编HTML和CSS代码,写了一个样式。
效果如下:
上面那一段的HTML源代码是:
<pre>标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
样式中的3个CSS属性:
一些编辑技巧:
在自己的自定义样式中编辑时如果是复制过来的纯文本,则可以直接复制到里面,但是如果敲回车的话会直接新建一个块标签,这是就应该使用 shit+return 组合键来敲回车 .
如果对博客定制型要求很高,国内只能自己买空间搭自己的博客了,没办法,在天(he)朝(xie)最好的博客服务WordPress被墙了!
我对CSDN博客的在线编辑的使用感受:
使用默认的在线编辑,行间距略大,段间距略小,再加上无首行缩进,感觉排出来的段落层次不够清晰;
复制粘贴其他网页的内容和富文本格式的内容,会一并粘贴过来格式,嵌套在 <span style="...">...</span>中;
在线可视化编辑时,如果有自定义的样式想切换回去,常常只能先切换到源代码编辑,输入一些字符后再切换到可视化编辑;
一、利用文本编辑器:
先使用自己习惯的文本编辑器(sublime or vim)等编辑,在这些编辑器里复制粘贴时会自动去掉样式留下纯文本;
需要粘贴代码的地方留下一行标注,最后在 可视化在线编辑 中插入代码;
需要特殊样式的地方,如标题、列表、文字颜色等先选中,然后利用可视化编辑即可;
需要自定应样式的地方,可以自己复制粘贴一下自己写好的样式,然后改里面的内容;
最后不满意的地方切换到源代码编辑状态下进行修改,删除可视化在线编辑自动生成的一些无用HTML代码;
二、利用Markdown,Word 或 Windows live writer:
利用Markdown编辑器编辑,这也是Github的默认文档编辑语言,可生产HTML推荐,不足之处图片和表格还是要自己再插;
利用word排版好,复制过来,然后切换到源代码编辑状态进行调整,修改自己不满意的地方;
利用windows live writer进行排版好,然后粘贴过来,有样式偏差仍然在源代码编辑状态下调整;
我自己再写博客的时候,常常需要一个样式来显示写程序运行结果什么的,但是却没有很好的现成的样式,这时只好自己动手编HTML和CSS代码,写了一个样式。
效果如下:
DATA DATA
上面那一段的HTML源代码是:
<pre style="font-family:consolas; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-all; word-wrap:break-word; color:#333333; background-color:#F5F5F5; border:1px solid #CCCCCC; padding:9px;">DATA DATA</pre>
<pre>标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
样式中的3个CSS属性:
word-break:break-all; /* break-all允许在单词内换行;normal使用浏览器默认的换行规则 */ word-wrap:break-word; /* break-word在长单词或 URL 地址内部进行换行;normal: 默认只在允许的断字点换行 */ white-space:pre-wrap; /* pre-wrap保留空白符序列,但是正常地进行换行;normal:默认空白会被浏览器忽略 */
一些编辑技巧:
在自己的自定义样式中编辑时如果是复制过来的纯文本,则可以直接复制到里面,但是如果敲回车的话会直接新建一个块标签,这是就应该使用 shit+return 组合键来敲回车 .
如果对博客定制型要求很高,国内只能自己买空间搭自己的博客了,没办法,在天(he)朝(xie)最好的博客服务WordPress被墙了!
相关文章推荐
- 博客技巧:修改CSDN博客的样式表
- 技巧:如何在CSDN博客中编辑公式
- csdn博客 代码块的显示设置以及图片的插入技巧
- CSDN写博客使用技巧
- CSDN博客编辑技巧收集
- Android studio 使用技巧--csdn博客
- CSDN博客转发技巧
- CSDN博客编辑技巧收集
- 排版——用Markdown写Csdn博客
- CSDN博客排版的那些事
- CSDN博客排版格式入门
- csdn博客 代码块的显示设置以及图片的插入技巧
- csdn博客 代码块的显示设置以及图片的插入技巧
- 还是不喜欢CSDN博客的排版,迁移到iteye了
- csdn博客技巧
- csdn 发博客 经验、技巧
- Blog技巧,CSDN博客除草记
- 技术积累-1( C技巧/GLib数据结构 ) - LeoWL的专栏 - 博客频道 - CSDN.NET
- csdn markdown写博客技巧
- vi技巧 - ArduousBonze的专栏 - 博客频道 - CSDN.NET