增强 blogspot 的编辑体验_@_linux

在 blogspot 中写博客的编辑体验还是不赖的, 可以自定义css, 可以方便的切换到「Edit Html」, 可以使用各类快捷键 --- 这些, 对于咱们这种「自定义爱好者」真是一大乐事 囧.
对于 linux 用户来说, 这种编辑体验可以进一步增强.

首先声明 ---
此文中所提到的一些貌似「奇淫巧计」的 tips 其实可以无障碍的应用在其他操作系统中, 也可以应用在除了编辑博客 post 之外的其他场合. 就看各位如何举一反三啦.
其实声明 ---
本文主要是供自己备份, 所以难免有不够清晰明白的地方, 谅解啦. 囧

Table of Contents:
> 自定义 css
> 使用 scim 的 special_table
> vim 插件和设置
> 如何输入源代码?
> 使用toc增强浏览体验

---------------------------------
自定义 css

这里将我修改的css部分备份在此, 注意使用良好编排的注释, 将自己添加的自定义css部分, 和原先的css默认部分, 区分开来.

/* begin --- added by jtuki */
pre{
#  border: 1pt dashed black;
#    color: #666666;
#    color: black;
#    padding: 1em 0;
background : #ABB3A8;
border: 1pt dashed #C0C0C0;
white-space: pre;
font-family: monospace;
font-size: 100%;
overflow: auto;
padding: 1em 1em;
}
.path {color:#652E1E; font-family:monospace;}
/* begin --- for the use of vim's plugin TOhtml*/
.Todo { color: #808080; background-color: #ffff00; }
.Identifier { color: #00ffff; }
.PreProc { color: #ff40ff; }
.Type { color: #00ff00; }
.Constant { color: #ff6060; }
.Statement { color: #ffff00; }
.lnr { color: #ffff00; }
.Comment { color: #8080ff; }
/* end --- for the use of vim's plugin TOhtml*/
/* begin --- for the keyboard shortcut */
.kbd {
    font-family: monospace;
    /* padding: 0px 1px 0px 1px; */
    padding: 0em 0.1em 0em 0.1em;
    border-width: 1px 2px 2px 1px;
    border-style: outset;
    border-color: #baa;
    background: #faf6f6;
    color: #000;
    /* border-style: solid; */
    /* border-color:  #edd #baa #baa #eed; */
}
/* end --- for the keyboard shortcut */
/* end --- added by jtuki */

注释里就阐释的很清晰了, 这里就不赘述了.
---------------------------------
使用 scim 的 special_table

不知道经常使用 scim 的朋友是否注意到了其 special_table? 进入 /usr/share/scim/pinyin 文件夹, 使用你最喜欢的文本编辑器编辑之.

#user-defined
love = 0x2665
email = jerome.rivest.long@gmail.com
name = jtuki
kh = 「」
i = -_-
j = 囧
y = 「译者注:」
blog = http://jtuki.blogspot.com/

site = http://sites.google.com/site/jtukipedia/

# 编辑文档时候很常用
stars = ***********************
fenge = ---------------------------------
s = <img src="http://otho.douban.com/pics/st.gif" vspace="0" alt="*"/>

pre = <pre></pre>
code = <code></code>

ctrl = <span class="kbd">Ctrl</span>+
alt = <span class="kbd">Alt</span>+
shift = <span class="kbd">Shift</span>+
kbd = <span class="kbd"></span>

path = <span class="path"></span>

br = <br />
jkh = &lt;&gt;
hh = ^_^

是不是感觉添加了快捷键输入方式后, 文本输入方便了许多?
使用自定义的模板进行输入, 而非总是重新造轮子, 个人认为是一种良好的习惯. 也是避免飞蚊症的良方. 囧
---------------------------------
vim 插件和设置

vim 很强大, 各种插件也是很丰富. 不过似乎和此篇 post 没太大关联 囧. 这里之所以提到 vim 主要是做备份, 也是为了下方的「如何输入源代码」做引子.
这里只是推荐两款插件, taglist 和 supertab-continued.
插件下载后放置在 ~/.vim/plugin 路径下.

前者可以通过 :TlistToggle 激活, 后者可以由单击 Tab 激活.

由于 vim 比微软 Windows 默认的 notepad 强大太多太多, 所以自然需要自定义配置才好用, 这里将我的设置备份粘贴如下 ---
$ vim /usr/share/vim/vimrc

runtime! debian.vim
syntax on
" self-defined options and modes.
set number
set autoindent
set tabstop=4
let Tlist_Auto_Open = 1
let Tlist_Exit_OnlyWindow = 1
let Tlist_Use_Right_Window = 1
let html_use_css = 1
let html_number_lines = 0
colorscheme elflord

ps0: 刚才搜索一不小心碰到了这款插件, trinity.vim - Build the trinity of srcexpl, taglist, NERD_tree to be a good IDE : vim online, 似乎还不赖的样子, 今后有机会阅读超级源代码树的时候再尝试吧. 现在使用 taglist 似乎就足够了.
---------------------------------
如何输入源代码?

其实在 blogspot 中输入源代码特别简单, 尤其是利用 vim 中的 :TOhtml 命令. 上面的 vimrc 文件中, 也有相关的 let html_xxx = x 的内容. 使用挺简单的, 这里就不罗嗦了, 大家伙参考 manual 啦.
这个命令, 综合上方提到的 css 编辑中的格式定义, 就可以产生如下的效果 (随便选了一个很短的程序作为例子, 囧, 是用来检测处理器架构是大端还是小端的C代码) ---

 1 #ifndef ISBIGENDIAN_H
 2 #define ISBIGENDIAN_H
 3 
 4 typedef enum {FALSE, TRUE} BOOL;
 5 
 6 BOOL isBigEndian(){
 7     unsigned short x = 0x1234;
 8     return ((* (unsigned char *) &x) == 0x12)? TRUE : FALSE;
 9 }
10 
11 #endif

---------------------------------
使用toc增强浏览体验

对小型的分标题, 在说明域中增加 id="xxx" 的说明, 最好也在域中增加 style="font-weight:bold;" 的格式定义, 使其更加醒目清晰.
接下来就是利用如下格式添加进入 html 文本中便可 ---

<span style="font-weight:bold; font-size:large; font-family:monospace">Table of Contents</span>:
<a href="#xxx">The title of the chapter</a>

---------------------------------