使用VIM+markdown编写技术博客

1. wordpress写作痛点

自已弄了个wordpress站点,打算写点技术内容,我写东西比较倾向于条理性,技术内容肯定也是分1,2,3点的,前段时间尝试wordpressdesktop发布博客内容,被“可视化”编辑模式和“HTML”编辑模式折腾地够呛。
我写技术文档,比较喜欢用gvim + txtbrowser插件,主要是有大纲,具有条理性。写就直接以txt文本格式编写,快速、方遍。

gvim里的快捷键用爽了,调整起来非常方便。这就是我编写文档的工具样式。但是把这个文档发布到wordpress就麻烦大了。
首先:文档里有代码块,想要在wordpress上漂亮的显示代码块,问题大了去了。我现在还是用SyntaxHighlighter Evolved插件解决代码显示问题。

但是SyntaxHighlighter Evolved插件,需要在wordpress desktop工具里以HTML模式在代码前后插入如下内容才能解析。

【code lang="shell"】
xxxxxx
【/code】

这里中括号使用全角了,避免插件转换
另外wordpress desktop的“可视化”编辑模式和“HTML”编辑模式真心不好用,总是会纠结排版问题。
vi写好的文本文档,发wordpress时,得调整好大一会儿,才能发布上去,有时侯为了换行空格问题,我是手工在标题前打HTML标签。

<h1></h1>

反正是很痛苦了。

2. 发现markdown

同事介绍了markdownpad2和为知笔记,发觉挺好用,写出来的笔记也很漂亮,如图:

但是用为知笔记一传到wordpress,那就真是丑地一米,没法看。现在写文档主要是往站点发布,本地再好看,一发上去丑了,那就没意义了。

3. 自已发明轮子

既然markdown是标记类东西,就自已想了个办法,写了个sed脚本,把markdown编辑好的内容转成HTML,脚本如下:

修订1:2017.02.15
禁止匹配代码段中的内容,使用sed反向匹配
修订2:2017.02.18
增加超链接转换功能
/^```[ ][ ]*.*/,/^```$/!{
/^# .* #$/{
s/^#[ ][ ]*/<h1>/
s/[ ][ ]*#$/<\/h1>/g
}
/^## .* ##$/{
s/^##[ ][ ]*/<h2>/
s/[ ][ ]*##$/<\/h2>/g
}
/^### .* ###$/{
s/^###[ ][ ]*/<h3>/
s/[ ][ ]*###$/<\/h3>/g
}
/\*\*.*\*\*$/{
s/\*\*/<strong>/1
s/\*\*$/<\/strong>/g
}
/^- /{
s/^- /<li>/
s/$/<\/li>/g
}
/\[.*\](\(http.*\))/{
s/\[\(.*\)\](\(http.*\))/<a href="\2">\1<\/a>/g
}
}

/^```[ ][ ]*.*/,/^```$/{
/```[ ][ ]*/{
s/```[ ][ ]*/\/g
}
s/^```$/\[\/code\]/g
}

暂时够用,如果需要后面扩容。

转换方式  sed -f md.sed a.txt > b.txt,这样就把markdown文件转成了wordpress HTML格式要求的内容了,wordpress desktop里直接以HTML模式贴进去更新博客就行了。

4. 现在的写作流程

a.vim编写文本文档,可以专注文档内容和架构,不需要被样式、HTML所左右。如果有图片,直接截图到为知笔记
b.为知笔记发布只有图片的博客,主要是为了上传图片,获取图片的URL链接(或者后期用wordpress插件一张张贴,其实写完再贴挺方便)
c.在vim文档里补充图片的URL链接
d.文档写完打上markdown标记
e.使用md.seq转成HTML内容
f.在wordpress desktop里直接贴转换后的内容

现在就是看到的这篇文档的内容,就是这么来的。省去了不少手工调整的时间,把markdown标记好的东西往为知笔记里一贴,又是一篇漂亮的笔记

补充完图片URL和markdown标记的样式如下:

关于紫砂壶

感悟技术人生
此条目发表在其它内容分类目录,贴了标签。将固定链接加入收藏夹。