by shinichi_wtn
2010-08-22 23:14
这几天终于决定自己定制一个百度空间模板，主要是因为找了许多别人分享的模板，但是却没有完全符合心意的，而且我也想优化百度空间对于程序代码的显示（提供代码区块与代码着色）。
因为经常需要Copy程序代码到空间上，而直接粘贴到百度空间的Web Editor后变得没有格式和色彩，所以从今以后，我将在博客中粘贴着色的程序代码，更加美观与可读。
首先是用CSS简单制作了个简约的模板（我喜欢简约不花哨的），增加了代码区块（现在不少百度空间模板已经有了pre标签的支持，我将其变得更为美观，具体效果见后文）；之后就详细研究代码着色的实现方法，即把各类程序代码（比如C#、Javascript、XML等等）像Visual Stuido编辑器里那样把关键词和类名等高亮显示，这个东西要自己实现貌似不太容易，所以搜索了一下相关知识，发现果然not easy，如果只高亮关键词很好实现，但是要涉及类名、字符串、注释等等的混合着色，则难度大大提升，即使现在广泛使用的Syntax Highlighter也有许多BUG。
看了《浅谈代码着色（下）：服务器端着色》这篇文章，发现有人开发过Windows Live Writter的插件，这个插件名字叫Paste From Visual Studio，这个插件可以直接将VS中的RTF格式代码转换为HTML，不过只能在Live Writter中使用，如下图。
有了这个插件，从VS里直接Copy有颜色的代码已经实现，剩下的就是从Live Writter里Copy HTML代码到百度空间的Web Editor。效果如下：
private static string HTMLString(string bodyContent)
{
StringBuilder sb = new StringBuilder();
string preStyle = "pre{font-size:12px;line-height:18px;font-family:Consolas}";
sb.Append("<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><style type=\"text/css\">" + preStyle + "</style></head><body>");
sb.Append(bodyContent);
sb.Append("</body></html>");
return sb.ToString();
}
又一个着色的例子：
<TabControl Margin="10,50,12,12" Name="TabControlCode" BorderBrush="Black">
<TabItem Header="HTML Preview" Name="tabItemHPreview" BorderBrush="Black">
<Grid>
<WebBrowser Margin="0,0,0,0" Name="webBrowserCode" />
</Grid>
</TabItem>
<TabItem Header="HTML Source" Name="tabItemHSource" BorderBrush="Black">
<Grid>
<TextBox Margin="0,0,0,0" Name="textBoxCode" TextWrapping="Wrap" AcceptsReturn="True" IsReadOnly="True"/>
</Grid>
</TabItem>
</TabControl>
但是，这个Paste From Visual Studio插件也有许多问题，比如从Visual Studio 2010里复制的代码如果有中文，粘贴则会出现乱码；网上搜索答案后，有高人在文章《FIX-修正VS2010剪貼程式碼時中文夾雜亂碼問題》已经修正了VS的这个问题。同样，还有许多把这个插件进行反编译，然后对其进行定制的文章，比如消除版权信息、增加一些功能等等。
在美化空间的同时，学到了关于代码着色的不少新知识，相信经过定制后的百度空间会更加美观。