如何写出好看的博文

update@2013-07-30

程序员大部分都有写博文的习惯,所用的博客系统也各不相同,有用门户网站的(比如网易博客),有用csdn的,也有很多自己搭wordpress的。门户网站的博客渐渐往轻博客方向发展,编辑器的功能也弱化了,一张图加上几段文字就搞定,但是科技博客有图表文字,代码,公式等,排版相对复杂一些。我也是偶尔写写博客,最近这两天整理了下这方面的东西,分享给大家。


  1. 使用word工具
  2. 使用博客编辑器
  3. 纯手动
  4. HTML模板示例
  5. 参考资料


1 使用word工具

对于不会编程的人来说,word应该是最简单的能够应对复杂排版的工具了,如果你平时很少写需要博文,可以使用它,但是经常用的话,头会很大。我们都有过改毕业论文格式的痛苦经历,修改一个地方,其它地方的格式也乱了,而且几十页的论文容易遗漏,除非把稿定好,最后统一排格式,排完格式不再修改。经常写论文的人一般用Latex,很多学校都会提供Latex版本的论文模板,不过你需要花些时间学习Latex的语法。

编辑器都提供了粘贴word文档的功能,但是word的排版相对复杂一些,直接粘贴过去格式必定会有些变化,可能表格串了,标题的格式丢了,只剩下个基本的文字框架。所以我觉得经常排版的人是不会使用word的。

2 使用博客编辑器

现在博客繁多,但是它们的编辑器往往缺胳膊少腿,让你哭笑不得,比如网易博客和新浪博客的编辑器没有上标和下标(虽然可以自己用html添加),wordpress默认的编辑器功能也很少,目前我见过的最好的编辑器是CKEditor,但是CKEditor竟然没有居中,总之没遇到过特别好用的编辑器,虽然有markdown来代替,但是对markdown的支持并不广泛,只有比较开放且流行的产品才支持markdown,比如github,wordpress等。有个比较笨的方法是各个编辑器组合着用,把生成的html代码组合起来就差不多了,编辑器没有的样式可以用一些辅助工具来生成,比如发芽网的代码高亮,linux下的高亮工具source-highlight,highlight或者自己手动去添加样式。

如果编辑器或者工具生成的html代码比较乱,可以用html格式化工具格式化一下,这样看起来比较清晰,也许你还需要一个html编辑器以实时显示你的修改。

最后就是找一个对html支持比较好的地方发表自己的博文了。有时候你想把自己的博文以pdf的形式分享出去,那就把html代码转换一下吧,pdfcrowd效果还行,不过它不是免费的,因此添加了版权信息,图片也会被切割。wkhtmltopdf是个非常好的开源转换工具,可以将html转换成pdf或者图片。

3 纯手动

如果你经常写博客,又追求美观的排版,那就纯手动DIY吧,总结一个固定的模板,写起文章来比word或者博客编辑器快多了,而且在不同的博客系统里能保持一致。如果是写网页博客的话,就用html,同时也可以转成pdf和图片,如果只需要pdf的话,建议使用Latex,比较美观,支持数学公式。这篇文章就是用vim纯手动完成的,作为以后的博文模板,对我来说已经够用,不想再花精力调样式和排版了.

公式怎么办?可以参照这里的方式,但是门户网站的博客系统不支持javascript,如果你用的是wordpress或者只需要pdf格式(wkhtmltopdf支持javascript,注意用--javascript-delay选项来调整js的加载时间)可以用他的方法。除了使用js,目前没有更好的方法用html显示公式,图片是个替代方案,Tex2PNG可以将Latex数学公式转换成图片,可以用latex公式编辑器来生成latex代码,很方便。

4 HTML模板示例

4.1 图片示例

如何写出好看的博文 - songtianyi - songtianyi

图1 VMware View和 XenDesktop 网络带宽占用对比[1]

4.2 代码示例

/*************************************************************************
	> File Name: test.c
	> Created Time: Mon 29 Jul 2013 06:56:07 PM CST
 ************************************************************************/

#include<stdio.h>
int main()
{
	printf("Hello World!");
	return 0;
}
	

4.3 引用示例

One small step for a man, one giant leap for mankind.

One small step for a man, one giant leap for mankind.

One small step for a man, one giant leap for mankind.

4.4 图表示例

有时候免不了在自己的博文里插入一些图表,好的图表工具免不了用JS,只好用图片来代替了。charttool,能够在线生成你想要的图表,不过不支持中文。

如何写出好看的博文 - songtianyi - songtianyi

图2 图表示例

5 参考资料

[1]陈军.云计算之初探--桌面云[J].《冶金自动化》,2012