用vim实现博客中的代码高亮

之前一直对在文章中插入代码感到比较头疼，试过很多博客html编辑器的代码插入功能，都感觉不太满意——高亮语法的种类不够多（比如不能高亮vim脚本），代码块外观的可定制性不够，插入后再编辑比较困难等等。

昨天看了CnBlogs博文排版技巧一文，大受启发，其实最好的方法是直接编辑html，而不是依赖于博客编辑器的代码插件。文中介绍了Windows Live Writer的Paste from Visual Studio插件，它可以把代码的高亮及缩进导成为html。

但是我不太想使用客户端，况且这个它还不适用于linux平台。

于是我想到了vim，它的2html脚本能把代码的缩进、高亮颜色及背景色等转化成html，生成网页的显示与vim中的显示完全一致，再加上自己定义的css，可以很方便在文章中插入美观的代码样式。

我对2html脚本做了一些小的修改，以便更加方便地用来生成适合在博客中使用的html代码。

修改后的脚本名称为blogcode.vim（点我下载），下载后把它放到$HOME/.vim/syntax（windows为%VIM安装目录%\vimfiles\syntax）中，然后在vimrc里加入以下代码

1 

map <C-F3> <ESC>:runtime! syntax/blogcode.vim<CR>

需要转换成html时，用vim打开相应的源文件，按下C-F3，vim就会自动生成相应的html并复制到剪贴板中，在需要使用的地方按Ctrl-V粘贴就可以了。

下面是一个示例，是helloworld.c代码转化成的html：

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 

<div class="codeblock">
<table>
<tr>
<td>
<pre class="lnr">
1 
2 
3 
4 
5 
6 
7 
</pre>
</td>
<td>
<pre class="code">
<span class="PreProc">#include </span><span class="Constant">&lt;stdio.h&gt;</span>

<span class="Type">int</span><span class=""> </span><span class="Identifier">main</span><span class="">()</span>
<span class="">{</span>
<span class="">    </span><span class="Identifier">printf</span><span class="">(</span><span class="Constant">&quot;hello world</span><span class="Special">\n</span><span class="Constant">&quot;</span><span class="">);</span>
<span class="">    </span><span class="Statement">return</span><span class=""> </span><span class="Constant">0</span><span class="">;</span>
<span class="">}</span>
</pre>
</td>
</tr>
</table>
</div>

代码的颜色可以自己用css进行配置，以下是我的配置：

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 

.Special { color: #ff00ff; }
.Comment { color: #339900; }
.PreProc { color: #804040; }
.Constant { color: #ff00ff; }
.Statement { color: #0000ff; }
.Type { color: #0000ff; }

.codeblock {
 margin: 12px auto;
 width:100%;
 overflow:auto;
 border: solid 1px #c0c0c0;
 border-radius: 5px;
 background-color: #eeeeee;
}
.lnr, .code {
 font-family: monospace;
 font-size: 12px;
 padding: 5px 5px 5px 5px; 
}
.lnr { 
 color: #add8e6; 
 background-color: #555555;
}
posted @ 2009-12-13 22:45  白色之夜  阅读(623)  评论(0)  编辑  收藏  举报