首页 > 代码库 > CSDN博客排版技巧

CSDN博客排版技巧

CSDN的博客排版采用的编辑器是xhEditor,官方介绍是:能实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,不丢失任何细节效果。但是,实际使用中不丢失任何细节是不能的,word -> html 感觉样式或多或少都会有改变。

我对CSDN的在线编辑的使用感受:

  • 使用默认的在线编辑,行间距略大,段间距略小,再加上无首行缩进,感觉排出来的段落层次不够清晰;
  • 复制粘贴其他网页的内容和富文本格式的内容,会一并粘贴过来格式,嵌套在 <span style="...">...</span> 中;
  • 在线可视化编辑时,如果有自定义的样式想切换回去,常常只能先切换到源代码编辑,输入一些字符后再切换到可视化编辑;

我个人的使用建议:

  1. 先使用自己习惯的文本编辑器(sublime or vim)等编辑,在这些编辑器里复制粘贴时会自动去掉样式留下纯文本;
  2. 需要粘贴代码的地方留下一行标注,最后在 可视化在线编辑 中插入代码;
  3. 需要特殊样式的地方,如标题、列表、文字颜色等先选中,然后利用可视化编辑即可;
  4. 需要自定应样式的地方,可以自己复制粘贴一下自己写好的样式,然后改里面的内容;
  5. 最后不满意的地方切换到源代码编辑状态下进行修改,删除可视化在线编辑自动生成的一些无用HTML代码;

当然你也可以利用Word和Windows live writer:

  • 利用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被墙了!