用Markdown写博客

一、动机

引用 Markdown 文档（原版 | 中文版）中的描述：

Markdown 的目标是：实现「易读易写」，成为一种适用于网络的书写语言。

一份使用 Markdown 格式撰写的文档应该可以直接以纯文本方式发布，而不会看起来满是标签或格式指令。

我们通常使用博客系统的 WYSIWYG 编辑器来写博客。与这种传统方式相比，我认为用 Markdown 写博客至少有以下好处：

• 越文本越简单，所想即所得

  撰写 Markdown 文档就是在写纯文本文档，非常简单快捷；一旦熟悉了 Markdown 语法（非常容易），文档格式尽在掌握，所想即所得。

  可以试想下用 Vi/Vim 在键盘上弹奏文本，和在 WYSIWYG 编辑器的格式栏中狂点一通的场景。

• 保持文档内容的独立性

  虽然相比 HTML 更轻量级，但 Markdown 也是一门通用的标记语言，用 Markdown 撰写的文档（以及由Markdown文档转换生成的 HTML 文档）是稳定的，Markdown 解释器保证了文档内容的独立性。

  而如果用 WYSIWYG 编辑器撰写文档，在不同的博客系统上面，为了表达同样的内容，最终得到的 HTML 文档则可能千差万别。

• 本地撰写，随处发布

  用 Markdown 撰写文档只需要一个编辑器，因此可以在本地撰写，然后发布到你喜欢的一个或多个博客系统中去。本地撰写既方便快捷，又能够实现本地备份。这样一来，你其实就是在本地写随想、记笔记，发布博客只是一个简单的附加操作，甚至你也可以不发布。

当然凡事有利必有弊，用 Markdown 写博客的缺点也是明显的：

• 不是所有博客都支持 Markdown

  如果博客系统不支持 Markdown，但是支持发布 HTML 文档，那可以先手工将 Markdown 文档转换成 HTML 文档，然后再发布到博客中。

• 上传图片是个问题

  网上的有一个方法是：先上传图片到博客系统，得到图片 URL 后，再添加到 Markdown 文档中。这相比在 WYSIWYG 编辑器中直接上传麻烦很多，而且不同博客系统中如何单独上传图片还是个问题。（期待有更可行更通用的解决办法）

• CSS 样式差异

  对于相同的 HTML 元素而言，不同的博客系统有不同的 CSS 样式，由此呈现出来的效果可能会不同。当然这个问题可以通过自己定制 CSS 样式来改善。

二、步骤

1. 撰写

这个其实没什么好说的，打开你喜欢的文本编辑器，按照Markdown语法撰写内容即可。

如果你对Markdown语法还没有烂熟于心，或者想边写边看文档的最终效果，也可以使用Markdown编辑器。这里推荐一款在线 Markdown 编辑器（基于Showdown.js），其他的没试过，这款用起来还是很方便的。

2. 发布

如果博客系统支持 Markdown，这一步也没什么好说的，直接复制/粘贴/发布三步走。

如果博客系统不支持 Markdown，但支持发布HTML文档，就需要先将 Markdown 文档转换为 HTML 文档后再发布。转换方法视情况而定：

• 如果使用本地文本编辑器，则可以通过命令或脚本进行转换（这里给出一个简单的 Python 脚本：markdown2html.py）

  #! /usr/bin/python
  import markdown
  import sys
  if len(sys.argv) != 3:
      print 'usage: python markdown2html.py [markdown_filename] [html_filename]'
  try:
      markdown.markdownFromFile(input=sys.argv[1], output=sys.argv[2])
      print 'succeeded'  
  except Exception, e:
      print 'failed'
  

• 如果使用在线 Markdown 编辑器，则在左侧写好Markdown文档后，在右上角的下拉框中选择 HTML Output 即可得到对应的 HTML 文档。

三、示例

博客园好像不支持 Markdown，本篇文章的发布方法：

1. 在 Vim 中撰写"用Markdown写博客.txt"
2. 使用 python markdown2html.py 用Markdown写博客.txt blog.html 转换生成 HTML 文档
3. 进入 设置默认编辑器，选择 纯文本框
4. 在博客园后台的纯文本框中输入 <div id="markdown"></div>，并将 blog.html 的内容复制到 div#markdown 块元素内部，然后提交
5. 进入 设置，在 通过CSS代码定制代码页面风格 中定制 div#markdown 块元素内部的各 HTML 元素的CSS 样式